I am currently working on a website design using the 960 grid system and came across a small snag in the final moments of the design.
Ultimately, I just want to set my header and footer bars to be 'fixed' on the page, so that they will remain stationary even when the rest of the page is scrolling. Here is a great example of a fixed navigation bar.
http://ryanscherf.net/
Mine wont be vertical, but you get the point.
The problem that I am coming across is that the header works perfectly, and exactly the way I suspect it will. Here is the HTML for my header
<div id="header">
<p>
ATS Logo
</p>
</div><!--end header-->
and the css to make it stretch and fix the position
#header
{
background:grey;
width:100%;
height:65px;
position:fixed
/*padding:15px;*/
}
This solution works exactly the way i want it too. However, when i apply the same exact settings to the footer, it causes undesired results.
Here is a fiddle to show what I mean. You will have to uncomment the 'position:fixed' line for the footer to see what i mean.
http://jsfiddle.net/s4cWP/
and full screen
http://jsfiddle.net/s4cWP/embedded/result/
Its worth noting that in addition to using my own css (located at the top of the jsFiddle!) i am using the 960 reset grid and 960 12 column style sheet.
I would really appreciate a push in the right direction. Is there something im not accounting for here?
Thanks!
I'm assuming you want the footer to always appear like the header: JSFiddle.
New #footer:
#footer
{
background:grey;
width:100%;
position:fixed;
bottom:0;
left:0;
}
Also, due to overlapping, I added padding to the bottom of the #container:
#container
{
padding-top:75px;
padding-bottom:30px;
}
Related
I am writing a web page for my coursework, its a fairly simple page but I have noticed one problem I cant solve, and it is that the header of the site extends right to the edge of the page, but the footer and main body have a gap of white space meaning they do not stick out as far to the side. not sure how to fix this any answers are appreciated
here is a pastebin of my code if you wish to have a look, first half is css second half is html http://pastebin.com/P86dFrcE
You need to add box-sizing to the header so the width:100% includes the padding and it won't overflow the page. Also position middle is not a thing. I'd take it out and leave it as default position:relative;
more about box-sizing here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.header{
min-height: 40px;
margin-bottom: 5px;
width:100%;
box-sizing:border-box;
}
I am having a problem regarding some layout design tasks. Actually I want to achieve a certain layout design, but since I don't quite understand the position property of CSS, it's a bit difficult for me to do this. Here's the link to what i am actually trying to do.
I want an area or container whose position will be fixed as designed in above mention linked. In this web layout design, the left side of the web page is position: fixed: it's not moving and when i scroll the right side of the page it is scrolling down. So i need the same functioning for my web page.
(Sorry for my bad English i am little bit passive at it)
For that you use the position:fixed attribute in your CSS.
You would make a sidebar that does not scroll like this:
HTML
<body>
<div id="sidebar">
This is fixed to the side of the page!
</div>
<div id="main">This Scrolls!</div>
</body>
CSS
#sidebar{
position:fixed;
top:0px;
left:0px;
width:400px;
height:100%;
background:red;
}
#main{
width:100%;
height:100%;
background:lightblue;
text-align:center;
}
EXAMPLE
I am currently working on a site that requires a footer to be placed either at the bottom of the window, or the bottom of the page content, whichever is lower. I have tried using the height: 100% method, but this causes a problem.
I also have a position: fixed header, and some padding on my content (defined in pixels). Also, the height of the content may change after the page has loaded (use of accordions, etc.), so I wonder if there's a pure CSS way to position the footer to either the bottom of the window, or the bottom of the document, while still allowing pixel padding and so forth.
Here's an outlined structure of the HTML:
<header></header>
<div class="content">
<footer></footer>
</div>
I have also put together a Fiddle to demonstrate how the CSS works at the moment: http://jsfiddle.net/LY6Zs/. I am unfortunately unable to change the HTML structure (i.e. breaking out the footer element from .content.
You first need to have a container div just after the which contains all the content
.container
{
min-height:100%;
position:relative;
margin:0 auto;
}
.footer{
position:absolute;
bottom:0;
}
On my companys website http://www.ensorbuilding.com , the middle content always overlaps the left menu, sometimes the right menu overlaps the other two.
The code looks like this
<aside id="left_menu"></aside>
<section id="content"></section>
<aside id="right_menu"></aside>
I have used many javascript auto height fixes but none of them seem to have worked?
Can anybody shed some light into this?
Thankyou!
Haven't seen your code but if I made it, I would affect to the three parts (both menus and content) a fixed width.
For instance in CSS:
#left_menu{
float:left;
width:200px
}
#right_menu{
float:left;
width:200px
}
#content{
float:left;
width:600px
}
Elements' height does not matter for your issue.
Is it possible to create a footer div that sits at the bottom of a site regardless of how much information is present in the middle?
Currently the div I have is positioned depending on how much content i have in the body.
See also:
How do you get the footer to stay at the bottom of a Web page?
I am by no means a css expert, but this works for me across the major browsers:
.d_footer
{
position:fixed;
bottom:0px;
background-color: #336699;
width:100%;
text-align:center;
padding-top:5px;
padding-bottom:5px;
color:#ffffff;
}
Float the content div and have the footer div use clear: both.
I know I marked this as being answered but I've run into another problem as a result. The footer sits nicely at the bottom of the page, however, if the content goes past the footer, the footer simply floats over the content.
Is there a way to keep the footer at the bottom of the page without it overlapping if the content goes past the bottom?
My gut feel is using an iframe but Im not sure how to do it.
JonathanMueller is right, that works perfectly.
I had been looking through posts trying to do it like this. All I could find was fixed to the bottom of the window.
Thanks!