I want to make a Website with a background that is fixed (i alredy have that) and in front of the background in the middle is my stuff, like this site: http://www.nexusmods.com/skyrim/? I searched the whole internet but I can't find anything. and I already searched in the source. Can someone help me? sry for my bad english, I am swiss. Pleas feel free to correct me.
what your are looking for is setting a fixed width of your main content, and then set an auto margin for left and right so that it is centered.
.content {
width:600px; //set your desire width here
background-color:#ffffaa; // color is just there to visualize
margin-left:auto;
margin-right:auto;
}
in your HTML:
<body>
<!-- header -->
<!-- main content -->
<div class="content">
This is the main content box
</div>
<!-- footer -->
</body>
Hope this would help.
regs,
Yann
Related
I have a web page like this one (simplified):
<body>
<div id="container">
<div id="content">
....
</div>
<div id="header">
....
</div>
<div id="footer">
....
</div>
</div>
</body>
Header and Footer are fixed (top and bottom), the Content has overflow auto.
At screen no problem.
When I try to print the document (some pages), some part of the content is hidden in every page by the two bands of Header and Footer (that must be printed too).
I searched in the Internet, but I don't understand if there is a solution to my question...
Can anyone help me?
Thanks in advance.
missing text in page 2
Just put an margin-top and margin-bottom to content. So if you have:
#header{
height:5vh;
}
#footer{
height:7vh;
}
you would do:
#content{
margin-top:5vh;
margin-bottom:7vh;
}
You should check wether the CSS rules applies only for your front-page or for the whole website. And if it doesn't work, give us a printscreen with the problem!
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.
I'm trying to make an our team page using bootstrap but I can't get the footer to act right. At first it was not filling the width of the page, now (I'm not so sure what I did) this problem is solved but it is overlapping onto the content: some thumnails, writing, and a link. The page with the problem is: http://rdtaxsavers.com/new/OurTeam.php
My css file is at rdtaxsavers.com/new/css/bootstrap.css
You'll notice that the rdtaxsavers.com site footer works fine. Thanks in advance!
EDIT: I got it back to where the footer is not overlapping but now the width issue is back. You will see in my css that my modal-footer class has width:100%; at the end of it but this does not fix the issue.
EDIT: This is driving me nuts. When I fix the width problem then it overlaps, when I fix the overlap the width is broken.
I think you are placing the footer inside the Container class, the container class has a width of 1170px. therefore the footer will not be 100% width to the body. move the footer out of container class. or you have to change the width of container class.
this is what you have:
<div class="container">
<div class="row">...</div>
<footer>...</footer>
</div>
try to do this:
<div class="container">
<div class="row">...</div>
</div>
<footer>...</footer>
Try clearing the float:left in the ul.thumbnails element.
I want to know if its possible to made appear the main content to the left and the header to the right BUT the HTML is like that
<div id="header" style="float:right; height:1000px; width:60%;">
head
</div>
<div id='main' style ="float:left; height:1000px; width: 40%;">
main
</div>
I already try that but it doesnt work
By the way, the header absolutely needs to be first.
Thank you
jsfiddle everything is working as you needed. But I would add after these blocks blank div with style clear to further avoid problems with the following blocks.
Or may be you want this? jsfiddle
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/