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>
Related
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>
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>
I am trying to have 2 rows with the height 100% of the windows. As you can see the 2 columns don't extend fully and the first box content overflows outside.
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
Try using background-size: cover; and position: fixed; like this:
html,
body {
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
position: fixed;
}
.nav {
background: hotpink;
flex: 1;
background-size: cover;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
You could make it scrollable by using overflow: auto
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
overflow: auto;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</div>
Or remove the height: 100% on .container so it's stretched by inner elements
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
flex-direction: row;
display: flex;
}
.nav {
background: hotpink;
flex: 1;
}
.main {
background: aliceblue;
flex: 1;
}
<div class="container">
<div class="nav">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.
Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.
Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.
Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.
Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
</div>
<div class="main">
content
</div>
</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>
sorry if this title isn't really the issue, I can't think of any other way to describe it.
If you look at the attached js fiddle, you'll see that there is a vertically centered div that grows off the top of the page, and cannot be seen or scrolled to.
https://jsfiddle.net/xdmkm2e4/
Please also see code below:
HTML:
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
vitae molestie quam imperdiet. Integer mollis turpis nec metus tincidunt imperdiet. Aenean mollis at nisl at venenatis. Sed sodales, nibh ut aliquet fermentum, erat purus convallis orci, a feugiat purus ex sit amet dui. Pellentesque vel elementum
nisi, lobortis rutrum nibh. Donec at hendrerit metus. Nam elementum semper tortor, quis gravida ex suscipit sit amet. Sed at tellus suscipit augue varius posuere. Donec eu diam erat. Pellentesque tristique porttitor nisi sed lobortis. Proin tempor
elit sit amet est ultricies rutrum. Fusce sit amet cursus risus, sed tincidunt urna. Praesent ultrices mattis ullamcorper. Morbi quis mattis enim. Vivamus in magna ut lacus congue feugiat. Donec viverra ultrices nisi, id lacinia ante tempor eget.
Aenean in auctor tortor, vitae viverra mi. Vivamus facilisis dignissim massa id dignissim. Maecenas nec quam id libero lobortis vulputate. Nam in hendrerit arcu, vel luctus nulla. Nam eu nisl iaculis, vehicula justo id, finibus augue. Ut faucibus,
risus quis lacinia auctor, ex massa euismod nisi, nec vulputate nisi elit ut urna. Donec semper massa nec vestibulum iaculis. Aliquam odio sapien, porttitor in ultricies eget, efficitur a nisi. Nullam sagittis ex sit amet leo ullamcorper semper.
Quisque vitae pharetra nisl. Aliquam efficitur vulputate lectus nec accumsan. Aenean pulvinar sit amet ligula a iaculis. Aenean non odio ligula. Praesent arcu leo, scelerisque ut lorem et, fringilla scelerisque nulla. Ut porta felis vehicula, faucibus
ligula tincidunt, pulvinar urna. Ut nec nisi vel orci volutpat dapibus eu ut urna. In finibus sem vel mauris mattis viverra. Morbi vitae elit at lorem mollis cursus. Aenean nec enim faucibus, maximus est nec, maximus nibh. Pellentesque laoreet,
felis id rhoncus gravida, dolor lorem porttitor felis, et feugiat diam nibh at magna. Fusce mollis congue magna, et sollicitudin lectus maximus vel. Etiam ac nisi sed purus placerat faucibus vel at dui. Praesent vel orci at sem ultricies sodales
malesuada eu eros. Morbi commodo fermentum tellus eu gravida. Mauris accumsan bibendum velit, ac pharetra nisl blandit a. Aenean sed venenatis libero. Mauris id sapien quis felis volutpat mollis sed eget tortor. Quisque viverra maximus urna non
tristique. Donec venenatis elementum enim vitae viverra. Nam vitae nisi dictum, pellentesque urna nec, lobortis risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur interdum dolor ut nibh efficitur,
in iaculis sem iaculis. Quisque sit amet lacus eu metus posuere tincidunt. Aenean nec vulputate velit. Fusce cursus consectetur urna, ac aliquet sapien molestie nec. Nunc vel imperdiet purus. Etiam cursus accumsan magna at imperdiet. Sed fringilla
finibus laoreet. In elementum non est ac ultricies. Morbi enim turpis, convallis sed luctus non, dignissim id ante. Aenean sollicitudin fringilla elit, sit amet egestas diam aliquam et. Vestibulum non maximus odio. Proin consequat augue vel gravida
sagittis. Sed in gravida enim, in consequat dolor. Mauris vitae ligula ullamcorper turpis ultrices volutpat non id sem. Donec mollis est pellentesque, venenatis velit ut, mollis leo. Vestibulum sit amet dolor quis dolor facilisis vulputate. In placerat
ultrices ligula, eget maximus ex sodales id. Nunc at tristique diam. Fusce at elementum turpis, ac scelerisque purus. Donec convallis orci ac sem aliquet commodo. Aenean efficitur pharetra condimentum. Mauris eget magna at dui posuere faucibus cursus
vitae lectus. Sed pharetra neque augue, eget tempor enim porttitor porta. Integer tincidunt finibus risus, quis tempor nisi pellentesque sit amet. Maecenas mollis euismod libero, eu blandit risus commodo in. Aliquam eu velit varius lectus lobortis
fermentum vitae et augue. Integer mattis dignissim tristique. Nunc semper sapien ut ligula aliquam, nec pretium justo congue. Phasellus non felis egestas, scelerisque nibh vel, pellentesque odio. Nulla facilisi. Donec ullamcorper justo sem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien vitae augue laoreet tincidunt nec ac lectus. Integer maximus elit a quam tristique ultrices. Sed a diam eget arcu semper euismod. Praesent efficitur quam
magna, auctor feugiat neque vulputate sed. Sed sodales iaculis hendrerit. Donec vestibulum enim a lorem accumsan, in suscipit massa tincidunt. Praesent a orci sapien. Nam convallis mi urna, at porttitor elit porta eu. Aliquam ligula mauris, tincidunt
ac maximus id, scelerisque sit amet purus. Etiam vehicula elementum porta. Nulla congue tincidunt mauris eu tempus. Donec rutrum interdum nunc, ac commodo nibh condimentum vulputate. Duis eu ante et nisl aliquam interdum eu ut sem. Mauris non porttitor
diam. Vivamus eleifend enim sit amet quam euismod pellentesque vitae ac purus. Aliquam erat volutpat. Nulla ac nibh ex. Etiam sed ullamcorper ipsum. Etiam posuere elementum orci a viverra. Suspendisse potenti. Donec metus magna, accumsan ac lacinia
quis, accumsan vulputate lorem. Aenean dictum turpis consequat iaculis faucibus. Duis nec odio non massa laoreet mattis. Nunc pharetra vitae arcu scelerisque fermentum. Aliquam non elementum libero. Mauris efficitur, nulla id sagittis viverra, orci
felis mattis magna, a vulputate orci purus ut lacus. In eleifend lacus ut ante faucibus, non rhoncus sem lobortis. Donec venenatis nunc sit amet varius laoreet. Vestibulum tristique, neque aliquet sagittis eleifend, nulla odio blandit tortor, quis
rutrum ligula ligula vel erat. Sed hendrerit dictum porta. Donec ullamcorper ligula non tortor dapibus, vulputate porttitor arcu gravida. Nam vitae nunc aliquet, mollis nisl ac, bibendum arcu. Aliquam at dapibus dui. Nulla at pharetra lorem. Fusce
efficitur in massa non lacinia. Proin vel lacus ipsum. Donec pharetra molestie libero quis imperdiet. Ut nec mauris quis turpis mattis gravida quis vitae massa. Morbi sodales urna eget ex tristique finibus. Donec eget arcu nisi. Aliquam quis eleifend
dolor. Praesent eu lobortis magna. Curabitur congue neque et mauris eleifend laoreet. Maecenas vel semper enim. Nulla ligula odio, accumsan ut laoreet sed, feugiat vitae diam. Mauris placerat ultrices tortor, vel dignissim nibh scelerisque fermentum.
In non consequat enim. Aliquam auctor mauris sit amet aliquet condimentum. Morbi nibh lorem, mattis ut metus sed, mattis sollicitudin odio. In hac habitasse platea dictumst. Sed tempus consequat felis, eu convallis lacus sagittis nec. In hac habitasse
platea dictumst. Praesent eget congue lacus, non tempor odio. Aliquam vitae augue lacinia, semper eros rutrum, elementum felis. Praesent pharetra nunc nisi, id suscipit nibh bibendum accumsan. Nam consectetur, metus eget malesuada suscipit, quam
diam ullamcorper leo, vel posuere dolor ligula non lacus. Nulla pharetra malesuada accumsan. Aenean faucibus vel justo quis tincidunt. Cras cursus sem nunc, eu tincidunt mauris facilisis vitae. Sed feugiat fermentum ipsum sed ultricies. Nullam suscipit
sapien a nisi blandit finibus. Aliquam pretium aliquam massa nec dapibus. Etiam vulputate, ipsum sed vestibulum pellentesque, turpis nulla blandit risus, sit amet vestibulum magna eros et tellus. Integer euismod congue orci sed tristique. Maecenas
eu sem eleifend, sollicitudin tortor suscipit, malesuada lacus. Nullam eleifend sollicitudin convallis. Cras volutpat vulputate pellentesque. Quisque laoreet cursus sapien, nec iaculis risus pharetra vitae. Cras non finibus ante. Suspendisse arcu
arcu, dignissim ut tellus et, venenatis hendrerit libero. Fusce et vestibulum purus, sed vulputate lectus. Suspendisse nec purus ac tellus blandit pellentesque. Ut a tincidunt ante. Vivamus congue dapibus tortor vitae dignissim. Maecenas eget tempus
ante, tincidunt fermentum ex. Duis molestie nulla vitae nisl vestibulum, a egestas purus posuere. Nunc pretium mollis eros eget pharetra. Nulla id feugiat dui. Nullam felis sapien, mattis porta massa at, pharetra dignissim augue. Cras semper urna
nec diam finibus, sed iaculis diam consequat. Sed vehicula laoreet tempus. Nunc pulvinar ipsum non velit interdum, eget sollicitudin nibh commodo. Duis massa sem, dictum sit amet elementum et, lacinia nec dui. Sed pulvinar elit sapien. Nunc sit
amet erat tincidunt, porta diam efficitur, egestas neque. Curabitur at ante ut massa condimentum cursus. Nullam pharetra, erat ac eleifend ultrices, est augue semper metus, ac rhoncus metus lorem vitae augue. Nulla sagittis, diam a mattis aliquet,
odio eros scelerisque nisl, id tincidunt nisi felis non ipsum. Morbi pulvinar a elit consequat malesuada. Vestibulum nec ligula facilisis, rhoncus mi laoreet, commodo quam. Nullam imperdiet aliquet dui in rutrum. Duis tristique massa sit amet arcu
efficitur imperdiet. Sed interdum erat id nunc euismod aliquet. Aenean in interdum urna. Aliquam dapibus magna nec dui rhoncus scelerisque. Fusce dignissim lobortis purus, eget facilisis purus. Proin tincidunt lectus vel eros volutpat feugiat. Ut
sed congue sem.
</p>
</div>
</div>
CSS:
#CONTENT {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 20px;
}
My goal is to get it so that the top of the div is centered, but that content grows the div downwards rather than upwards.
Any help would be greatly appreciated!
Use {margin: 0 auto;} to center things at the top.
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
Also, as #Bosc pointed out;
you can give the <div> a fixed height and make it scroll-able.
To achieve this you can use {overflow-y:scroll}
Like so
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em;
overflow-y: scroll;
max-height: 50vh;
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
You can also take it one step further and remove the scrollbar from the <div>
However, note that this is only supported by -webkit- browsers. The scrollbar will still show up for FF and IE users.
Open the snippet below with a webkit browser to see the effect:
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em;
overflow-y: scroll;
max-height: 50vh;
}
#CONTENT::-webkit-scrollbar {
width: 0;
height: 0;
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
Are you trying to get it vertically-aligned center? If not, you don't need to do the transform translate. From what I've seen it's only used for images.
If you do something like this it should work:
#CONTENT {
position: absolute;
top: 10%;
width: 70vw;
margin: 0 auto;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 20px;
}
I can't describe nicely but, I think this is what you wanted.
#CONTENT {
position: absolute;
top: 10%;
left: 10%;
width: 70vw;
margin-bottom: 20px;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 10px 20px;
}
I'll give you the jsfiddle link, https://jsfiddle.net/7evkdv20/