Problems using position:fixed;
I have searched through all the similar posts and google and have not quite found an answer so I hope this is not a double post and I apologize if it is.
I am trying to keep my title bar on the top of my page using position fixed. I 开发者_开发问答am not coding for IE right now and am testing with the latest Chrome and Firefox. I know position:fixed is relative to the browser window so the symptoms make sense but I cannot find a cure.
When I add position: fixed; to the header it bunches it up and shoves it in the top right corner and I cannot get it to spread out across the page again, or push the other divs down. am reluctant to use a fixed width because I would like to keep the page as liquid as possible.
I am open to javascript/jquery php or whatever it takes. I also am sure it is a easy fix but I just cannot figure it. CSS below.
body {
background-image:url(images/background_image/skyblue.jpg);
min-width:1100px;
padding-left:40px;
padding-right:40px;
padding-top:0;
padding-bottom:0;
margin:0;
background-color:#022F00;
}
.container {
background-color:#FFF;
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
background-image:url(images/background_image/skyblue.jpg);
background-color:#022F00;
}
.header {
width:inherit;
background-color:ffffcc;
position:fixed;
left:auto;
right:auto;
}
.login {
float:right;
padding:0;
margin:0;
border:0;
}
.rightinfo {
background-color:#33F;
float:left;
height:200px;
width:20%;
border:thin;
-moz-border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
-webkit-border-radius:1em;
}
.contentbackground {
background-image:url(images/background_image/skyblue.jpg);
background-color:#022F00;
float:left;
width:80%;
padding-top:10px;
}
I have pictures that I am not allowed to post yet but can email. I hope this makes sense. Thanks for any help!
for a full width fixed header try:
.header {
top:0;
left:0;
right:0;
background-color:ffffcc;
position:fixed;
}
精彩评论