I'm a very noob CSS coder, but I would expect that if I add another line or a taller element in the navbar, making it higher, to push the body down. Instead it covers the top of the body, and I must increase padding on the body to push its top down below the navbar.
What CSS is at play here and why?
ProfK Hi there.
All you need to do here is add this css.
<style>
body {
padding-top: 50px;
}
</style>
And that will fix it for you.
Added to this
Here is a Fiddle this does what you are asking here.
What I do here is remove the padding-top or set it to zero.
I use a div to wrap the navbar and give this div a class of this-wrapand set the height to 50px the same as the height of the navbar.
Now what ever you place next in the body will be lower than the navbar and not under the navbar.
Does this help?... to act more as you expect.
Related
I am using “navbar fixed-top” from Bootstrap. And underneath it I have a container. What I noticed is whenever I scroll down the page, the container underneath the navbar starts to slide below the navbar (refer to attached photo). I am aware that this is an expected behaviour with fixed-top, but I am wondering is there away to always keep the container below the navbar fixed to its bottom even when the user scrolls down?
Get the height of your fixed element, let's say 50px, and then:
body {margin-top:50px}
Please add the header height as the margin-top of the container.. for example..
css
.container {
margin-top:100px; /*height of the header*/
}
OR
JQUERY
var headerheight = jQuery('header').outerHeight();
jQuery('header').css("margin-top",headerheight);
I can't get my footer image to strech the entire screen. The right side is fine but the left wont cover the entire gap. Before anything else. due to the way the website is set up. I cannot change anything from the HTML code beyond whatever that is in the footerContainer tag. That is just how the backend is set up for the client. I've tried using a background and x-repeat, but, backgrounds dont strech beyond the DIV itself.
Footer is basically the white text inside the footer background.
Set the footer div's css left property to 0:
left: 0;
Add the following two properties to the .background class in the CSS.
left: 0px;
right: 100%;
Put your footer outside the <div id="frame">...</div>. You may need to tweak other CSS to accomodate for that.
I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
For a client, I have to do fullscreen website, responsive design. I am using Bootstrap with a fixed navbar, so in order to place my content, I added a 60px padding-top to the body.
Here is my problem : the scrollbar shows systematically, because my body have a height of 100% and a 60px padding-top. I can use 'overflow: hidden;', but then if I need to scroll a page I can't anymore.
Do you have a solution ?
Thanks!
EDIT : Here is the idea : http://jsfiddle.net/StFca/
In this case, I would like the scrollbar to be hidden, 'cause there's no need of it.
Instead of adding padding to the body, you can add a margin-top: 60px property to a new class or id that you can add to your main container of your content, so it would look something like this:
#main-container {
margin-top: 60px;
}
This way you can accommodate your navbar by pushing the container itself away from it instead of the body of the document and the scrollbars will disappear.
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?