I'm in a little bit of a pickle. My page doesn't end with my footer, as it would normally do. Instead, there is a lot of "body background" going on after all my divs end, while I would really like the scroll to end with the bottom of the footer.
I am not entirely sure, but this effect may have to do with my page menu, which uses text and jpg with a lot of hover (on the active page it has a height of 350px, on Dreamweaver's layout however it is about triple that height, due to all the jpgs which are listed.
My question: Is there a way to make the page "end" with the last div, the footer? As the whole html is a little too much, here's my basic layout:
<body>
<div class="backgroundofwholepage">
<div class="menu">
<!--contains a few other divs for the menu-->
</div>
<div class="content">
<!--contains a three column div structure, based on float-->
<br class="clearfloat">
<!--contains clear:both-->
<div class="footer">
</div>
</div>
</div>
</body>
If any of you have an idea, I'd much appreciate your help!
ACME
You either want a sticky footer (putting your footer at the bottom of the page for sure) or you want to put a background on your html element so that the body background doesn't fill the window.
html { background:white }
body { background-image:url( ... ) }
For example, see: http://jsfiddle.net/vRBZM/
Related
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
How do i keep my footer at the bottom of the page even when I click the toggle for the sidebar? The footer I made is at the bottom but whenever i click the sidebar toggle it goes up like this
Im using bootstrap btw.
This is how I did it. I'm not entirely happy with the outcome as the height of the footer is a fixed number (I would prefer if the height could be dynamic).
<div id="wrapper">
All your contents, div, nav etc go in here
<div id="push"></div> <!--add the push div here -->
</div>
<footer>
</footer>
The CSS:
#push, footer {
height:100px; /*or whatever height you need */
}
I'm not sure what your codes look like, so I can only hope that this helps.
I think you are looking for this: http://getbootstrap.com/2.3.2/examples/sticky-footer.html
It is a plugin which makes your footer sticky. You can find the code in the examples folder of your bootstrap download.
Take a look at my page here:
REMOVED
I have a big red div taking up the entire content area. I plan on having it stretch across the entire page horizontally. I'm going to be using a carousel effect to allow my clients to sign up for an appointment one step at a time. The div is a child of another div but I need it to be wider than it. The center content area is a static width and is centered with margin:auto;. Is there a way to make my child div as wide as the whole page while hopefully only using css?
**<div id="servicesteps"> </div>**
is the red div just remove it from your <div clas="shadow" id="content">
and put it above footer div and it should work
your final body tag will look something like this
<div id="header"><div id="headpadding"></div><div class="headbutton noselect">Home</div><div class="headbutton noselect">Services & Pricing</div><div class="headbutton noselect">service details</div><div class="headbutton noselect">Request Service</div><div class="headbutton noselect">Contact</div></div>
<div id="content" clas="shadow"><div class="noselect" id="logo"></div><div id="buttonarea"><a style="display:table-cell;" href="details.html"><div class="noselect greenbutton"><span class="buttontitle">GET THE DETAILS</span>Learn about what we do before you come over!</div></a><span style="width:51px;display:table-cell;"> </span><a style="display:table-cell;" href="get.html"><div class="noselect bluebutton "><span class="buttontitle">REQUEST SERVICE</span>Get your computer serviced in the next 48 hours!</div></a></div><!-- InstanceBeginEditable name="content" -->
<div class="fold noselect"><span style="background-color:#4F69FF;">Request Service</span></div>
<table id="currentstatus">
</table>
<!-- InstanceEndEditable --></div>
<div id="servicesteps">
</div>
<div id="footer">Dade Lamkins (DadeFixMyComputer.com) Copyright 2011.</div>
If I understand correctly, you would like something to stretch all the way from one side to the other. This is what I would do:
width: 100%;
That should work with your problem.
Hi I have just completed my site. I'm having problems with my print style. My html is as below:
<div id="container">
<div id="main">
<h1>title</h1>
<div class="blockright">image in here and text</div>
<p>paragraphs of text</p>
<div class="blockleft">image in here and text</div>
<p>Even more paragraphs of text</p>
<div class="clear"></div>
<div class="footer">Copyright here</div>
</div>
</div>
.blockright has af ixed width and floats right
.blockleft has a fixed width and floats left has a width of auto
.main has a width and houses the content
In my print css, i would like .blockleft and .blockright to be aligned to the bottom of the printed page before the footer. Each page on the site has to be printable and I don't want to manually reposition the page to print the article or have to have a custom style for each page to print properly. Does anyone know how to get a div aligned to the bottom of the page. I tried absolute positioning but I could not get it to work. Any ideas?
Many thanks in advance
in your print style sheet
#main {
position:fixed;
bottom:0;
left:0;
display:block
}
If you don't want all of #main to go to the bottom just wrap another div around .blockleft and .blockright and apply this css to it. Alas this will probably not work in IE6, however you may try applying some of the techniques used to apply a sticky footer to a page. here's one example http://ryanfait.com/sticky-footer/
how would you make a footer container follow directly after the content and then stretch to the bottom of the page?
The setup is:
header-container is fixed 150px height
content-container stretches with whatever content should be inside
footer-container follows stretches for the remainder of the page.
So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer
The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.
The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.
This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.
<style>
html,body,.bigDiv{height:100%}
.header{height:150px}
.footer{height:2000px; background-color:green;}
</style>
<div class="bigDiv" style="overflow:hidden;">
<div class="header"></div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>