anchor links scrolling too far
<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="#s1">link 1</a>
<li><a href="#s2">link 2</a>
<li><a href="#s3">link 3</a>
<li><a href="#s4">link 4</a>
</ul>
<div id="s1" class="first">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>div{
height: 650px;
background:#ccc;
/*the magic happens here*/
border-top:42px solid #fff;
}
ul{
top: 0;
width: 100%;
height:20px;
position: fixed;
background: deeppink;
margin:0;
padding:10px;
}
li{
float:left;
list-style:none;
padding-left:10px;
}
div:first-of-type{
margin-top:0;
}
Also in CSS:
- adding background image css
- css color underline
- how to apply different properties to different paragraphs in css
- how to make a popup in html and css
- input uppercase with css
- dark mode css
- css scale
- loading screen svg and css animation
- red asterix css
- absolute path and relative path
- transparent background css
- summation in jupyter markdown
- how to style hyperlink text css
- button two lines on ipad
- bootstrap 4 mobile media query
- grid-template-areas css
- scroll animation css
- css quitar el icono de lista
- forms html css
- image shadow css
- breakpoint bootstrap
- white border css
- stop the client from scrolling
- css grid center elements inside div