This question already has answers here:
Creating a variable height "fixed" header in CSS with scrollable content
(5 answers)
Closed 3 years ago.
I am making a basic website with a sticky Navigation Bar, When I add text to the website, the top rows are hidden behind the Navbar. Is there any way for me to position the text to start below a certain pixel, or something like that?
Obviously I can just spam p tags until it works, But since this will be a reoccurring problem I would like to know how to fix it properly.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.navbar {}
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis
ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis
sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem
gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum
ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc. Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien
dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem
sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare. Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit
tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi
varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique
sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p>
</div>
You just add this CSS in your code.
.content{
margin-top: 40px;
}
Maybe a padding. This is what I do.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.content {
width: 100%;
position: relative;
float: left;
padding-top: 40px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis
ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis
sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem
gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum
ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc. Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien
dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem
sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare. Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit
tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi
varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique
sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p>
</div>
Margin-top u have to give
<!DOCTYPE html>
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.navbar {
}
.content{
margin-top:
55px
}
</style>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc.
Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare.
Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p></div>
</body>
</html>
Related
I'm trying to achieve a layout with HTML/CSS that has a header with no set height, and a sidebar and content area next to each other below the header that take up the remaining height of the screen. In addition, the sidebar often has so many links that the links scroll off the screen, but instead of that happening, I would like to add a vertical scrollbar to just the sidebar section, and not have there be a scrollbar for the entire page.
I've been trying everything I can think of and find online, but nothing seems to be working. Here's some basic HTML/CSS to demonstrate the layout and the problem:
<!DOCTYPE html>
<html>
<head>
<style>
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow-y: scroll;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
Does anyone have any good ideas and/or know how to solve this problem? Thank you.
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
height:100vh;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
height:1px ;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow: auto;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
overflow :auto ;
}
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper porta ante, sit amet euismod ipsum venenatis vitae. Mauris ut tristique nibh, a ultricies nulla. Nullam fermentum eu mi ac cursus. Integer semper suscipit ex eu mattis. Phasellus iaculis ultricies ornare. Suspendisse ut nisi diam. Nunc pellentesque lacinia turpis vehicula pharetra. Aenean aliquam cursus elit nec fermentum. Morbi sed tempor nunc. In efficitur arcu ut finibus ultricies.
Suspendisse cursus semper semper. Praesent elit metus, venenatis vitae dictum eu, viverra ut tellus. Vestibulum ornare dui sit amet enim consectetur ornare. Cras porttitor nisl ultrices erat laoreet, ut ultricies quam condimentum. Duis a magna quis mi consequat facilisis id id dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer suscipit odio nibh, quis fermentum tellus hendrerit et.
Nam et euismod eros, id porttitor velit. Ut eget porttitor nibh, non interdum magna. Donec facilisis quis orci pharetra semper. Curabitur hendrerit massa interdum lacinia cursus. Aenean rutrum, lectus non efficitur sodales, sem lacus volutpat lectus, sed pharetra nisl metus in tortor. Integer eu turpis turpis. Phasellus eu placerat metus. Aenean ac massa consequat, consequat erat non, sollicitudin mi. Vivamus porttitor mattis accumsan.
Duis justo elit, finibus quis hendrerit at, ultricies quis nulla. Donec lobortis orci libero, eget dictum ipsum cursus ut. Phasellus vitae pellentesque risus. Mauris et dictum eros. Donec consectetur erat odio, nec semper nibh lacinia ac. Vestibulum rutrum laoreet rhoncus. Fusce dictum ut dui a fermentum. Donec hendrerit volutpat elit non ornare. Curabitur at neque semper, blandit lorem et, varius eros. Suspendisse nec turpis nec diam gravida pharetra.
Morbi turpis nulla, feugiat et egestas in, tempor sit amet ipsum. Nam ac arcu aliquet, congue ipsum ut, lacinia velit. Nulla neque nulla, vulputate in ex nec, laoreet gravida enim. Sed finibus turpis quis dapibus tincidunt. Phasellus elementum tincidunt neque sed porta. Etiam non finibus libero, vitae ullamcorper erat. Nullam lobortis eget diam eget vestibulum. In non dolor sed mauris finibus tempus non et justo. Nam convallis nec elit quis tempor. Vivamus ultricies pellentesque lectus nec commodo. Sed et molestie lacus, non gravida enim. Vivamus feugiat tempus ipsum ac eleifend. Nulla id mi tempor, tincidunt justo fermentum, convallis orci.
Fusce finibus placerat sapien at luctus. Mauris non velit diam. Vestibulum vel porta tellus, aliquet vulputate mi. Aenean a turpis ac urna gravida porta et sit amet ante. Phasellus vehicula feugiat leo ut faucibus. Curabitur porta, leo id auctor viverra, lorem nulla maximus turpis, eu laoreet leo risus id urna. Nullam finibus lectus ante, eget ultrices velit tempor ut. Maecenas quis tincidunt tortor. Nam eu facilisis libero. Morbi fermentum dolor sit amet lorem dictum aliquet. Curabitur porta nisl sed velit facilisis rhoncus. Duis eu eros quis metus blandit efficitur. Aenean venenatis est ante. Vestibulum quis laoreet dolor, sed bibendum metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras feugiat, dui vel lacinia scelerisque, lacus urna tempor quam, sit amet iaculis diam nulla et felis.
Curabitur ac accumsan arcu. Donec at euismod nisi, sit amet interdum sapien. Phasellus efficitur, felis ut condimentum accumsan, tortor ipsum convallis massa, ac iaculis quam metus quis nulla. Fusce vel turpis porta, tempor ex non, eleifend ante. Etiam nibh erat, interdum eget commodo nec, interdum eu orci. Vivamus eleifend nunc sed neque cursus pretium. Vestibulum non nisl eros. Fusce cursus tristique eros a finibus. Mauris vel massa tempor, vestibulum lorem in, bibendum urna. Donec cursus dolor nunc, sed lobortis tellus scelerisque ut. Nunc venenatis tincidunt neque eu gravida. Vestibulum quis ante eu velit interdum vulputate.
Vivamus sit amet mollis justo. Quisque sit amet molestie libero. Nam ut tempor dui, a commodo tortor. Quisque vehicula congue maximus. Proin dignissim ante nisl, eget ullamcorper lorem vestibulum sed. Vestibulum commodo porttitor vulputate. Sed augue ante, hendrerit et tincidunt maximus, pretium et tellus. Morbi et tortor eu nisl dignissim pulvinar. Morbi dignissim dictum metus vel lobortis. In sit amet tellus sit amet dui auctor tincidunt ac in nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id metus lacinia, cursus ex in, gravida nibh. Ut mollis mi at urna gravida, in sagittis sem dictum. Nullam pretium dolor mauris, eget lobortis libero euismod a. Maecenas aliquet dolor dolor, cursus malesuada erat ornare ac.
Pellentesque ultrices semper tortor non fermentum. Fusce pellentesque fermentum justo eu placerat. Donec tincidunt dolor id nunc vehicula mattis. Suspendisse fermentum libero vel est sollicitudin, non interdum urna placerat. Cras dignissim nibh id tincidunt pellentesque. Quisque ac cursus enim. Phasellus pretium varius aliquam. Mauris arcu enim, posuere sit amet est eu, vestibulum euismod sapien. Etiam sed velit consequat, dictum turpis eu, vehicula orci. Morbi tincidunt sit amet erat in mattis. Curabitur ac nisi sit amet ipsum ultrices tempus vel et est. Vivamus ornare dolor vel ligula ultrices tempor.
Nunc id ultrices sapien. In hac habitasse platea dictumst. Quisque tempus cursus tellus, quis ultricies neque commodo ut. Integer bibendum orci vitae metus fringilla, quis tristique dui iaculis. Vestibulum eu velit et leo facilisis rhoncus sit amet at tortor. Morbi dignissim ante ut neque lacinia dictum. In vel risus at ex lobortis laoreet et nec leo. Mauris rutrum orci sollicitudin ex rhoncus ultrices.
Nunc dapibus pulvinar ex sed sollicitudin. Donec nec luctus tortor. Phasellus porta, ipsum sit amet sagittis sagittis, lectus sem vestibulum enim, et placerat velit diam sit amet leo. Curabitur turpis mi, eleifend eu porttitor mattis, aliquam sed ipsum. Pellentesque gravida condimentum sem, id laoreet erat vulputate in. Nulla facilisi. Mauris in eros vel sapien accumsan viverra eget sed est. Ut arcu orci, accumsan faucibus ipsum ut, accumsan luctus eros. Proin eget dui aliquam, dictum elit in, malesuada odio. Sed non arcu molestie, dignissim odio ut, sagittis neque. Duis sit amet quam massa. Mauris tempor, eros a placerat ornare, odio dui dapibus orci, quis feugiat libero neque posuere quam. Sed gravida velit purus, ut laoreet tortor mollis sit amet. Aliquam rutrum non lorem nec interdum. Pellentesque ornare blandit mattis.
Aliquam non commodo felis. Maecenas scelerisque elementum arcu, at tincidunt elit fringilla et. Nam ut felis dapibus elit accumsan sollicitudin id at ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque tincidunt mi interdum dui porta, ut tristique nibh auctor. Vestibulum in aliquam quam. Ut suscipit fringilla tellus, et elementum ligula finibus id. Curabitur auctor tincidunt finibus.
Donec sit amet orci pharetra, tempor orci in, placerat felis. Cras aliquam augue a lacus molestie, efficitur ultrices odio porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend arcu quis eros ultricies lobortis. Curabitur dignissim mi id feugiat finibus. In eu sodales sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Sed nec auctor velit. Vivamus pellentesque eget risus eu luctus. Etiam ac odio vitae quam semper vulputate quis non nulla. Pellentesque eget luctus turpis, quis volutpat tellus. Sed commodo accumsan magna ut dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut congue, magna id sagittis cursus, neque risus ultricies libero, et posuere est est ac mi. Donec quam urna, lobortis nec nibh convallis, auctor vehicula augue. Vestibulum turpis massa, placerat ut felis sit amet, maximus malesuada turpis. Integer scelerisque nisl sagittis, tempor quam vitae, feugiat tellus.
Phasellus efficitur, risus eget suscipit rhoncus, enim enim tempor elit, id tempor nibh metus vel elit. Suspendisse mattis lacinia sollicitudin. In urna dolor, eleifend a cursus ac, varius a lectus. Phasellus vestibulum, libero id congue venenatis, risus leo fringilla odio, ac dapibus augue enim vestibulum mauris. Nulla sit amet dignissim sem. Sed convallis eros non neque laoreet mollis. Sed at ex ligula. Vivamus luctus, urna nec fringilla faucibus, nisl est accumsan quam, eget gravida nisl odio at sem. In lacinia, diam ut faucibus pellentesque, mi ligula elementum est, et porta mauris tellus sit amet eros.
Donec luctus quis dui vel ornare. Vestibulum feugiat enim et semper tempor. Nullam dictum pellentesque orci. Aenean eleifend dolor at condimentum tincidunt. Sed molestie felis vel ipsum ullamcorper vulputate. Donec vel urna ac mi consectetur imperdiet eget eu arcu. Curabitur elit ante, sollicitudin vel convallis sed, molestie id justo. Vivamus lacinia risus eu mi suscipit gravida. Ut vitae ex pulvinar, rhoncus erat non, efficitur purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec est velit, ultricies a lacinia sed, faucibus ut erat. Nullam ut mi tincidunt, porttitor lacus sed, euismod velit. Nunc scelerisque lacus a lectus eleifend, tempus mollis urna rutrum.
Nam eget lobortis nisl. Pellentesque sed venenatis elit. In auctor volutpat posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut cursus nunc augue, ac egestas tellus iaculis eu. Vivamus ultrices cursus mauris, ac bibendum eros accumsan eu. Aliquam id tincidunt purus. Sed sodales consectetur odio porttitor pulvinar. Donec sodales mattis sem, id elementum leo ornare at. Aenean blandit id magna a placerat.
Suspendisse quis tincidunt leo. Maecenas sapien massa, consequat at pharetra et, sodales vel velit. Ut convallis volutpat nibh id eleifend. Vestibulum molestie mauris ac ornare fringilla. Aliquam ipsum felis, fermentum eu lacinia nec, faucibus at nunc. Donec imperdiet, turpis non consectetur sodales, orci dolor ultricies magna, quis porttitor massa ligula ultrices magna. Vivamus auctor neque eros, nec dictum nulla vestibulum non. Pellentesque luctus, urna nec imperdiet maximus, nisi nibh suscipit ipsum, eget luctus leo ex quis lorem. Praesent in ex vitae urna laoreet imperdiet. Phasellus pulvinar ipsum vitae dui ultrices suscipit. Aenean est ipsum, ornare eget porta sit amet, tincidunt sed dui. Nam et urna porttitor, tempor magna ac, semper nisi. Vestibulum nisl purus, laoreet non ex a, ultricies finibus dolor.
Maecenas id sapien semper, luctus ante in, aliquet mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in odio magna. Aliquam pulvinar euismod ligula eu imperdiet. Integer condimentum nulla magna, feugiat ullamcorper ipsum dictum ac. Suspendisse id tempor neque, vitae blandit urna. Fusce eget tempus erat. Sed sit amet elit vitae nisl maximus dictum eget et nisl. In egestas at leo sed lacinia. Pellentesque at hendrerit neque, quis pharetra nunc. Donec dignissim erat in libero porttitor cursus.
Maecenas pellentesque tempus dapibus. Aenean sodales interdum dolor, sed iaculis erat luctus ac. Morbi interdum feugiat nisi, sed eleifend quam vehicula a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed malesuada arcu sed lectus placerat, eget blandit purus luctus. Cras tristique ligula neque. Vestibulum finibus nunc ac ex ultricies, eget aliquam leo iaculis. Duis vestibulum imperdiet eros in vulputate. In ex odio, dictum aliquet dui at, elementum ultricies justo. Ut pulvinar condimentum dui, tincidunt faucibus nunc tempor at.
Quisque eleifend diam a lorem euismod, vitae dictum eros euismod. Pellentesque sed vehicula ante, ut laoreet libero. Suspendisse eget massa sollicitudin tortor viverra ultrices id vitae lorem. Donec sagittis nunc ut hendrerit lacinia. Donec elementum tellus efficitur felis cursus mollis. Etiam quis erat massa. Nullam eu dui felis. Suspendisse pulvinar leo augue, vel fermentum ex feugiat sed.
Morbi sagittis fermentum massa, vitae dictum orci. Aliquam fringilla, elit at condimentum congue, lacus libero porttitor urna, vel efficitur ante ante pulvinar risus. Aenean non enim nulla. Nullam eget elit ut lorem tincidunt malesuada. Curabitur dapibus eros molestie felis commodo tristique. Quisque non mi in nunc ultrices malesuada at ut dolor. Nullam metus mauris, aliquam id accumsan ac, efficitur ut felis. Ut purus lacus, consectetur quis dolor a, sagittis luctus est. Praesent tristique interdum sapien ut scelerisque. Proin nisi sem, luctus eu massa vitae, tincidunt tristique urna. Phasellus a nibh ut magna pretium convallis eget non justo. Ut id arcu sit amet nisi sollicitudin convallis sed sed dolor. Proin fermentum non ex et volutpat. Donec vitae erat rutrum, laoreet dui at, egestas arcu.
Etiam lobortis sodales mollis. Maecenas nec neque malesuada est ullamcorper venenatis eget ut lacus. Suspendisse maximus pretium tincidunt. Etiam a auctor mi. Morbi sollicitudin metus nec dolor porttitor, ac placerat arcu tempus. Sed turpis mi, cursus sit amet egestas ac, consequat sit amet nulla. Suspendisse dapibus malesuada blandit. Donec aliquet ligula urna, vel venenatis nibh facilisis sed.
Fusce volutpat ex et leo sagittis, eu posuere sapien scelerisque. Proin eget nisi sed metus accumsan suscipit in id leo. Quisque ac rutrum velit. Nulla id convallis libero. Duis euismod feugiat sodales. Aenean placerat, est nec convallis luctus, massa leo finibus nunc, in viverra dolor nunc at arcu. Cras lobortis rutrum vestibulum. Integer pellentesque placerat sapien non mattis. Maecenas in velit mi. Cras finibus in felis nec ullamcorper. Aenean ut est et felis elementum efficitur at vitae lacus. Maecenas aliquam dapibus massa, et semper lacus vulputate et.
In imperdiet convallis tellus ut semper. Quisque placerat eros id condimentum faucibus. Nulla et faucibus elit. Nunc tincidunt risus eget velit cursus semper. Etiam viverra nibh eget turpis gravida ultrices. Cras eget iaculis tortor, vehicula consequat est. Pellentesque blandit nisl id neque ultrices, in tempus quam facilisis.
Aenean feugiat felis sed ligula tincidunt suscipit a elementum dui. Phasellus laoreet lorem sit amet nisi varius, sit amet tincidunt augue dictum. Ut dictum ipsum finibus, pellentesque odio vel, accumsan odio. Proin porttitor risus lectus, commodo tristique diam commodo et. Integer ornare vel dui sit amet placerat. Quisque tellus purus, pharetra eget mi sit amet, faucibus imperdiet dui. Aliquam malesuada sapien eu enim laoreet, nec blandit lacus pulvinar. Ut in diam condimentum, iaculis mauris eget, venenatis ipsum. Donec finibus diam arcu, sit amet laoreet leo consectetur in. Duis erat turpis, consequat sed ornare sit amet, feugiat ac purus. Aliquam erat volutpat. Duis elit lacus, commodo id leo sed, congue consequat lectus.
Mauris facilisis et ligula id faucibus. Nunc non lobortis metus, tristique finibus tortor. Fusce interdum interdum felis elementum dignissim. Vivamus diam nisi, dictum dapibus consectetur ut, laoreet vel est. Vivamus posuere consectetur dui, in vehicula felis interdum nec. Pellentesque tincidunt magna turpis, a vehicula ante pellentesque sit amet. Nullam id feugiat nisl, eu blandit felis.
Suspendisse consequat enim at enim sagittis, sed feugiat tellus iaculis. Vestibulum volutpat dignissim porttitor. Vivamus at ante nec augue tempus laoreet. In volutpat risus at ipsum gravida tempus. Sed et vulputate dui. Praesent eget tempus mauris. Vivamus congue tellus at lacus sollicitudin luctus vitae quis est. Vivamus interdum nisi ut neque mattis, a suscipit lacus tempor. Vestibulum tellus orci, scelerisque sodales metus eu, cursus aliquam elit. Nunc porta fringilla turpis, ac varius arcu blandit ac. Nulla ornare ligula non tortor hendrerit dictum.
Aliquam lobortis, lectus sit amet blandit pulvinar, risus quam condimentum diam, convallis tristique lacus est non mi. Sed eu felis purus. Sed velit justo, posuere eget porttitor eget, vehicula vel neque. Suspendisse malesuada, nunc nec auctor cursus, lorem dolor rutrum dolor, ut scelerisque nibh nisi sed justo. Nullam ac orci non nisl varius porttitor. Vestibulum non lorem at mauris malesuada interdum vel quis dolor. Pellentesque porttitor erat vel sem venenatis feugiat eget vitae nisi. Sed tempus urna vitae egestas consequat. Curabitur vitae porttitor erat. In augue sem, sodales eget velit ut, pulvinar consectetur sem. Mauris rutrum erat vitae placerat egestas. Ut est odio, semper ut augue et, luctus sagittis risus. Curabitur ex est, ultrices nec neque consequat, dapibus malesuada magna. Aliquam erat volutpat. Vestibulum ipsum turpis, ultricies vitae tortor nec, malesuada sagittis orci.
Cras consequat mi odio. Proin vestibulum vestibulum efficitur. Ut et neque sapien. In sit amet ipsum in sapien molestie auctor ut eu diam. Aenean ornare erat ut felis faucibus, quis laoreet dui pretium. Praesent porttitor imperdiet mauris, eget consequat lectus lacinia a. Nam maximus eleifend velit, ut ultrices orci finibus nec. Donec id sapien ut erat fermentum vulputate in vel risus. Fusce neque ante, semper at euismod in, mollis sit amet neque. Fusce gravida pretium sapien, a eleifend nisi euismod sit amet. Vestibulum vulputate dapibus dolor non tempor. Proin eros velit, ornare vel ultrices non, faucibus at diam. Praesent pretium tempor arcu. Cras semper pellentesque commodo. Cras nec urna in tortor molestie varius in vitae odio. Ut finibus lacus ut est tristique suscipit.
Donec interdum magna urna, vel posuere nisi pellentesque sed. Nam quis mi sit amet quam laoreet eleifend. Aenean quis tellus non nulla auctor fringilla. Nunc felis arcu, volutpat quis porta vel, molestie at massa. Morbi vitae enim urna. Etiam euismod facilisis leo, vel dignissim nisi tempus sit amet. Aliquam aliquam cursus nibh, faucibus pharetra quam.
Maecenas luctus, velit ac malesuada egestas, leo nunc elementum neque, at porttitor ligula augue in odio. Sed tempus egestas dui, vitae varius metus volutpat id. Aliquam ornare, lacus posuere sollicitudin vehicula, felis diam consequat arcu, a laoreet nulla erat non nisl. Proin cursus ut tellus at condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin finibus enim et faucibus dignissim. Donec non ex vulputate, interdum orci ut, dignissim urna. Nulla rhoncus sollicitudin congue. Mauris semper arcu a massa malesuada scelerisque. Quisque ligula metus, condimentum nec interdum eget, efficitur in nunc.
Phasellus vel luctus dui, quis ornare orci. Etiam sollicitudin, neque at venenatis luctus, felis ante accumsan velit, nec molestie erat risus vel odio. In interdum maximus enim lobortis laoreet. Vivamus nisi odio, suscipit sit amet dui vel, consectetur mattis velit. Ut scelerisque sem eget tortor hendrerit, non bibendum enim rhoncus. Aenean id sem feugiat, eleifend leo nec, volutpat diam. Phasellus eget semper elit. Suspendisse vitae magna a ligula hendrerit malesuada. In magna velit, luctus at eros vitae, dignissim vehicula neque. In quis ex vel risus imperdiet feugiat eu vestibulum lorem. Nullam porttitor enim sed leo ornare, ac posuere tortor molestie. Fusce accumsan rutrum dictum. Aenean in erat neque. Maecenas rhoncus enim id nisl posuere, vel tristique neque vehicula. In efficitur, mauris non semper semper, justo mauris gravida ligula, ac bibendum sem lacus et diam. Nullam gravida sit amet diam et tristique.
Nulla urna justo, condimentum ut rhoncus vel, imperdiet sed mi. Aliquam venenatis, neque et facilisis placerat, dui felis lobortis diam, a pulvinar nibh velit fermentum tortor. Quisque nec commodo nibh, vitae varius elit. Cras sem dolor, fermentum ac dignissim eget, mattis in libero. Vivamus condimentum, diam et consectetur blandit, elit elit faucibus justo, condimentum rhoncus dui mi a ipsum. Aenean sit amet tellus leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eu sodales ipsum. Etiam blandit nibh sit amet nunc interdum viverra. In hac habitasse platea dictumst. Sed eget ligula nec metus vestibulum elementum. Nulla in dolor eget risus laoreet fermentum. Aenean vitae accumsan erat, ac fermentum libero. Fusce efficitur tincidunt nibh, vel fringilla orci consectetur vitae. Ut eget porttitor mi.
</div>
</div>
</div>
I am working out of "HTML5 and CSS5 Illustrated Complete" Second Edition by Sasha Vodnik.
I did the initial Unit D example to a Tee, however logo styling and the positioning aren't applying correctly or at all.
/*
Lakeland Reeds Bed and Breakfast style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
*/
/* reset styles */
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
/* body and page container */
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 6.2em;
}
/* headings */
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
}
h1 {
padding: 0.4em;
color: white;
text-align: center;
}
h2 {
padding: 0.4em 0.6em;
}
p.logo {
padding: 0.2em;
border: 2px solid beige;
color: goldenrod;
position: absolute;
top: 2em;
left: 2em;
}
/* main content */
article {
width: 70%;
float: right;
top: 6.2em;
}
article p {
padding: 0 1em 1em;
}
/* sidebar */
aside {
width: 30%;
padding: 1em 0;
background-color: goldenrod;
}
aside p {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 0.4em 0;
margin: 0 0.6em;
}
/* footer section */
footer {
padding: 0.6em;
color: white;
background-color: darkgreen;
text-align: center;
clear: right;
}
footer p {
margin: 0.4em;
}
footer p.accent {
color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lakeland Reeds Bed & Breakfast - Test Page</title>
<!--
Lakeland Reeds Bed & Breakfast test page
Filename: longpage.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Lakeland Reeds<br>Bed & Breakfast</h1>
<p class=”logo”>ℒℛ</p>
</header>
<article>
<h2>Test Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra ullamcorper ultrices. Morbi egestas elementum ligula, eget congue elit pulvinar placerat. Curabitur dictum, velit et iaculis mattis, felis ante sodales lectus, consectetur convallis enim urna ut libero. Suspendisse placerat dignissim quam, et consequat ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id dolor ut nulla sodales lobortis in ac dolor. Maecenas bibendum eleifend lacus, maximus dignissim mi fermentum quis. Suspendisse sagittis tincidunt pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nunc velit, molestie nec metus vel, dictum rutrum est. Aliquam volutpat ex massa, tempus eleifend nisl eleifend sed. Fusce egestas cursus felis in fermentum. Mauris facilisis feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec feugiat erat nec sapien tincidunt congue. Etiam urna libero, aliquet ut neque a, vulputate fermentum velit.</p>
<p>Nullam vel enim luctus, imperdiet neque et, aliquet turpis. Morbi a rhoncus metus. Nulla facilisi. Nunc tincidunt vel eros id laoreet. Fusce id nibh rhoncus, porta nulla nec, euismod ligula. Phasellus bibendum mi lectus. Donec a egestas mauris.</p>
<p>Curabitur et sapien consequat, varius diam in, viverra massa. Aliquam erat volutpat. Vestibulum facilisis urna elit, vel malesuada mauris pulvinar vitae. In ultrices tortor nisl, et faucibus ex dignissim non. Vivamus eget risus tempus, rutrum ipsum sit amet, gravida mi. Vestibulum et lobortis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec ultricies risus quis metus cursus, in feugiat quam ultricies. Nullam sit amet enim in tellus molestie sodales et et leo. Duis pulvinar venenatis consequat. Aenean facilisis arcu libero, a auctor odio feugiat at. Donec sagittis sollicitudin maximus. Maecenas elementum, lectus vitae fringilla tempus, mi nibh faucibus sapien, in fermentum dui massa vel dui. Nullam sed ligula scelerisque, viverra quam sit amet, bibendum libero. Duis at fermentum dolor. Phasellus non dictum nulla. Morbi a semper nibh. Vivamus ullamcorper purus ac nisi consectetur bibendum. Nulla varius sodales tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur imperdiet neque nec purus pellentesque, vitae convallis libero accumsan. Praesent semper lacus in tellus eleifend, et tristique lorem egestas.</p>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
<p>Aenean eu ipsum eros. Aenean faucibus sollicitudin mi, vel ullamcorper nisi porttitor a. Suspendisse potenti. Mauris facilisis eu neque id dignissim. Pellentesque nunc enim, feugiat ac orci vel, bibendum tincidunt sem. Vivamus placerat finibus ultricies. Curabitur ac fringilla diam.</p>
<p>Integer mi nibh, accumsan fringilla consectetur eu, scelerisque nec ipsum. Nullam in bibendum risus. Integer fringilla enim ac diam sollicitudin, eget elementum odio accumsan. Aliquam efficitur congue ante volutpat lacinia. Nam et ante eu arcu bibendum mollis. Morbi elementum mauris tristique ullamcorper dictum. Vestibulum ultrices, nibh vel tristique lacinia, massa orci feugiat nisi, nec mattis libero sem sit amet sem. Curabitur in leo quis sapien porta blandit sit amet sed felis. Proin et diam nisi. Sed quis sapien quis lectus molestie imperdiet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam euismod arcu molestie, congue felis non, placerat lacus. Proin semper nisi non posuere porttitor. Donec turpis ipsum, tincidunt in pellentesque in, accumsan at ipsum. Fusce rhoncus auctor sem sed fringilla. Sed sodales lorem rhoncus nunc blandit vestibulum. Vestibulum convallis egestas maximus. Donec porta velit ipsum, porttitor condimentum ipsum cursus nec. In hac habitasse platea dictumst. In volutpat gravida iaculis. In porttitor mattis eros, et feugiat lectus pulvinar ut. Vestibulum vel libero at justo posuere tristique et in mauris. Duis condimentum lacinia luctus. Mauris ut cursus lacus, pellentesque efficitur metus. Nunc gravida, ex cursus commodo hendrerit, arcu metus scelerisque ligula, eu lacinia felis massa blandit diam. Pellentesque ac consequat est.</p>
<p>Cras volutpat vitae ipsum non molestie. Aliquam id risus quam. Aenean malesuada dui sed est suscipit varius. Morbi maximus diam luctus tempus mattis. In sit amet pulvinar eros, non imperdiet neque. Nullam suscipit tortor risus, pellentesque molestie tortor pharetra vel. Proin quis malesuada lacus. Sed pharetra scelerisque leo. Praesent accumsan at ipsum eu rutrum. Nam fermentum velit quis arcu ullamcorper maximus. Pellentesque blandit vehicula libero, eget sagittis est imperdiet et. Curabitur nisl eros, consequat vel tellus vehicula, pulvinar porta tellus.</p>
<p>Integer porttitor placerat fringilla. Proin eleifend in nulla in commodo. Etiam a dictum dui. Aliquam faucibus massa in lacinia fermentum. Nunc placerat condimentum tortor, sit amet varius mauris pretium quis. In non arcu dolor. Praesent venenatis sed sem eleifend consectetur. In ex mi, vestibulum non interdum et, luctus vel sem. Duis eu diam a tellus bibendum elementum.</p>
<p>Praesent condimentum sem eget magna consequat, eget gravida libero elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a posuere metus. Nullam tellus justo, venenatis sit amet arcu eu, venenatis vulputate neque. Etiam vestibulum orci quis mauris lacinia, et blandit arcu imperdiet. Vestibulum aliquam scelerisque justo, tincidunt congue orci convallis a. Ut facilisis arcu non orci interdum, sit amet facilisis mi consequat. Cras sed venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pharetra a sapien non ultrices. Donec finibus nulla quis purus ullamcorper, sit amet accumsan sem blandit. Ut tempus justo quis nulla viverra iaculis. In placerat turpis sit amet quam tincidunt, eget lobortis dui imperdiet. Fusce a malesuada ligula, et dapibus dolor. Maecenas euismod dui nec mauris fermentum fringilla.</p>
<p>Mauris dui lectus, luctus et auctor mollis, luctus fringilla dui. Duis pharetra massa id arcu imperdiet mollis. Nam ornare efficitur gravida. Sed ultrices nibh nisi, ut maximus purus aliquam et. In dignissim ut tortor nec tincidunt. Sed tellus arcu, posuere vitae nulla eu, pellentesque feugiat mi. Phasellus lectus enim, tincidunt nec dui eu, congue egestas augue.</p>
<p>Praesent eget purus suscipit, placerat purus ac, lacinia metus. Curabitur placerat facilisis augue, non sagittis ipsum dictum et. Mauris luctus et risus vel laoreet. Maecenas tempor ipsum a massa gravida auctor. Nunc nec massa sed urna aliquet posuere ut nec augue. Integer lacus nisi, ultricies at neque id, vestibulum suscipit lorem. Vestibulum efficitur arcu vitae magna bibendum gravida. Ut purus lorem, vestibulum quis ipsum eu, efficitur suscipit ligula. Sed nec urna libero. Pellentesque ullamcorper turpis non ullamcorper pulvinar. Nullam vestibulum, dui a congue venenatis, nibh sem tempus urna, non dapibus ligula orci et diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis lobortis est, eget convallis est cursus at. Ut id ullamcorper dolor.</p>
<p>Sed nisl lorem, sodales sed pretium et, consectetur sollicitudin mi. Etiam sed urna tempor, fermentum sapien ut, euismod nisi. Aliquam erat volutpat. Phasellus at ipsum ut odio convallis molestie. Integer ultricies ornare leo ac tempus. Mauris accumsan bibendum dapibus. Integer quis nunc vitae mauris eleifend dictum ut non velit. Aliquam non lacus ut tellus fringilla auctor. Donec et pellentesque dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum semper maximus lacus, a hendrerit erat. Quisque felis magna, tincidunt eu enim non, consequat pharetra nunc. Pellentesque sodales nulla eu facilisis venenatis. Vestibulum quis tortor quis sapien tincidunt aliquam nec mattis enim.</p>
<p>Ut eget sagittis erat. Fusce euismod volutpat diam, non semper lorem congue accumsan. Proin malesuada erat id sodales scelerisque. Aliquam non quam ut magna rutrum commodo. Nulla facilisi. Aliquam erat volutpat. Aliquam erat volutpat. Integer a sem eu metus consectetur malesuada rutrum non magna.</p>
</article>
<aside>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
</aside>
<footer>
<p class="accent">Philip Blaine, Proprietor</p>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
</div>
</body>
</html>
A white space appears above where the header should go, which should remain fixed at the top and follow as you scroll without overlap at the beginning. Then the "LR" is not applying any ruling at all.
Add top: 0; to your header in CSS. It should look like this:
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
top: 0;
}
Now you can see that the container has slipped a little. Therefore you could not give the container top: 6.2em; but approx. top: 7.5em;. At the end it should look like this:
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 6.2em;
}
Here is the full code:
/*
Lakeland Reeds Bed and Breakfast style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
*/
/* reset styles */
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
/* body and page container */
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 7.5em;
}
/* headings */
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
top: 0;
}
h1 {
padding: 0.4em;
color: white;
text-align: center;
}
h2 {
padding: 0.4em 0.6em;
}
p.logo {
padding: 0.2em;
border: 2px solid beige;
color: goldenrod;
position: absolute;
top: 2em;
left: 2em;
}
/* main content */
article {
width: 70%;
float: right;
top: 6.2em;
}
article p {
padding: 0 1em 1em;
}
/* sidebar */
aside {
width: 30%;
padding: 1em 0;
background-color: goldenrod;
}
aside p {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 0.4em 0;
margin: 0 0.6em;
}
/* footer section */
footer {
padding: 0.6em;
color: white;
background-color: darkgreen;
text-align: center;
clear: right;
}
footer p {
margin: 0.4em;
}
footer p.accent {
color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lakeland Reeds Bed & Breakfast - Test Page</title>
<!--
Lakeland Reeds Bed & Breakfast test page
Filename: longpage.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Lakeland Reeds<br>Bed & Breakfast</h1>
<p class=”logo”>ℒℛ</p>
</header>
<article>
<h2>Test Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra ullamcorper ultrices. Morbi egestas elementum ligula, eget congue elit pulvinar placerat. Curabitur dictum, velit et iaculis mattis, felis ante sodales lectus, consectetur convallis enim urna ut libero. Suspendisse placerat dignissim quam, et consequat ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id dolor ut nulla sodales lobortis in ac dolor. Maecenas bibendum eleifend lacus, maximus dignissim mi fermentum quis. Suspendisse sagittis tincidunt pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nunc velit, molestie nec metus vel, dictum rutrum est. Aliquam volutpat ex massa, tempus eleifend nisl eleifend sed. Fusce egestas cursus felis in fermentum. Mauris facilisis feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec feugiat erat nec sapien tincidunt congue. Etiam urna libero, aliquet ut neque a, vulputate fermentum velit.</p>
<p>Nullam vel enim luctus, imperdiet neque et, aliquet turpis. Morbi a rhoncus metus. Nulla facilisi. Nunc tincidunt vel eros id laoreet. Fusce id nibh rhoncus, porta nulla nec, euismod ligula. Phasellus bibendum mi lectus. Donec a egestas mauris.</p>
<p>Curabitur et sapien consequat, varius diam in, viverra massa. Aliquam erat volutpat. Vestibulum facilisis urna elit, vel malesuada mauris pulvinar vitae. In ultrices tortor nisl, et faucibus ex dignissim non. Vivamus eget risus tempus, rutrum ipsum sit amet, gravida mi. Vestibulum et lobortis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec ultricies risus quis metus cursus, in feugiat quam ultricies. Nullam sit amet enim in tellus molestie sodales et et leo. Duis pulvinar venenatis consequat. Aenean facilisis arcu libero, a auctor odio feugiat at. Donec sagittis sollicitudin maximus. Maecenas elementum, lectus vitae fringilla tempus, mi nibh faucibus sapien, in fermentum dui massa vel dui. Nullam sed ligula scelerisque, viverra quam sit amet, bibendum libero. Duis at fermentum dolor. Phasellus non dictum nulla. Morbi a semper nibh. Vivamus ullamcorper purus ac nisi consectetur bibendum. Nulla varius sodales tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur imperdiet neque nec purus pellentesque, vitae convallis libero accumsan. Praesent semper lacus in tellus eleifend, et tristique lorem egestas.</p>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
<p>Aenean eu ipsum eros. Aenean faucibus sollicitudin mi, vel ullamcorper nisi porttitor a. Suspendisse potenti. Mauris facilisis eu neque id dignissim. Pellentesque nunc enim, feugiat ac orci vel, bibendum tincidunt sem. Vivamus placerat finibus ultricies. Curabitur ac fringilla diam.</p>
<p>Integer mi nibh, accumsan fringilla consectetur eu, scelerisque nec ipsum. Nullam in bibendum risus. Integer fringilla enim ac diam sollicitudin, eget elementum odio accumsan. Aliquam efficitur congue ante volutpat lacinia. Nam et ante eu arcu bibendum mollis. Morbi elementum mauris tristique ullamcorper dictum. Vestibulum ultrices, nibh vel tristique lacinia, massa orci feugiat nisi, nec mattis libero sem sit amet sem. Curabitur in leo quis sapien porta blandit sit amet sed felis. Proin et diam nisi. Sed quis sapien quis lectus molestie imperdiet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam euismod arcu molestie, congue felis non, placerat lacus. Proin semper nisi non posuere porttitor. Donec turpis ipsum, tincidunt in pellentesque in, accumsan at ipsum. Fusce rhoncus auctor sem sed fringilla. Sed sodales lorem rhoncus nunc blandit vestibulum. Vestibulum convallis egestas maximus. Donec porta velit ipsum, porttitor condimentum ipsum cursus nec. In hac habitasse platea dictumst. In volutpat gravida iaculis. In porttitor mattis eros, et feugiat lectus pulvinar ut. Vestibulum vel libero at justo posuere tristique et in mauris. Duis condimentum lacinia luctus. Mauris ut cursus lacus, pellentesque efficitur metus. Nunc gravida, ex cursus commodo hendrerit, arcu metus scelerisque ligula, eu lacinia felis massa blandit diam. Pellentesque ac consequat est.</p>
<p>Cras volutpat vitae ipsum non molestie. Aliquam id risus quam. Aenean malesuada dui sed est suscipit varius. Morbi maximus diam luctus tempus mattis. In sit amet pulvinar eros, non imperdiet neque. Nullam suscipit tortor risus, pellentesque molestie tortor pharetra vel. Proin quis malesuada lacus. Sed pharetra scelerisque leo. Praesent accumsan at ipsum eu rutrum. Nam fermentum velit quis arcu ullamcorper maximus. Pellentesque blandit vehicula libero, eget sagittis est imperdiet et. Curabitur nisl eros, consequat vel tellus vehicula, pulvinar porta tellus.</p>
<p>Integer porttitor placerat fringilla. Proin eleifend in nulla in commodo. Etiam a dictum dui. Aliquam faucibus massa in lacinia fermentum. Nunc placerat condimentum tortor, sit amet varius mauris pretium quis. In non arcu dolor. Praesent venenatis sed sem eleifend consectetur. In ex mi, vestibulum non interdum et, luctus vel sem. Duis eu diam a tellus bibendum elementum.</p>
<p>Praesent condimentum sem eget magna consequat, eget gravida libero elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a posuere metus. Nullam tellus justo, venenatis sit amet arcu eu, venenatis vulputate neque. Etiam vestibulum orci quis mauris lacinia, et blandit arcu imperdiet. Vestibulum aliquam scelerisque justo, tincidunt congue orci convallis a. Ut facilisis arcu non orci interdum, sit amet facilisis mi consequat. Cras sed venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pharetra a sapien non ultrices. Donec finibus nulla quis purus ullamcorper, sit amet accumsan sem blandit. Ut tempus justo quis nulla viverra iaculis. In placerat turpis sit amet quam tincidunt, eget lobortis dui imperdiet. Fusce a malesuada ligula, et dapibus dolor. Maecenas euismod dui nec mauris fermentum fringilla.</p>
<p>Mauris dui lectus, luctus et auctor mollis, luctus fringilla dui. Duis pharetra massa id arcu imperdiet mollis. Nam ornare efficitur gravida. Sed ultrices nibh nisi, ut maximus purus aliquam et. In dignissim ut tortor nec tincidunt. Sed tellus arcu, posuere vitae nulla eu, pellentesque feugiat mi. Phasellus lectus enim, tincidunt nec dui eu, congue egestas augue.</p>
<p>Praesent eget purus suscipit, placerat purus ac, lacinia metus. Curabitur placerat facilisis augue, non sagittis ipsum dictum et. Mauris luctus et risus vel laoreet. Maecenas tempor ipsum a massa gravida auctor. Nunc nec massa sed urna aliquet posuere ut nec augue. Integer lacus nisi, ultricies at neque id, vestibulum suscipit lorem. Vestibulum efficitur arcu vitae magna bibendum gravida. Ut purus lorem, vestibulum quis ipsum eu, efficitur suscipit ligula. Sed nec urna libero. Pellentesque ullamcorper turpis non ullamcorper pulvinar. Nullam vestibulum, dui a congue venenatis, nibh sem tempus urna, non dapibus ligula orci et diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis lobortis est, eget convallis est cursus at. Ut id ullamcorper dolor.</p>
<p>Sed nisl lorem, sodales sed pretium et, consectetur sollicitudin mi. Etiam sed urna tempor, fermentum sapien ut, euismod nisi. Aliquam erat volutpat. Phasellus at ipsum ut odio convallis molestie. Integer ultricies ornare leo ac tempus. Mauris accumsan bibendum dapibus. Integer quis nunc vitae mauris eleifend dictum ut non velit. Aliquam non lacus ut tellus fringilla auctor. Donec et pellentesque dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum semper maximus lacus, a hendrerit erat. Quisque felis magna, tincidunt eu enim non, consequat pharetra nunc. Pellentesque sodales nulla eu facilisis venenatis. Vestibulum quis tortor quis sapien tincidunt aliquam nec mattis enim.</p>
<p>Ut eget sagittis erat. Fusce euismod volutpat diam, non semper lorem congue accumsan. Proin malesuada erat id sodales scelerisque. Aliquam non quam ut magna rutrum commodo. Nulla facilisi. Aliquam erat volutpat. Aliquam erat volutpat. Integer a sem eu metus consectetur malesuada rutrum non magna.</p>
</article>
<aside>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
</aside>
<footer>
<p class="accent">Philip Blaine, Proprietor</p>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
</div>
</body>
</html>
I need to make a navbar in the left of the page just like this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed2
But i need also to make that navbar hiding when reaching footer and re-appear when scrolling up.
Is it possible?
Thank in advance
This can be done using CSS and Jquery
Ill provide you and example here to see how you can achieve this.
$(document).ready(function() {
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
if (window_top + div_height > footer_top) $('#sticky').removeClass('stick');
else if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
});
#sticky {
padding: 0.5ex;
width: 200px;
height: 300px;
background-color: #eee;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
float: left;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10;
border-radius: 0 0 0.5em 0.5em;
}
#sticky a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
#sticky a:hover {
color: #064579;
}
.content-holder {
margin-left: 225px;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
#footer {
width: 100%;
height: 600px;
background: #ccc;
z-index: 999999
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainsection">
<div class="sidenav" id="sticky">
About Services Clients Contact
</div>
<div id="sticky-anchor"></div>
<div class="content-holder">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar. Turpis massa tincidunt dui ut ornare lectus sit amet est. Semper auctor neque vitae tempus quam pellentesque nec nam. Ut faucibus pulvinar elementum integer enim neque volutpat. Nec dui nunc mattis enim ut. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Proin sed libero enim sed faucibus turpis. Fermentum posuere urna nec tincidunt. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Id aliquet lectus proin nibh nisl. Venenatis urna cursus eget nunc scelerisque viverra mauris. Vitae auctor eu augue ut lectus. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Mauris sit amet massa vitae tortor condimentum lacinia quis. Mauris rhoncus aenean vel elit scelerisque. Varius morbi enim nunc faucibus a pellentesque sit. Egestas integer eget aliquet nibh praesent tristique.</p>
<p>Sit amet porttitor eget dolor morbi non arcu risus quis. Id diam vel quam elementum pulvinar etiam. Id porta nibh venenatis cras sed felis eget velit. Auctor elit sed vulputate mi sit amet mauris commodo quis. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Ultricies integer quis auctor elit sed vulputate. Netus et malesuada fames ac turpis egestas maecenas pharetra. Molestie at elementum eu facilisis sed odio morbi. Mi bibendum neque egestas congue quisque egestas. Netus et malesuada fames ac turpis egestas. Convallis aenean et tortor at risus viverra adipiscing at. Elit at imperdiet dui accumsan sit amet nulla facilisi.</p>
<p>Quam pellentesque nec nam aliquam sem. Nunc sed augue lacus viverra vitae. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Vitae justo eget magna fermentum iaculis eu. Eu augue ut lectus arcu bibendum. Consectetur adipiscing elit ut aliquam purus. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Donec et odio pellentesque diam volutpat commodo. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Turpis egestas pretium aenean pharetra magna ac placerat. Habitasse platea dictumst quisque sagittis. Est velit egestas dui id ornare arcu odio ut sem. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Integer quis auctor elit sed vulputate mi. A scelerisque purus semper eget duis. Eget sit amet tellus cras adipiscing enim. Cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Urna nunc id cursus metus aliquam eleifend mi. Id leo in vitae turpis massa. Nibh tellus molestie nunc non blandit massa enim nec dui.</p>
<p>Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Non tellus orci ac auctor augue mauris augue neque gravida. Nisl nunc mi ipsum faucibus vitae aliquet nec. Consectetur adipiscing elit pellentesque habitant morbi tristique. Nisi est sit amet facilisis magna etiam. Odio facilisis mauris sit amet massa vitae tortor. Amet est placerat in egestas erat imperdiet. Ut eu sem integer vitae justo eget magna fermentum. Ac felis donec et odio pellentesque diam volutpat commodo.</p>
<p>Eleifend mi in nulla posuere sollicitudin aliquam ultrices. Mauris commodo quis imperdiet massa. Nunc id cursus metus aliquam eleifend mi in nulla. Nisi est sit amet facilisis magna etiam tempor orci eu. Vitae ultricies leo integer malesuada nunc vel risus. Lobortis feugiat vivamus at augue eget arcu. Risus at ultrices mi tempus. In hac habitasse platea dictumst vestibulum rhoncus. Cursus euismod quis viverra nibh cras pulvinar mattis. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Odio eu feugiat pretium nibh ipsum consequat. Amet tellus cras adipiscing enim. Ornare arcu odio ut sem nulla pharetra diam.</p>
<p>Facilisis gravida neque convallis a cras semper auctor. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Et molestie ac feugiat sed lectus vestibulum mattis. Eget mauris pharetra et ultrices neque ornare aenean. Dolor morbi non arcu risus quis varius. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Erat nam at lectus urna. Lorem mollis aliquam ut porttitor leo a diam. Congue quisque egestas diam in. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
<p>Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Netus et malesuada fames ac turpis egestas maecenas. Tortor id aliquet lectus proin. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Scelerisque fermentum dui faucibus in. Nisi est sit amet facilisis magna etiam. Scelerisque eleifend donec pretium vulputate. Enim nunc faucibus a pellentesque sit amet porttitor eget. Velit euismod in pellentesque massa placerat duis ultricies. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Et ultrices neque ornare aenean euismod elementum. Orci porta non pulvinar neque.</p>
<p>Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Praesent semper feugiat nibh sed pulvinar. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Aliquet risus feugiat in ante metus. Maecenas accumsan lacus vel facilisis volutpat est. Faucibus ornare suspendisse sed nisi lacus sed viverra. Sed vulputate odio ut enim. Consectetur adipiscing elit ut aliquam purus.</p>
<p>Nam libero justo laoreet sit amet cursus sit amet dictum. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Mi tempus imperdiet nulla malesuada. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Egestas diam in arcu cursus euismod quis viverra nibh cras. Nisi quis eleifend quam adipiscing vitae proin. Est sit amet facilisis magna etiam tempor. Enim sed faucibus turpis in eu mi bibendum neque egestas.</p>
<p>Gravida dictum fusce ut placerat orci nulla pellentesque. Nulla malesuada pellentesque elit eget. Convallis tellus id interdum velit. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Molestie at elementum eu facilisis. Diam phasellus vestibulum lorem sed risus ultricies tristique. Nunc sed velit dignissim sodales. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Id aliquet risus feugiat in ante. Sapien pellentesque habitant morbi tristique senectus et netus et. Amet volutpat consequat mauris nunc congue nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Purus gravida quis blandit turpis cursus in hac habitasse platea. Nulla aliquet porttitor lacus luctus accumsan tortor. Ut tristique et egestas quis ipsum suspendisse ultrices gravida.</p>
</div>
<div id="footer">
<h1>The footer element</h1>
</div>
</div>
I made a sticky navbar and I'm trying to center the menu and for some reason, I can't at all, it's driving me nuts. I can't figure out why and I have tried a lot of answers, none work.
HTML code here:
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Titanic</title>
<link rel="stylesheet" type="text/css" href="indexC.css">
</head>
<body>
<nav class="navbar">
<ul class="menu-list">
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
</ul>
</nav>
</body>
</html>
CSS code here
body{
background-image: url("");
}
.navbar{
text-align: center;
background-color: rgba(0,0,0,0.5);
position: sticky;
position: -webkit-sticky;
top: 0;
}
.menu-list{
text-decoration: none;
list-style-type: none;
}
.menu-list li {
display: inline-block;
}
h1{
color: white;
padding-top: 50px;
}
You can use this code
body{
background-image: url("");
margin: 0;
padding: 0;
}
.navbar{
text-align: center;
background-color: #777;
position: sticky;
position: -webkit-sticky;
top: 0;
padding: 15px;
}
.menu-list{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-list li {
display: inline-block;
}
.menu-list li a {
margin: 0;
padding: 0 30px;
text-decoration: none;
color: #ffffff;
font-size: 20px;
text-align: center;
}
.main p {
margin: 0;
padding: 30px;
color: #333333;
font-size: 20px;
font-weight: 500;
}
<nav class="navbar">
<ul class="menu-list">
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
</ul>
</nav>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tempus diam id varius. Curabitur quis placerat quam, sit amet consectetur odio. Aliquam mollis ac arcu sed viverra. Fusce et augue felis. Phasellus consequat ipsum sem, sit amet volutpat tortor ornare sit amet. Aliquam leo ante, sodales non faucibus sollicitudin, cursus sed lacus. Donec at finibus magna. Etiam porttitor, mi eget luctus viverra, lacus elit rhoncus nisl, quis pulvinar mauris purus eget lorem. In et nibh vitae tortor venenatis eleifend vitae quis turpis. Integer vestibulum nisi quam, varius commodo lacus lacinia vitae. Ut eget imperdiet eros, eget consectetur nulla. Nam nec semper est. Pellentesque scelerisque quam vel arcu tempus, sit amet mattis nulla luctus. Proin eu diam a justo accumsan dignissim vel eu elit. Mauris semper convallis massa eu ultrices.</p>
<p>Fusce quis nisl ac urna dignissim volutpat. Donec sed felis tincidunt, ornare orci eget, lacinia nunc. Quisque a lacus vel est ornare dignissim pretium quis neque. Mauris non velit et est laoreet laoreet. Aliquam feugiat non quam sit amet consequat. Proin a dolor tempor, pharetra arcu id, ullamcorper dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla dictum diam a varius. Vestibulum tempus pellentesque sem sit amet lobortis. Integer eu purus non erat feugiat cursus eu eget tortor. Mauris luctus, elit eu porta fermentum, ipsum neque pellentesque nunc, et mattis orci sem lacinia est. Sed eget est sed augue euismod aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut eu felis eget erat lobortis fringilla ut quis libero. Curabitur in tortor mattis, consectetur ex a, interdum quam. Nullam luctus neque eget felis tristique, vitae posuere est rhoncus. Morbi id imperdiet lorem. Nulla porttitor posuere sapien ac condimentum. Nam ut est et ex suscipit finibus ac at tortor. Proin augue risus, gravida vitae lacus non, consectetur pharetra tortor. Sed tristique pretium elit ut imperdiet. Morbi tincidunt mattis justo, quis blandit sem imperdiet elementum. Aenean varius molestie sapien quis viverra. Aliquam convallis efficitur erat. Aliquam convallis id leo eu ultricies. Etiam placerat odio ac placerat congue. In hac habitasse platea dictumst. Integer vitae ipsum ut massa tempor commodo sed id odio. Nunc semper pellentesque augue non ornare.</p>
<p>Nam sit amet eros risus. Nam arcu lectus, tincidunt quis fringilla eget, eleifend id felis. Duis at suscipit elit. Nunc tellus velit, viverra id urna vitae, scelerisque congue diam. Donec a nibh id nisi blandit tincidunt at at diam. Pellentesque accumsan diam turpis, hendrerit dapibus dolor finibus quis. Vivamus vulputate scelerisque enim, vitae rhoncus velit facilisis sed. Mauris laoreet eu eros sit amet auctor. Donec auctor molestie blandit.</p>
<p>Proin pretium nibh tortor, aliquam accumsan massa porttitor luctus. Donec facilisis nisi sit amet commodo egestas. Aenean quis hendrerit quam. Nam ut tellus lorem. Mauris sed rhoncus purus, eu tincidunt orci. Aliquam suscipit justo non laoreet ullamcorper. Morbi faucibus nisi vitae velit egestas posuere. Nam porta convallis diam non dignissim. Suspendisse est nisi, tincidunt sed ullamcorper at, facilisis sit amet nisl. Donec a enim non tellus posuere tincidunt. Curabitur a metus sagittis, commodo urna sit amet, efficitur ipsum. In sed diam pellentesque, feugiat metus sed, gravida orci. Cras tempus pellentesque euismod. Etiam sollicitudin lectus odio, eget vestibulum justo vestibulum et. Integer posuere feugiat neque, sed aliquam felis lobortis et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tempus diam id varius. Curabitur quis placerat quam, sit amet consectetur odio. Aliquam mollis ac arcu sed viverra. Fusce et augue felis. Phasellus consequat ipsum sem, sit amet volutpat tortor ornare sit amet. Aliquam leo ante, sodales non faucibus sollicitudin, cursus sed lacus. Donec at finibus magna. Etiam porttitor, mi eget luctus viverra, lacus elit rhoncus nisl, quis pulvinar mauris purus eget lorem. In et nibh vitae tortor venenatis eleifend vitae quis turpis. Integer vestibulum nisi quam, varius commodo lacus lacinia vitae. Ut eget imperdiet eros, eget consectetur nulla. Nam nec semper est. Pellentesque scelerisque quam vel arcu tempus, sit amet mattis nulla luctus. Proin eu diam a justo accumsan dignissim vel eu elit. Mauris semper convallis massa eu ultrices.</p>
<p>Fusce quis nisl ac urna dignissim volutpat. Donec sed felis tincidunt, ornare orci eget, lacinia nunc. Quisque a lacus vel est ornare dignissim pretium quis neque. Mauris non velit et est laoreet laoreet. Aliquam feugiat non quam sit amet consequat. Proin a dolor tempor, pharetra arcu id, ullamcorper dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla dictum diam a varius. Vestibulum tempus pellentesque sem sit amet lobortis. Integer eu purus non erat feugiat cursus eu eget tortor. Mauris luctus, elit eu porta fermentum, ipsum neque pellentesque nunc, et mattis orci sem lacinia est. Sed eget est sed augue euismod aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut eu felis eget erat lobortis fringilla ut quis libero. Curabitur in tortor mattis, consectetur ex a, interdum quam. Nullam luctus neque eget felis tristique, vitae posuere est rhoncus. Morbi id imperdiet lorem. Nulla porttitor posuere sapien ac condimentum. Nam ut est et ex suscipit finibus ac at tortor. Proin augue risus, gravida vitae lacus non, consectetur pharetra tortor. Sed tristique pretium elit ut imperdiet. Morbi tincidunt mattis justo, quis blandit sem imperdiet elementum. Aenean varius molestie sapien quis viverra. Aliquam convallis efficitur erat. Aliquam convallis id leo eu ultricies. Etiam placerat odio ac placerat congue. In hac habitasse platea dictumst. Integer vitae ipsum ut massa tempor commodo sed id odio. Nunc semper pellentesque augue non ornare.</p>
<p>Nam sit amet eros risus. Nam arcu lectus, tincidunt quis fringilla eget, eleifend id felis. Duis at suscipit elit. Nunc tellus velit, viverra id urna vitae, scelerisque congue diam. Donec a nibh id nisi blandit tincidunt at at diam. Pellentesque accumsan diam turpis, hendrerit dapibus dolor finibus quis. Vivamus vulputate scelerisque enim, vitae rhoncus velit facilisis sed. Mauris laoreet eu eros sit amet auctor. Donec auctor molestie blandit.</p>
<p>Proin pretium nibh tortor, aliquam accumsan massa porttitor luctus. Donec facilisis nisi sit amet commodo egestas. Aenean quis hendrerit quam. Nam ut tellus lorem. Mauris sed rhoncus purus, eu tincidunt orci. Aliquam suscipit justo non laoreet ullamcorper. Morbi faucibus nisi vitae velit egestas posuere. Nam porta convallis diam non dignissim. Suspendisse est nisi, tincidunt sed ullamcorper at, facilisis sit amet nisl. Donec a enim non tellus posuere tincidunt. Curabitur a metus sagittis, commodo urna sit amet, efficitur ipsum. In sed diam pellentesque, feugiat metus sed, gravida orci. Cras tempus pellentesque euismod. Etiam sollicitudin lectus odio, eget vestibulum justo vestibulum et. Integer posuere feugiat neque, sed aliquam felis lobortis et.</p>
</div>
While scrolling i'm trying to fix a p tag with my name on it on the top of the page but nothing seems to be working for me.
<div id="page-content-wrapper">
<p class="logo "><b>Mostafa</b> Masri</p>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<style>.logo {/*position: sticky;*/ top: 60px; /*left: 77px;*/ font size: 21px; text-transform: uppercase opacity: .8; margin: 0; position:absolute; top: 0; right:0; padding:19px;} </style>
Here's a possible solution using position: fixed.
.logo {
position: fixed;
top: 10px;
right: 10px;
font size: 21px;
text-transform: uppercase;
opacity: .8;
margin: 0;
padding: 19px;
}
<div id="page-content-wrapper">
<p class="logo ">
<b>Mostafa</b> Masri
</p>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">≡</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at augue quis nulla iaculis tempus. Nunc ornare tempor justo ac pretium. Fusce lobortis tortor nunc, egestas aliquet sem congue eget. Nullam sed porttitor tortor, at suscipit nunc. Sed eget
diam sed lectus varius convallis. Sed interdum semper auctor. Nam vel nisi nisi. Etiam sem lacus, gravida sit amet odio sit amet, convallis pellentesque velit.</p>
<p>Aliquam pulvinar eu magna nec rhoncus. Nulla vel felis nec nisi faucibus varius sit amet in velit. Integer posuere eleifend metus, ac placerat erat elementum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum diam libero, rhoncus
at pretium a, ultrices eu mauris. Pellentesque blandit pretium mi eget lacinia. Nullam erat est, congue ultrices viverra eget, iaculis sit amet velit. Ut tempus lacinia ante, non venenatis leo. Fusce quis ipsum maximus, mattis felis at, feugiat lacus.
Morbi condimentum semper mi ac porttitor. Maecenas aliquam auctor mi, nec accumsan mauris congue a. Praesent rutrum porta sapien in scelerisque. Cras vehicula, tortor non hendrerit dictum, ex justo lacinia nulla, vitae dapibus nibh eros nec mauris.
Nulla sodales hendrerit odio et efficitur.</p>
<p>Fusce vel tempor elit, quis pharetra enim. Suspendisse potenti. Donec a arcu fermentum, venenatis tortor ac, mollis ante. Nullam vitae quam quis leo tempus iaculis id eget nibh. Maecenas consequat quis ante at lacinia. Donec auctor vel leo ut pretium.
Vestibulum hendrerit, nunc non scelerisque condimentum, dolor urna convallis sem, pulvinar vestibulum elit ante eget quam. Nunc pretium, lectus vel tincidunt lacinia, massa neque posuere felis, non tristique ipsum ante vitae dui. Mauris vitae nulla
quis mi congue eleifend non eu libero. Maecenas sit amet felis eu urna aliquam efficitur et congue nisi. Praesent sagittis nisi porttitor velit consequat, in feugiat quam ultrices. Cras sit amet enim ante. Fusce mi urna, volutpat semper justo ut,
feugiat mattis elit. Sed quis volutpat justo. Fusce pretium venenatis massa a aliquam.</p>
<p>Sed eu ultrices felis, et luctus metus. Donec justo felis, congue eget dui nec, commodo porttitor felis. Sed eu dui et risus condimentum rhoncus. Sed interdum libero ac risus convallis, sed placerat tortor interdum. Phasellus nec tristique eros, a ullamcorper
ex. Aliquam nulla nunc, placerat et urna vitae, eleifend condimentum arcu. Nullam diam arcu, dignissim eu lacus ac, porta pulvinar arcu. Sed ultrices luctus leo, ac blandit mi pellentesque a. Nunc ornare, arcu consectetur bibendum hendrerit, nulla
diam finibus est, non porta ligula erat vitae velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sodales arcu a lacus luctus, non mollis neque placerat. Praesent lacinia nisl id lectus feugiat condimentum.
Vivamus convallis aliquam est vel sagittis. Etiam ullamcorper consequat sapien, ornare porttitor massa luctus non. Ut purus tellus, maximus eu iaculis a, porta ac mi.</p>
<p>Praesent suscipit risus vitae magna aliquet, sed egestas ipsum eleifend. Suspendisse tincidunt dolor at est rhoncus mollis. In convallis iaculis diam id finibus. Integer et mi blandit, imperdiet arcu in, accumsan velit. Pellentesque vitae tristique
odio. Pellentesque facilisis dolor at suscipit ultrices. In hac habitasse platea dictumst. Sed molestie ante quis rutrum vestibulum. Phasellus interdum eros ut sem porta, non facilisis velit fringilla.</p>
</div>