I have looked for other answers on SO that should answer the question, but I'm having a hard time finding relevant help.
On my webpage, I have two nav bars, one each for the top and bottom. My problem is that my "body" is getting eaten up by the two nav bars. I would prefer to have the content scale to the edges of each nav bar rather than extending into them.
The sample code can be seen in this fiddle: http://jsfiddle.net/qLjcao3p/
Thanks for all help.
The reason your content is displaying under the header and footer is because the header and footer have fixed positions. These elements space is not taken into consideration when rendering your page. So the content will be generated as if the nav are not there.
Adding margins as suggested will solve the problem by giving extra white space that will allow you to scroll from beginning to end for your content.
Are you using jQuery mobile?
Adding some margin or padding on the body will help. If that is what you were looking for.
// em or rem values recommended
body {
margin:60px 0 40px 0;
}
You have only to add margin to body like:
body{
margin : 60px 0; // 60px for top and bottom side and 0 for left and right side
}
Try this example
Add a padding to bottom and top of your container:
#bodyContent {
padding:60px 0;
}
60px looked fine. That is really the hight of your Nav.
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'm trying to make a sticky footer for a site I'm working on and I can't get rid of an extra white space at the bottom. I see it in Chrome and Safari (I haven't tested other browsers yet). When the page first loads, you don't see it, but if you scroll down there is about 2-3px of just white space. How to I make it so that my footer sticks to the bottom?
This is the site:
http://ec2-23-23-22-128.compute-1.amazonaws.com/
And this is what I'm trying to accomplish:
How do I get rid of the extra white space at the bottom of the page?
NOTE: I know there are a couple of other rendering issues, but the only one I'm worried about right now is the extra pixles on the bottom of the page. I've been playing with negative margins, 0 margins, paddings, etc all day and I'm not getting anywhere with it :/
It disappears when you give the image in the div with class "img-wrapper" display: block. This is common with images, I see you are doing this for a css reset:
* {
margin: 0px;
}
I would suggest against this. A proper css reset or normalize would go a long way to easing these kind of headaches.
Edit: I know you said it's a work in progress, but just as a heads up if you haven't noticed the window also scrolls when you don't need it to. This is the issue:
#b-container {
background-color: #F1EFE6;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -170px; // originally this was 0 auto -150px
}
When my website is scaled down and a horizontal scroll bar apears, a white space is suggested on the right side of my webpage at the footer.
How am I able to fix this? url: http://www.deserved.nl/shop/home.html
#Jeff B: Please let me know if it's inappropriate to add this as a separate answer rather than as a comment to your answer.
Jeff is correct, but to clarify I would do this:
Remove the padding-left: 180px; style from class .footerWrapper
Remove width: 100%; from #footer
Add min-width: 1141px; to #footer
This should take care of the white-space.
The problem is that you are defining the width of wrapper to be 1141px, and footer to be 100%. This means that when the width is less than 1141px, you will have a horizontal scroll bar, but your footer will still be 100% of the window size, resulting in white space on the right.
Remove the whitespace between the footer's end tag </div> and </body>
So like this: </div></body>
I have a slider that for some reason is half obeying margin 0?
Also, is there anyway I can make the top bar background not have such a large white border around it? I'm trying to make it start right underneath the browser url bar but it seems to leave a fairly large gap?
http://ispiked.net/tests
Add position: relative to the div with class="oneByOne1". That should fix the slider.
As for the top bar, add margin: 0; to both the body element and the p element inside .topbar - afterwards you might want to add something like padding-top: 15px to that same p element.
Also, is there anyway I can make the top bar background not have such
a large white border around it?
tried CSS like
html, body { margin: 0px; padding: 0px; }
to reset the layout at the beginning?
I'm coding a Wordpress theme and I'm having an issue displaying 5 dynamic post thumbnails next to each other (left floated) with a 20px right margin within a centered div.
here's a link to a page: http://www.lesfourchettes.net/info (the issue occurs when you click on "Les Prèfs" in the top navigation: the top menu and the below content moves 10px to the left.)
Here's the issue:
the site has a 960px width and is centered. (#wrapper)
the 5 dynamically generated post thumbnails are 176px wide with a 20px right margin each. (#.prefs-thumbs)
i choose these dimensions for the thumbnails thinking i would have 5 thumbnails and 4 margins between them which would add up to 960px.
but the reality is that the last thumbnail of each row also has a 20px margin and therefore the whole thing adds up to 980px (20px wider than the site).
the only solution i found for showing 5 thumbnails per row was assigning a 980px width to the thumbnail div (#prefs).
however this seems to provoke an issue with the centering of the rest of the content which is no longer centered with the 960px site width but width the 980px thumbnail div.
so whenever i click "lesprefs" to display the thumbnails (using a little jquery function), the whole content moves to 10px on the left.
The whole thing is a bit complicated to explain. But i feel like there is surely an easy CSS solution to my problem. Perhaps something to do with the overflow property, display property or someting like that... I'm just not good enough with CSS yet to identify the solution and my issue being so specific, I haven't found the answer on the web.
i feel like the problem lies within those lines of CSS:
#wrapper {
width: 960px;
height: auto;
margin: 0 auto 0 auto;
}
#prefs {
width: 980px;
height: 390px;
margin: 69px 0 0 0;
}
.prefs-thumbs {
position: relative;
float: left;
margin: 0 20px 20px 0;
}
Any help would be greatly appreciated.
Cheers!
You're noticing the 10px shift because the page height is increasing, and a horizontal scroll bar is being added by the browser.
My preferred solution to this problem is to always show the horizontal scroll bar, with the following CSS (works in all modern browsers):
html { overflow-y: scroll; }
I see the centered alignment shifting toward the left because of the vertical scroll that appear on the right side of the page.
First thing to solve is the actual fitting of the elements in your block.
You need to remove the right-margin from the last element in each line..
So either set a class to the last item which overrides the margin with marign-right:0 or (for modern browsers) do it purely in CSS with
.prefs-thumbs:nth-child(5n+1){
margin-right:0;
}
reference: http://www.w3.org/TR/selectors/#nth-child-pseudo
You also need to remove the border from the images as that gets added and instead of 176 pixels each of your images occupies 180 pixels (it has 2 pixel border around it)
So, correct your math first..
The issue with the moving of the content, is that the scroll bars appear once the content exceeds the page height (as expected). One solution is to keep the vertical scrollbar alwats visible, as #wsanville suggests in his answer.