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
Related
I have a problem because in my code i have an header with padding(left & right at 8%), but on the content box i dont have padding, and when i reduce the firefox window the content box have not the same width than the header (because padding on the header change this).
So I want to the box content have always the same width than the header, and keep dimensions of the slidebar.
in the content right of the slide bar, I have tried to put the same padding but that does not change because the contentbox have a defined width.
This is a code example:
<header>
<div id="logo"></div>
</header>
<div id="box">
<div id="slidebar"></div>
<div id="content"></div>
</div>
thats the JSFIDDLE :
https://jsfiddle.net/t2h839dt/
(if you reduce the preview window on JSFIDDLE, you see the problem (not same width for header and box content).
Your code seems partially responsive. First of all you should decide which approach you are going to do? either fixed or responsive layout.
Please try the below link is for fixed layout.
[jsfiddle][1]
[1]: https://jsfiddle.net/antonysuthakarj/hLsaotco/
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 am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
A horizontal scroll bar appeared on my website and the page is now wider than it was. The last thing I remember doing was adding a widget (to link a pic to another website) to the right sidebar of my page. I removed the widget but the horizontal bar still remained at the bottom of the page and the webpage is still too wide. Can you please help me in getting the page back to normal horizontal dimensions and without a horizontal scroll bar. thanks
here is the website
www.runningnurse.com
In your footer you have a div with inline CSS:
position:relative;left: 119px;
That's exactly how much the site is scrolling. An alternate style for that effect which would remove the scroll bar is this:
padding-left:119px; overflow:hidden;
The problem is in the footer, it's too wide because the div child element of the ul (ul elements are only supposed to have li as their child elements!) is positioned to the left.
You have this HTML at the bottom of the page:
<div id="footer">
<ul class="footer-links">
<div style="position:relative;left: 119px; "></div>
</ul>
Use this instead:
<div id="footer">
<ul class="footer-links" style="margin-left: 133px;">
<div>...</div>
</ul>
Also the fact that the HTML contains a lot of errors might give implications when viewing in in different browsers.
The problem has to do with your footer:
add #footer{width:947px} and it gets rid of the horizontal scrollbar for me.
As #j08691 Suggested, Use overflow:hidden and your problem would be solved.
One easy way would be to hide the overflow on the body tag.
body {
overflow-x: hidden;
}
Use overflow-x
Links within a page scroll your content to the top of the browser window. Is there any way to add a margin to that? I'll be using some javascript to guide the scrolling, but would like to have a viable fallback.
So, in short, can I add a margin in CSS that will add some space inbetween the top of the browser window and a section when it's a page link.
HTML:
<nav>
TEST
</nav>
<div class="section">
<a name="test"></a>
<p>This content should be offset from the top of the page when scrolled to</p>
</div>
the preferred way to do in-page links is to use the id instead of name attribute.
<a href="#test">
should match up with:
<div id="test">
From here you can easily add padding to the top of the #test div and that will be your scroll position.
Example: http://tinkerbin.com/EvV7byy9
CSS now supports scroll-margin-top.
This is the best way to do it in 2021.
Hmm, I would set the anchors in each section to be positioned absolutely, about 10px down from the start of the section. It would look like this:
.section {
position: relative;
}
.section > a {
position: absolute;
top: 10px;
}
That is essentially a 10 pixel margin. You can adjust the value of top accordingly to change the margin/padding. I also used the direct descendant operator ( > ) so links in the paragraphs won't be affected.
Also, as mentioned by #NathanManousos, you should no longer use the name attribute, but the ID attribute. Relative document links will scroll to the ID of any element, not just links. You could put an ID on each of your section DIVs and use padding to scroll to the top of the div, and the padding will cause the actual content to be further down in the div.
<style>
.section {
padding-top: 10px;
}
</style>
...
<nav>
TEST
</nav>
<div class="section" id="test">
<p>This content should be offset from the top of the page when scrolled to</p>
</div>