I want to achive this kind of design.
So far this is my code (https://codepen.io/aceraven777/pen/BaWeJer)
My code:
body {
background-color: #122026;
color: #fff;
}
.wrapper {
width: 1000px;
margin: auto;
}
.first-part {
border-left: 10px solid white;
border-bottom: 10px solid white;
border-radius: 0 0 0 20px;
margin-bottom: -10px;
padding: 20px;
}
.second-part {
border-right: 10px solid white;
border-top: 10px solid white;
border-radius: 0 20px 0 0;
padding: 20px;
}
<div class="wrapper">
<div class="first-part">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
</div>
<div class="second-part">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
</div>
</div>
You could achieve this with additional elements that are used as mask.
two small masks with the same background-color like the body for hiding the unwanted part of the horizontal border
and one mask with tranparent background to repaint the rounded border from .first-part because the first mask is covering also the rounded border (not only the unwanted part)
You could also use masks for the little circles.
body {
background-color: #122026;
color: #fff;
}
.wrapper {
width: 1000px;
margin: auto;
}
.first-part {
position: relative;
border-left: 10px solid white;
border-bottom: 10px solid white;
border-radius: 0 0 0 20px;
margin-bottom: -10px;
padding: 20px;
}
.second-part {
position: relative;
border-right: 10px solid white;
border-top: 10px solid white;
border-radius: 0 20px 0 0;
padding: 20px;
}
.mask {
background-color: #122026;
}
#first-mask {
position: absolute;
bottom: -11px;
right: 0;
width: 20px;
height: 12px;
}
#second-mask {
position: absolute;
top: -11px;
left: 0;
width: 20px;
height: 12px;
}
#border-mask {
position: absolute;
top: 0;
left: -10px;
width: 50%;
height: 100%;
border-left: 10px solid white;
border-bottom: 10px solid white;
border-radius: 0 0 0 20px;
z-index: 10;
}
.circle {
background-color: #122026;
position: absolute;
width: 20px;
height: 20px;
border: 10px solid white;
border-radius: 50%;
z-index: 20;
}
#first-circle {
top: 55%;
left: -25px;
}
#second-circle {
top: -25px;
right: 10%;
}
<div class="wrapper">
<div class="first-part">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
<div id="first-mask" class="mask"></div>
<div id="border-mask"></div>
<div id="first-circle" class="circle"></div>
</div>
<div class="second-part">
<div id="second-mask" class="mask"></div>
<div id="second-circle" class="circle"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
</div>
</div>
Related
In the following example I am trying to create a layout where the navigation will:
Always stay sticky to the top when scrolling down
Always stay left (not all the way left of the browser window) from content which a person is able to read
Prevent any space from being taken up by the actual navigation element's size
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
right: 0;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
I tried using the right property (on the nav selector) to see if I could use it to make it stick to the container with the actual content inside but it does not do anything at all. Most webpages I could find with a navigation to the sides tend to touch the browsers sides and this is not the solution I am looking for, which makes it difficult for me to find a solution to this problem.
What I intend to make the page look like:
Here is my solution. I wrapped nav and main in an extra container, giving it the class name some-container-inside. In css, I changed all my edits. Hope this is what you need.
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
/*margin-left: auto;*/ /*delete this it*/
/*margin-right: auto;*/ /*delete this it*/
width: 100%;
}
main h1 {
margin-top: 0; /*add this it*/
}
nav {
display: table; /*add this it*/
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
right: 0;
background-color: orange;
margin-right: 25px; /*add this it*/
margin-left: 25px; /*add this it*/
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
.some-container-inside {
display: flex; /*add this it*/
justify-content: center; /*add this it*/
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<div class="some-container-inside">
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
</div>
This code you try .
hope can help you.
i add position property on some class tag.
ex:header h1,nav . and new class some-container.
header h1 {
text-align: center;
position: absolute;
right: 850px;
top: 50px;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
z-index: 100;
top: 135px;
left: 480px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
.some-container {
position: relative;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<main>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Version 1: HTML / CSS
The changes I made in:
HTML: The NAV element is in the MAIN element
CSS: On the NAV element set style margin-left: -230px; and margin-bottom: -130px;
In this version, if you add a new menu item, you must manually set the margin-bottom:
If you want this to be done automatically see Version 2 below in this post
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
margin-left: -230px;
margin-bottom: -130px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<main>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
</ul>
</nav>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
Version 2: HTML / CSS / JS
You can add new items to the navigation and the JS will make the necessary changes so that the navigation is always displayed in the right place.
Important: The JS code must be added at the bottom of the page code
var nav = document.getElementsByTagName('nav')[0];
nav.setAttribute('style', 'margin-bottom:-' + (nav.offsetHeight + 30) + 'px');
header h1 {
text-align: center;
}
main {
display: block;
max-width: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav {
border: 1px solid #000;
width: 200px;
position: sticky;
top: 0;
margin-left: -230px;
background-color: orange;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul a {
display: block;
border: 1px solid #000;
margin: 5px 0;
padding: 5px;
}
<div class="some-container">
<header>
<h1>
Some header
</h1>
</header>
<main>
<nav>
<ul>
<li>Below</li>
<li>Above</li>
<li>Contacts</li>
</ul>
</nav>
<h1>
Below is some content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
a. Etiam ut dignissim lacus, ut iaculis mi.
Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
molestie purus sodales. Vestibulum ornare ac nisl ut
dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
tellus quam, suscipit non enim et, pellentesque
varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
pellentesque accumsan. Duis maximus augue id lacus
tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
porttitor at faucibus ut, sodales id erat.
</p>
<p>
Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
nec cursus. Nullam ut arcu lacus. Vivamus eleifend
ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
</p>
<p>
Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
tortor. Fusce in laoreet lacus. Cras dui sapien,
convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
ex.
</p>
<p>
Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
euismod orci felis sit amet neque. Maecenas fringilla
enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
Integer imperdiet massa eu orci faucibus
mattis.
</p>
<h1 id="above">Above all</h1>
</main>
</div>
I have a problem with overlapping <div>s as you can see in the provided snippet (I tried to simplify my code as much as possible). What I want to achieve is, section--red being fixed so section--green and section--blue overlap it when scrolling, with section--blue coming after section--green. Is there any way to achieve this without setting a fixed height on either element? Any input is much appreciated!
.section--red {
position: fixed;
top: 0;
z-index: -1;
height: 100vh;
background-color: maroon;
}
.section--green {
position: relative;
padding-top: 160px;
top: 100vh;
z-index: 2;
}
.section--green:before {
position: absolute;
top: 0;
left: 50%;
z-index: -1;
display: block;
width: 100vw;
height: calc(100% + 160px);
content: "";
background-color: olive;
transform: translate(-50%);
}
.section--blue {
background-color: teal;
}
<div class="section--red">
<h1>Hi!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus turpis sed venenatis euismod. Quisque in eleifend lorem. In hac habitasse platea dictumst. Nunc ligula risus, porta sollicitudin quam lobortis, malesuada hendrerit lectus. Fusce eu lacus sed nunc dignissim efficitur ac sed urna. Nulla magna metus, ultrices in nunc posuere, pretium faucibus nisi. Sed commodo mauris eu mattis condimentum.</p>
</div>
<div class="section--green">
<p>Phasellus eu rhoncus magna. Aliquam facilisis tincidunt nisi vel convallis. Vestibulum varius vestibulum diam vel molestie. Ut fermentum ipsum et cursus vulputate. Suspendisse finibus odio sit amet erat volutpat molestie dignissim ac ante. Aliquam dui enim, congue vel nisi at, molestie iaculis ipsum. Ut varius, mi sed pellentesque congue, turpis mauris aliquam lorem, ac efficitur metus tellus vitae dolor. Suspendisse at ultrices sapien. Donec vestibulum diam vel facilisis ullamcorper. Maecenas tincidunt neque magna, quis gravida est gravida id.</p>
</div>
<div class="section--blue">
<p>Mauris auctor diam mauris, sit amet viverra arcu commodo quis. Curabitur gravida massa arcu, sed vestibulum dolor feugiat eget. Phasellus ipsum massa, consectetur vel libero vitae, semper tempus turpis. Vestibulum a fermentum enim. Mauris ac velit sapien. Sed ut tortor et ante mollis posuere et at ante. Integer tempus purus nec nisi placerat dictum. Praesent faucibus sodales lorem ut ultricies. Mauris suscipit eleifend nisl, malesuada elementum dui imperdiet vitae. Pellentesque pulvinar turpis vitae felis tristique accumsan. Mauris eu massa in mi placerat pharetra. Mauris consequat, mi nec sollicitudin pharetra, nisl quam porta turpis, eget posuere orci nisl vel elit. Integer porttitor fringilla malesuada. Mauris congue magna est, vitae tempus ante facilisis vitae.</p>
</div>
Simply remove position: from elements.
.section--red {
position:fixed;
top: 0;
z-index: -1;
height: 100vh;
background-color: maroon;
}
.section--green {
background-color: green;
margin-top: 100vh;
z-index: 2;
}
.section--green:before {
position:
top: 0;
left: 50%;
z-index: -1;
display: block;
width: 100vw;
height: calc(100% + 160px);
content: "";
background-color: olive;
transform: translate(-50%);
}
.section--blue {
background-color: teal;
display:table-cell;
}
<div class="section--red">
<h1>Hi!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus turpis sed venenatis euismod. Quisque in eleifend lorem. In hac habitasse platea dictumst. Nunc ligula risus, porta sollicitudin quam lobortis, malesuada hendrerit lectus. Fusce eu lacus sed nunc dignissim efficitur ac sed urna. Nulla magna metus, ultrices in nunc posuere, pretium faucibus nisi. Sed commodo mauris eu mattis condimentum.</p>
</div>
<div class="section--green">
<p>Phasellus eu rhoncus magna. Aliquam facilisis tincidunt nisi vel convallis. Vestibulum varius vestibulum diam vel molestie. Ut fermentum ipsum et cursus vulputate. Suspendisse finibus odio sit amet erat volutpat molestie dignissim ac ante. Aliquam dui enim, congue vel nisi at, molestie iaculis ipsum. Ut varius, mi sed pellentesque congue, turpis mauris aliquam lorem, ac efficitur metus tellus vitae dolor. Suspendisse at ultrices sapien. Donec vestibulum diam vel facilisis ullamcorper. Maecenas tincidunt neque magna, quis gravida est gravida id.</p>
</div>
<div class="section--blue">
<p>Mauris auctor diam mauris, sit amet viverra arcu commodo quis. Curabitur gravida massa arcu, sed vestibulum dolor feugiat eget. Phasellus ipsum massa, consectetur vel libero vitae, semper tempus turpis. Vestibulum a fermentum enim. Mauris ac velit sapien. Sed ut tortor et ante mollis posuere et at ante. Integer tempus purus nec nisi placerat dictum. Praesent faucibus sodales lorem ut ultricies. Mauris suscipit eleifend nisl, malesuada elementum dui imperdiet vitae. Pellentesque pulvinar turpis vitae felis tristique accumsan. Mauris eu massa in mi placerat pharetra. Mauris consequat, mi nec sollicitudin pharetra, nisl quam porta turpis, eget posuere orci nisl vel elit. Integer porttitor fringilla malesuada. Mauris congue magna est, vitae tempus ante facilisis vitae.</p>
</div>
#import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
background-color: lightgray
}
.header {
position: fixed;
top: 0px;
width: 780px;
background-color: rgb(84, 153, 199);
padding: 40px 0;
}
.container {
background-color: white;
width: 780px;
margin: 0 auto;
padding-top: 120px;
}
.photo {
height: 160px;
}
h1,
.help {
font-family: 'Roboto', sans-serif;
}
h1 {
color: white;
margin: 0 1em;
}
.right {
float: right;
margin-right: 18px;
margin-left: 30px;
}
.figure {
border-bottom: solid #BBBBBB;
border-width: 1px;
margin-left: 214px;
width: 340px;
}
.left {
float: left;
margin-right: 20px;
margin-left: 20px;
height: 160px;
border-style: solid;
border-color: #BBBBBB;
border-width: 1px;
padding: 1px;
}
p {
padding-left: 10px;
padding-right: 10px;
}
div.help {
max-width: 40px;
max-height: 40px;
min-width: 40px;
min-height: 40px;
padding: 20px;
position: absolute;
border-radius: 20px;
background-color: blue;
margin-left: 800px;
margin-top: -1000px;
color: white;
font-size: 40px;
}
.photo-grid {
width: 228px;
}
<body>
<div class="container">
<div class="header">
<h1>Layout i HTML</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit
amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla
tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>
<div class="right photo">
<img src="img/photo-one.png">
<img src="img/photo-two.png">
</div>
<p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis
non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur
faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>
<p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus
quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla
sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante
at maximus consectetur.</p>
<div class="figure">
<div>
<img src="img/photo-three.png">
<p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
</div>
</div>
<p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget
ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate
massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>
<div class="left photo"><img src="img/photo-four.png"></div>
<div class="right photo-grid">
<img src="img/photo-five.png">
<img src="img/photo-six.png">
<img src="img/photo-seven.png">
<img src="img/photo-eight.png">
</div>
<p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>
<p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque
dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse
vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>
<div class="help">
<p>?</p>
</div>
</div>
</body>
So I have these as main.css and index.html, it should look like the linked picture but instead it looks like the gyazo, the things I need to do are, border around the 2 pictures on the right, correct the orange figure and fix the questionmark help button.
Image of how its supposed to look
Image of how it currently looks
You can add the CSS class to main.css and the desired output is achieved.
.help p{
margin:0px;
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
background-color: lightgray
}
.header{
position: fixed;
top: 0px;
width: 780px;
background-color: rgb(84, 153, 199);
padding: 40px 0;
}
.container {
background-color: white;
width: 780px;
margin: 0 auto;
padding-top: 120px;
}
.photo{
height: 160px;
}
h1, .help {
font-family: 'Roboto', sans-serif;
}
h1 {
color: white;
margin: 0 1em;
}
.right {
float: right;
margin-right: 18px;
margin-left: 30px;
}
.figure {
border-bottom: solid #BBBBBB;
border-width: 1px;
margin-left: 214px;
width: 340px;
}
.left {
float: left;
margin-right: 20px;
margin-left: 20px;
height: 160px;
border-style: solid;
border-color: #BBBBBB;
border-width: 1px;
padding: 1px;
}
p {
padding-left: 10px;
padding-right: 10px;
}
div.help {
max-width: 40px;
max-height: 40px;
min-width: 40px;
min-height: 40px;
padding: 20px;
position: absolute;
border-radius: 20px;
background-color: blue;
margin-left: 800px;
margin-top: -1000px;
color: white;
font-size: 40px;
}
.photo-grid {
width: 228px;
}
.help p{
margin:0px;
}
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Lorem Ipsum</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Layout i HTML</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>
<div class="right photo">
<img src="img/photo-one.png">
<img src="img/photo-two.png">
</div>
<p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>
<p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante at maximus consectetur.</p>
<div class="figure">
<div>
<img src="img/photo-three.png">
<p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
</div>
</div>
<p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>
<div class="left photo"><img src="img/photo-four.png"></div>
<div class="right photo-grid">
<img src="img/photo-five.png">
<img src="img/photo-six.png">
<img src="img/photo-seven.png">
<img src="img/photo-eight.png">
</div>
<p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>
<p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>
<div class="help">
<p>?</p>
</div>
</div>
</body>
</html>
I'm creating a webpage that will have a long list of questions. I'm separating the questions using divs so that I can get the page to jump to the correct section, including the section at the top of the page. The problem is that the header doesn't scroll with the content like it was before I started adding content. Before adding content, the header would scroll as soon as the page started scrolling. Now, it delays until you get to the Service Time Questions radio buttons. I've searched online to see what would cause a delay in scrolling a header, but haven't found any usable results.
Here's my HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="Layout.css">
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div class="header">
<h1>Sample Page</h1>
</div>
<div class="menu">
<ul>
<li>CMS ID & Auditor Name</li>
<li>Service Time Questions</li>
<li>Narrative Questions</li>
<li>Diagram Questions</li>
<li>Photo Questions</li>
<li>Estimatics Questions</li>
</ul>
</div>
<div class="content">
<div id="cmsID" class="subcontent">
<form action="./audit_submitted.php" method="post">
<h3>CMS ID & Auditor Name</h3>
<br/><br/>
<p> Enter CMS ID:
<input type="text" name="cmsID" size="25" maxlength="25" value=""/>
<br/><br/>
Auditor Name:
<input type="text" name="auditorName" size="25" maxlength="25" value=""/>
<br/><br/>
Select Carrier:
<select name="carrierID" required>
<option value="">Select...</option>
<option value = "0">GAIG/AMIG</option>
<option value = "1">Nat Gen</option>
<option value = "2">SoCal AAA</option>
<option value = "3">QBE</option>
</select>
</p>
</form>
<br/><br/><br/>
</div>
<div class="subcontent" id="serviceTime">
<br/>
<h3>Service Time Questions</h3>
<br/><br/>
<input type="radio" name="answer" value="1"> Yes
<input type="radio" name="answer" value="0"> No
<input type="radio" name="answer" value="1"> N/A
<br/><br/>
</div>
<div class="subcontent" id="narrative">
<br/>
<h3>Narrative Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="diagram">
<br/>
<h3>Diagram Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="photos">
<br/>
<h3>Photo Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="estimatics">
<br/>
<h3>Estimatics Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
</div>
<div class="footer">
© Sample Company 2016
</div>
</body>
</html>
And here's my CSS:
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
position: absolute;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 100%;
position: fixed;
padding-top: 20%;
z-index: -1;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 100%;
font-size: 1em;
float: right;
padding: 1%;
padding-top: 10%;
padding-bottom: 20%;
position: absolute;
z-index: -1;
margin-left: 10%;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
position: fixed;
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding: 0%;
width: 10%;
background-color: #505050;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
Made a few adjustments to your stylesheet. Using fixed and absolutes in the positions was causing most of the problem. Give definite heights to each div makes a difference.
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
height: 120px;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 500px;
float: left;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 500px;
font-size: 1em;
float: left;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding-top: 20%;
width: 100%;
background-color: #505050;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
IF YOU MARK THIS DUPLICATE, YOU HAD BETTER GIVE ME A LINK TO THE ANSWER I NEED. OTHERWISE, DON'T BOTHER MARKING IT DUPLICATE, COMMENTING OR A
Just change you CSS in the html, body for overflow-x: hidden to overflow: hidden and add #estimatics{margin-bottom: 200px}
Thanks to Jeff, I was able to track down what was wrong. His answer didn't fix the issue, but it made the root cause more obvious.
I had to change the height: 100%; in .content to min-height: 100%;.
I also added display: inline-block; to the end of .content.
Finally, I had to add background-color: #F8e8d2; to the .subcontent section because the subcontents were causing discoloration on the content div.
These updates fixed it so that the header scrolls when I start scrolling the page, and my jump links work perfectly.
I wanted to show pure css popup when page load. I cannot use any JavaScript also I cannot use any ( checkbox and radio buttons ) elements.
I have found some help from http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html and http://www.cssscript.com/demo/minimal-overlay-modal-pure-css/
But here the popup shows after user click on a button or element. But I wanted to show the popup when page loads.
Any solutions ?
* {
padding: 0;
margin: 0;
}
body {
position: relative;
}
input {
display: none;
}
input:checked + label {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .6);
}
input:not(:checked) + label {
display: none;
}
.m-window {
background-color: white;
padding: 2em;
display: inline-block;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, .8);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<input type="checkbox" checked id="modal">
<label for="modal">
<div class="m-window">
click me!
</div>
</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis est, cursus sed pulvinar ac, facilisis sed est. Mauris eget tortor luctus, congue ante ut, ultrices arcu. Vivamus suscipit nisi eget est facilisis, at tincidunt dui pretium. Etiam
dolor orci, condimentum a neque ut, hendrerit aliquam lectus. Nulla efficitur lectus risus, in ullamcorper mi porta sit amet. Sed risus mauris, maximus vitae dignissim a, vulputate a diam. Sed efficitur viverra leo, ac mollis risus laoreet nec. Nam
semper eleifend mattis. Aliquam erat volutpat. Ut sagittis imperdiet lorem quis mollis. Phasellus interdum nulla sed fringilla posuere. Nullam molestie mi vel ligula interdum placerat. Ut ac condimentum nunc. Aenean eleifend at nisl in posuere. Etiam
eget aliquam velit. Vivamus pulvinar lacinia urna id iaculis. Pellentesque porttitor neque a ipsum malesuada rutrum. Cras accumsan felis eu metus eleifend, nec venenatis ipsum ullamcorper. Cras non massa purus. Sed urna leo, iaculis vel tincidunt vel,
laoreet eu tellus. Ut porta orci at ex lacinia pellentesque. Aenean eu pulvinar erat, eu fermentum risus. Morbi ipsum nisi, vestibulum et ante sed, semper sollicitudin erat. Nam eu lorem a neque vulputate semper. Pellentesque eu purus dignissim, consequat
elit ut, gravida mi. Suspendisse lobortis sodales lacus sit amet condimentum. Fusce porta est non condimentum dictum. Duis vel volutpat lectus, ut auctor augue. Pellentesque neque diam, euismod nec nulla eu, dapibus consectetur diam. Donec maximus lectus
sit amet quam dignissim, et commodo enim commodo. Suspendisse laoreet rhoncus orci, eu fringilla massa aliquet a. Curabitur consequat, purus id porttitor finibus, magna odio bibendum elit, nec interdum dolor magna eget ligula. In ultrices interdum bibendum.
Praesent ultrices ultricies tellus vitae pellentesque. Vivamus arcu justo, dignissim sit amet orci non, faucibus sollicitudin ligula. Morbi laoreet vestibulum risus nec posuere.
</p>