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>
Related
I have a header fixed to the top of the page that can wrap creating more height when the page is resized to a smaller width.
How do I make the the page content (#wrapper) always begin at the bottom of the header with CSS only?
<body>
<header>
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
As you only want to use CSS, you could just set padding-top on your #wrapper div so it moves the content below the bottom of the header. Then adjust the padding-top size for each screen size in media queries.
...As already stated in the comments above, you have to use a JS solution, unless you are able to know at which resolutions the fixed header's height increases in which case you can use media queries and either use padding-top for the #wrapper element equal to the fixed header's height, or use an empty element with height equal to the header's.
If you are able to change the HTML, then another approach that avoids the use of JavaScript is to include two copies of the header element:
<body>
<header id="show">
This fixed content will wrap on small devices.
</header>
<header id="flow">
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
Then you can use #show { position: fixed; zIndex: 10000 } for the first element (to keep the header visible), and #flow { display: hidden } on the second element to consume the space in the page flow.
If you go to this page.
And click the side nav bar, it scrolls to a certain point on the page. However, the header of the section I'm trying to jump to, is hidden behind the fixed nav bar. How do I set it so the page will jump to a position in which the title of each section is visible?
do not use <br>for margin bottom.
Add this to your stylesheet:
body{
margin-top: 50px;
}
or as inline css:
<body style="margin-top: 50px;"> ...
then you can remove the placeholders from your main content and your sidebar
You can either add some padding-top to your sections title, or move your named anchors like:
a[name] {
position: relative;
top: -40px;
}
I think you are talking about implementing class. Give #(num) class name in the body and call by #(num) in the link in the navbar that will redirect the the place you want. Why are you giving name='1' in anchor tag in place of href?
This is Wrong Way
<a name="1"></a>
You can see you content going inside top bar because of this method.
Instead
<div class="1">
<h1>Computing Notes</h1>
</div>
Use href #value to call from anchor tag like this:
Fundamentals of computer systems
I try to created multicolumn menu here (updated link is HERE):
I made used of display: inline-block strategy to make (horizontal) rows. And seems it works.
But it stops work when I wrapped it into the span which comes with position:relative.
<section>
<button>123</button>
<button>123</button>
<span class="dropdown">
* <!-- this is a link that should be inline with buttons -->
<div class="menu">
<div class="row">
<ul>
<li>11111111111111111111111111</li>
<li>1111111111111</li>
<li>111</li>
</ul>
</div>
<div class="row">
<ul>
<li>2222222222</li>
<li>222222222222222222222</li>
</ul>
</div>
<div class="row">
<ul>
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</div>
</div>
</span>
</section>
The href link in the span represents a button or link where I would click to make menu appeared.
I have to have position relative in the span to make menu appears on right place, relatively to it.
(all buttons and link should be on the same horizontal line)
Question: how to make it working?
It works though if I change span to div and make fixed size for it like width:600px (and this width have be more or less of the menu width to make it work like expected, which is weird), but/so I want it to be span (with no specific/hard-coded width).
UPDATE:
I've updated my example to show how it works with span as block and buttons: http://jsfiddle.net/uz0do787/32/
Just put a little more detail that was not shown on previous demo, to show what I want.
I want all buttons and the href link be on the same line, but making span "display:block" breaks that order.
Simply add display:block to span
see DEMO
See why you need to add display:block
The HTML <span> element is a generic inline container for phrasing
content, which does not inherently represent anything. It can be used
to group elements for styling purposes (using the class or id
attributes), or because they share attribute values, such as lang. It
should be used only when no other semantic element is appropriate.
<span> is very much like a element, but <div> is a block-level
element whereas a <span> is an inline element.
Source:Mozilla Developer Network
Do you mean something like this?: Fiddle
.dropdown {
position:relative;
display: block;
padding: 10px;
}
a {
position:absolute;
top: -15px;
left: 100px;
}
Span - this is an inline element. You can't wrap block with inline element. To make it work with span, add "display: block;" property to the .dropdown
Like:
.dropdown {
position:relative;
display: block;
}
I guess If fixed it by switching to display:table then I can stay with span not trying to make it block and it does not jump then to the next line:
Before:
http://jsfiddle.net/uz0do787/32/
After
http://jsfiddle.net/uz0do787/34/
But in any case, I think there is a room for re-factoring - the menu should be independent to show itself by js by x,y depending on the span/link location so that the DOM not to be so dependable on each other and not to be so fragile.
And I just do not understand, why when I apply "display:table" (on that solution/answer I proposed) span stays on place with buttons, but with "display:inline-block" the span breaks the menu layout. What makes display:table works like expected comparing to inline-block solution.
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
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;
}