I have been struggling with this for quite some time now and I'm in need of some help. I would like to get the same affect as this website where an image floats next to the wrapper id but when resizing the page the image stays in place.
http://pack155.com/
Just look at the code there:
#page is the wrapper of the image #bear
#page {
width: 1024px;
margin: 0 auto;
position: relative;
}
#bear {
position: absolute;
right: 3px;
top: 250px;
}
Related
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
Can you tell me the exact functioning of position attribute in css and difference in two values i.e "relative" and "absolute". Please tell me it in context of following code:
I am absolute positioned
<section id="about" data-type="background" data-speed="10" class="pages">
<article>Simple Parallax Scroll</article>
</section>
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
And may you also the proper functioning of "-webkit-box-shadow" attribute.
What is the difference:
When you use position relative you are making a div that will be relative to other divs with position absolute. Absolute will basically make the div or that element float above the document. Without having to follow the current dom or what you call it.
When you are simply using position: relative; you are not placing the div any where. But you are actually just creating a relative point for other elements if there is no relative div the position: absolute; will be following the document as relative.
From your css:
In your content, by following the CSS #home will be relative and #home article will be placed over it. Where ever you want to place it. And similarly #about article will be placed over #about.
You will not figure out what is the main idea of absolute or relative untill you write this: top: 0; this will remove all the margins from top side its similar to this margin-top: 0;. You can also try to move the div as much as you want.
Positioning simply lets you move the elements without having to follow the dom(or whatever it is). The basic difference between them is that relative will be the main place or main point from where the placement would start for children of that element. And absolute will follow any nearest parent and will get a new position.
Learn about them here:
Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/position
W3school.com: http://www.w3schools.com/css/css_positioning.asp (if you want to learn the basic).
CSS-Tricks: http://css-tricks.com/almanac/properties/p/position/
W3.org: http://www.w3.org/wiki/CSS/Properties/position
I´m currently working on a wordpress site where I want to center my page-wrap using CSS. I´ve tried to implement method 3 on this site without beeing successful.
Site: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
I´m using two different divs, one with the id of floater and one with the id of page-wrap. My css looks like this
#floater { float: left; height: 50%; margin-bottom: -481px; }
#page-wrap { clear: both; color: white; width: 1594px; height: 962px; margin: auto; position: relative; }
I also want to point out that inside my page-wrap div I have plenty of other divs to build my design (they also float to both left and right) if that affects the result in any way.
Link to JSFiddle: http://jsfiddle.net/FERNX/
try
#floater{
margin-top: 25%;
}
or
position: absolute;
top: 50%;
margin-top: -25%;
if you know it's height the most east and straightforward solution is:
#page-wrap { position: absolute; height: 900px; top: 50%; margin-top: -450px; }
basically it says; position its top at 50% and substract half its height to have the div's center centered.
I'm trying to get a background working with a sticky footer and I've hit a brick wall. For some reason, the blank space underneath body seems to stop at an elastic height above the bottom depending on the window height.
I can't see anything which could cause this and would really appreciate a pointer.
The demo site is at http://myfitzeek.lime49.com
According to your link, you just change
html {
height: 100%;
margin: 0;
padding: 0;
}
#footer{
position: absolute;
....
}
to
html {
margin: 0;
padding: 0;
}
#footer {
position: fixed;
....
}
I'm having issues with the margins in browsers (other than Firefox) on this page:
http://jumpthru.net/newsite/commentary/
Here is the CSS:
#container3 {
float: right;
margin: 0 -240px;
width: 100%;
}
#content3 {
margin: 0 210px 0 -45px;
width:500px;
}
#primary, #secondary {
left:920px;
overflow: hidden;
padding-top: 40px;
position:absolute;
width: 220px;
}
Kind of a strange way to build up the page..
I recommend you to create a 2 column layout in main2..
Left for menu and right for the comments header, with beneath that the content and the recent comments div..
And, start using clearfix: http://www.positioniseverything.net/easyclearing.html
I fixed the issue in Chrome by changing this CSS:
#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}
I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.
add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.
#main2 {
position: relative;
...
}
#primary, #secondary {
right: 0;
...
}
EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.