I'm trying to have my text inside the 'container' div show up entirely but it seems to get cut off? .. It works if there is only a bit of text but if the text is more than 1 page it will cut it off.. Also the page seems to load very long because of the background image (defined in stylesheet.css) How do I fix this the best ? Thanks in advance!
* {
box-sizing: border-box;
}
#font-face {
font-family: 'zcool';
src: url('fonts/zcool.ttf') format('ttf');
local: url('fonts/zcool.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-attachment: fixed;
background-size: 100% auto;
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
body {
padding: 0;
margin: 0;
border: 0;
background-attachment: fixed;
background-size: 100% auto;
background-image: url("img/bgm.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
background-image: url(img/j.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
margin-top: 10%;
margin-bottom: 10%;
}
#media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
.header {
background-image: url("img/johnswork-mobile.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
margin-top: 10%;
margin-bottom: 10%;
}
}
.body {
height: 100%;
width: 90%;
margin: auto;
padding: 0;
border: 0;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
/*background-color: grey;*/
}
.johnswork {
background-image: url(img/johnswork.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 20%;
width: 100%;
margin-bottom: 5%;
}
.content {
margin: auto;
height: 100%;
width: 90%;
background-color: white;
color: black;
border-right: double;
border-left: double;
box-shadow: 0px -21px 28px 7px rgb(162, 27, 27);
text-align: justify;
font-size: 20px;
padding-top: 2%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
#media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
.content {
margin: auto;
height: 100%;
width: 90%;
background-color: white;
color: black;
border-right: double;
border-left: double;
box-shadow: 0px -21px 28px 7px rgb(27, 125, 162);
text-align: justify;
font-size: 20px;
padding-top: 2%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
}
.social {
margin: auto;
display: flex;
justify-content: center;
}
.me {
float: left;
margin-right: 3%;
height: 100%;
}
.footer {
height: 50px;
width: 72%;
background-color: black;
color: white;
vertical-align: middle;
margin: auto auto 50px;
}
#copyright {
display: table;
}
#cpy{
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<!--<link rel="stylesheet" type="text/css" href="stylesheet-m.css" media="handheld" />-->
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>
<body>
<nav class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<header class="header">
<!-- background defined in stylesheet.css-->
</header>
<section class="body">
<section class="content">
<section class="johnswork">
<!-- background defined in stylesheet.css-->
</section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio.
Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu. Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus sit amet viverra in, varius vel urna.
Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor, a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
</section>
</section>
<footer class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</footer>
</body>
</html>
As for the text cutting off, the below css seems to fix it without cutting off the image.
.body{
height: auto;
}
As for the background image, it may be the file size. I usually use https://compressor.io/ to reduce my file sizes while maintaining image quality.
Getting rid of
html,
body {
height: 100%;
}
Seems to fix the problem of the text getting cut off.
I am assuming you want an image with text going around it. You can try this out!
.image-container {
float: left;
margin: 0px 20px 5px 0px;
<section class="content">
<div class="image-container">
<img src="https://images.pexels.com/photos/374811/pexels-photo-374811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla
eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer
quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna,
in suscipit purus. Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada.
Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero
consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer
fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus
euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio. Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu.
Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus
nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus
sit amet viverra in, varius vel urna. Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor,
a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor
justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
</p>
</section>
Related
I have content on page and I would like to make both sidebars to be sticky, something like:
I am using flex:
<div className="homePageFeed">
<div className="homePageFeedWrapper">
<HomePageFeedMenu/>
<HomePageFeedContent/>
<HomePageFeedUtil/>
</div>
</div>
.homePageFeed{
position: relative;
width: 100%;
}
.homePageFeedWrapper{
display: flex;
align-items: center;
position: relative;
height: 100%;
padding-left: 22px;
padding-right: 16px;
z-index: 30;
flex-direction: row;
}
Other components, left-sidebar:
const HomePageFeedMenu = () => {
return (
<div className="homeFeedMenu">
<ol>
<li> Mammals</li>
<li> Lizards</li>
<li> Birds</li>
<li> Spiders</li>
</ol>
</div>
)
}
export default HomePageFeedMenu;
.homeFeedMenu{
flex: 10 0 0;
width: 100%;
height: 500px;
border-right: 1px solid hsl(210,8%,35%);
}
ol{
list-style: none;
}
li{
color: hsl(210,8%,35%);
margin: 0;
}
Scrollable content ( with test item in it ):
const HomePageFeedContent = () => {
return (
<div className="homeFeedContent">
<div className="homeFeedItem">
<div className="content">
<div className="homeFeedItemTitle"><p>Animal name</p></div>
<div className="homeFeedItemContent">
Animal description
</div>
<div className="homeFeedItemMetaInfo">Age and adoption info</div>
</div>
<div className="img">Animal picture</div>
</div>
</div>
)
}
.homeFeedContent{
padding-top: 25px;
flex: 70 0 0;
width: 100%;
border-right: 1px solid hsl(210,8%,35%);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.homeFeedItem{
width: 90%;
height: 200px;
display: flex;
margin-top:25px;
flex-direction: row;
justify-content: center;
border-bottom: 1px solid hsl(210,8%,35%);;
}
.content{
flex: 80 80 0;
display: flex;
flex-direction: column;
}
.img{
flex: 20 20 0;
width: 100%;
height: 100%;
border: 1px solid black;
}
.homeFeedItemTitle{
width: 100%;
flex: 20 20 0;
}
.homeFeedItemContent{
width: 100%;
flex: 60 60 0;
border-bottom: 1px hsl(210,8%,35%);;
}
.homeFeedItemMetaInfo{
width: 100%;
flex: 20 20 0;
}
export default HomePageFeedContent;
And right static sidebar
const HomePageFeedUtil = () => {
return (
<div className="homeFeedUtil">
</div>
)
}
export default HomePageFeedUtil;
.homeFeedUtil{
flex: 20 0 0;
width: 100%;
height: 500px;
}
Now I am trying to use sticky positioning for both sidebars, however, it does not work as they are part of the flexbox. I would also like to fix their height, as you can see I attempted to use 500px, hover when the middle flex element gets lots of element and the site become scrollable, it readjusts the position of both sidebars ( as they have fixed height ) and thus their content does not appear on top of it "column".
Are there any tricks to use both, flex and sticky positioning? Or do I need to do it without flex?
Thanks for the help!
I'd not use flexbox. I'd use position: sticky for the top then position: fixed for each sidebar. Use css variables to work out the width of the scrollable area. Here's an example:
body {
box-sizing: border-box;
margin: 0;
}
.main-container {
--header-height: 50px;
--header-gap: 0.5rem;
--sidebar1-width: 200px;
--sidebar2-width: 100px;
--sidebar-gap: 0.5rem;
}
.sticky-header {
position: sticky;
height: var(--header-height);
background-color: lightblue;
border: 1px solid blue;
top: 0;
z-index: 1;
}
.sticky-sidebar1 {
position: fixed;
top: var(--header-height);
left: 0;
width: var(--sidebar1-width);
height: calc(100vh - var(--header-height));
background-color: lightgreen;
border: 1px solid darkgreen;
}
.sticky-sidebar2 {
position: fixed;
top: var(--header-height);
right: 0;
width: var(--sidebar2-width);
height: calc(100vh - var(--header-height));
background-color: lightpink;
border: 1px solid darkred;
}
.scrollable-content {
border: 1px solid red;
padding: 0.25rem;
overflow: hidden;
margin-left: calc(var(--sidebar1-width) + var(--sidebar-gap));
margin-right: calc(var(--sidebar2-width) + var(--sidebar-gap));
margin-top: var(--header-gap);
}
#media only screen and (max-width: 600px) {
.main-container {
--sidebar1-width: 100px;
--sidebar2-width: 0px;
}
}
<div class='main-container'>
<div class="sticky-header">Sticky Header</div>
<div class="sticky-sidebar1">Sticky Sidebar1</div>
<div class="sticky-sidebar2">Sticky Sidebar2</div>
<div class="scrollable-content">
<h1>Scrollable Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. In eu mi bibendum neque egestas congue quisque egestas. Adipiscing enim eu turpis egestas
pretium.
Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. In massa tempor nec feugiat nisl. Mattis nunc
sed
blandit libero volutpat sed. Magna ac placerat vestibulum lectus mauris ultrices eros in. Senectus et netus et
malesuada fames ac turpis egestas. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel elit
scelerisque mauris pellentesque pulvinar. Egestas egestas fringilla phasellus faucibus scelerisque eleifend
donec pretium. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Lectus vestibulum mattis
ullamcorper velit sed. Risus ultricies tristique nulla aliquet enim tortor at auctor. Vitae congue mauris
rhoncus aenean vel elit scelerisque mauris pellentesque. Lacus suspendisse faucibus interdum posuere lorem
ipsum
dolor. Suspendisse interdum consectetur libero id. Vestibulum lorem sed risus ultricies tristique nulla
aliquet.
Nunc eget lorem dolor sed viverra ipsum nunc. Diam sit amet nisl suscipit adipiscing bibendum est.
Diam phasellus vestibulum lorem sed risus ultricies tristique. Ultrices sagittis orci a scelerisque. Iaculis
at
erat pellentesque adipiscing commodo elit at imperdiet dui. Donec enim diam vulputate ut pharetra sit.
Fringilla
urna porttitor rhoncus dolor purus. Turpis massa tincidunt dui ut ornare lectus. Et netus et malesuada fames
ac
turpis egestas maecenas pharetra. Malesuada nunc vel risus commodo viverra maecenas. Purus sit amet volutpat
consequat mauris nunc. Vel fringilla est ullamcorper eget nulla. Duis ultricies lacus sed turpis tincidunt id
aliquet risus. Arcu ac tortor dignissim convallis aenean et. Elementum nibh tellus molestie nunc non blandit
massa.
Magna sit amet purus gravida quis. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Sagittis
nisl rhoncus mattis rhoncus urna neque. Feugiat scelerisque varius morbi enim nunc faucibus. Parturient montes
nascetur ridiculus mus mauris vitae ultricies leo. Enim nulla aliquet porttitor lacus luctus accumsan tortor
posuere. Rhoncus aenean vel elit scelerisque mauris pellentesque. Velit aliquet sagittis id consectetur purus.
Id porta nibh venenatis cras sed felis eget velit aliquet. Mattis nunc sed blandit libero. Suspendisse in est
ante in. Duis at tellus at urna condimentum mattis. Consequat semper viverra nam libero justo laoreet sit amet
cursus.
Sed turpis tincidunt id aliquet risus feugiat. Aliquam purus sit amet luctus. Suspendisse faucibus interdum
posuere lorem. Cursus turpis massa tincidunt dui ut ornare. Donec ultrices tincidunt arcu non sodales. Tellus
integer feugiat scelerisque varius morbi enim nunc faucibus. Leo integer malesuada nunc vel risus. Ut pharetra
sit amet aliquam id diam. Condimentum vitae sapien pellentesque habitant morbi tristique. Vestibulum lectus
mauris ultrices eros. Aenean sed adipiscing diam donec adipiscing tristique risus. Nulla aliquet porttitor
lacus
luctus accumsan tortor. Semper feugiat nibh sed pulvinar. Placerat in egestas erat imperdiet sed.
Pulvinar pellentesque habitant morbi tristique senectus et netus. Vitae turpis massa sed elementum tempus
egestas sed. Aliquam sem et tortor consequat id porta nibh venenatis cras. Orci dapibus ultrices in iaculis
nunc
sed augue lacus. Blandit turpis cursus in hac habitasse platea. Volutpat blandit aliquam etiam erat velit
scelerisque. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Lectus sit amet est placerat. Eu mi
bibendum neque egestas congue. Dictum non consectetur a erat nam at. Facilisis magna etiam tempor orci eu
lobortis. Sit amet venenatis urna cursus eget nunc. Sed risus pretium quam vulputate dignissim suspendisse.
Vivamus at augue eget arcu dictum. Ultricies tristique nulla aliquet enim tortor. Gravida neque convallis a
cras
semper auctor neque.
Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Est lorem ipsum dolor sit amet. Tempor
orci dapibus ultrices in iaculis nunc. Lorem ipsum dolor sit amet consectetur adipiscing. Volutpat diam ut
venenatis tellus in metus vulputate eu. Sed nisi lacus sed viverra tellus. Penatibus et magnis dis parturient.
Ipsum consequat nisl vel pretium lectus quam. Mollis aliquam ut porttitor leo a diam. Cras sed felis eget
velit.
Euismod lacinia at quis risus. Neque viverra justo nec ultrices dui. Pellentesque habitant morbi tristique
senectus et netus et. Pharetra vel turpis nunc eget lorem dolor. Ac auctor augue mauris augue neque gravida
in.
</p>
</div>
</div>
For the result you are looking for you would need to use position: fixed; in your css for all 3 elements you want to be fixed;
For your top header it would be something like:
#enterIDhere {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
margin: 0 auto;
}
For your left sidebar it would be something like:
#EnterIDhere {
position: fixed;
left: 0;
bottom: 0;
}
and last but not least your right sidebar would need something like:
#EnterIDhere {
position: fixed;
right: 0;
bottom: 0;
}
I've been trying to make a website with an image and a div next to each other, and make them responsive so it goes under the div when the screen size changes. It's been working so far, but whenever the image goes under the div, the size changes drastically and gets really weird.
Here's the code used
body{
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
#font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-color: white;
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size:contain;
position: relative;
max-width: 100%;
}
.menuBar{
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color:rgba(230,199,177,255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size:contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<body>
<div class = "top-container"></div>
<div class = "menuBar" id = "menuBar"> MenuBar</div>
<div class = "mainContent">
<div class="flex-container">
<div class = "flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum.
Vestibulum sodales mauris ut tempor posuere. Nulla orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi. Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue.
Quisque rutrum laoreet urna eget posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem id metus auctor, sit amet ullamcorper mauris fringilla.
In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget hendrerit.
</h3>
</div>
<div class = "flex2">2</div>
</div>
</body>
<script src="index.js"></script>
<!-- rgb(255, 209, 218); -->
Define a height or min-height to the image container. I also used flex instead of width to have a better result on wrap
body {
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
.top-container {
background-color: white;
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
.menuBar {
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > * {
flex:300px; /* added this */
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
min-height: 300px; /* added this */
margin: 10px;
text-align: center;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
the problem is the height of your element,
by default all html elements get height:auto; and it means take as much as your children need
so your second box has nothing but a '2' inside of it, that's why it only gets 18px height!
if this is true, then how it is working fine on wider devices?
That's flexbox's magic!
by default the align-items property of flex has stretch value, which means if the flex item has no explicit height, it should stretch and fill the parent's height, your first item has some text in it, right? so first item grows as much as necessary for his text and this causes your flexbox to grow up and wrap the children inside of it and align-items property forces your second box to grow and get the height, so it will get enough height to be visible on larger devices...
how to fix this??
you can use min-height or max-height or both!
or
you can use #media for smaller devices and set height for your second element to make it bigger
or
you can use an img tag instead of background and set specific height for it and use object-fit to maintain your image's aspect ratio
or
you can use padding or <br /> to make your second division big enough to make it's background visible
currently these are all options I can think of, if any better solution came to my mind, I'll let you know
I'm trying to create a navigation bar at the top the page, with the logo in the centre and a list either side. Each list containing three links to pages in the site.
For some reason, the logo doesn't scroll with the page, but .nav, #left and #right do scroll normally.
The page is live here:
afsmma.com
Here's the code:
.nav {
margin: auto;
height: 60px;
width: 100%;
max-width: 900px;
background: #efefef;
font-family: 'Assistant' , sans-serif;
font-weight: 700;
}
#left {
margin: 0;
padding-top: 17px;
padding-left: 20px;
float: left;
list-style: none;
}
#left li {
display: inline-block;
padding-right: 15px;
font-size: 12pt;
}
.afs {
position: absolute;
text-align: center;
width: 100%;
max-width: 900px;
}
.afs img {
margin: 5px auto 0px auto;
height: 50px;
}
#right {
float: right;
margin: 0;
padding-top: 17px;
padding-right: 20px;
list-style: none;
}
#right li {
display: inline-block;
padding-left: 15px;
font-size: 12pt;
}
.hero {
height: 100%;
background: url(/images/ph.jpg) 50% 50% no-repeat;
background-size: cover;
}
<div class="nav">
<ul id="left">
<li>HOME</li>
<li>EVENTS</li>
<li>TICKETS</li>
</ul>
<div class="afs">
<img src="images/LogoCyan.svg">
</div>
<ul id="right">
<li>SHOP</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
<div class="hero"></div>
A bit of Flex will solve it easily and very cleanly.
Avoid position:absolute and use flex,
DEMO : https://jsfiddle.net/vikas_saini/v6uxh3sc/1/
CSS:
.nav {
margin: auto;
height: 60px;
width: 100%;
max-width: 900px;
background: #efefef;
display:flex;
justify-content: space-between;
font-family: 'Assistant' , sans-serif;
font-weight: 700;
}
#left {
margin: 0;
display:flex;
padding-top: 17px;
padding-left: 20px;
float: left;
list-style: none;
}
#left li {
display: inline-block;
padding-right: 15px;
font-size: 12pt;
}
.afs {
flex-grow: 1;
text-align: center;
width: 100%;
max-width: 900px;
}
.afs img {
margin: 5px auto 0px auto;
height: 50px;
}
#right {
display:flex;
float: right;
margin: 0;
padding-top: 17px;
padding-right: 20px;
list-style: none;
}
#right li {
display: inline-block;
padding-left: 15px;
font-size: 12pt;
}
.hero {
height: 200vh;
background: url(/images/ph.jpg) 50% 50% no-repeat;
background-size: cover;
}
HTML:
<div class="nav">
<ul id="left">
<li>HOME</li>
<li>EVENTS</li>
<li>TICKETS</li>
</ul>
<div class="afs">
<div class="image-container">
<img src="images/LogoCyan.svg">
</div>
</div>
<ul id="right">
<li>SHOP</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
<div class="hero"></div>
Try position: fixed; or position: absolute; in the .nav class and position: absolute to the .hero class
Try to align your items with flex:
.nav {
margin: auto;
height: 60px;
width: 100%;
max-width: 900px;
background: #efefef;
font-family: 'Assistant' , sans-serif;
font-weight: 700;
display: flex;
justify-content: space-between;
}
#left {
margin: 0;
padding-top: 17px;
padding-left: 20px;
list-style: none;
display: flex;
}
#left li {
display: inline-block;
padding-right: 15px;
font-size: 12pt;
}
.afs {
text-align: center;
width: 100%;
max-width: 900px;
}
.afs img {
margin: 5px auto 0px auto;
height: 50px;
}
#right {
margin: 0;
padding-top: 17px;
padding-right: 20px;
list-style: none;
display: flex;
}
#right li {
display: inline-block;
padding-left: 15px;
font-size: 12pt;
}
.hero {
height: 100%;
background: url(/images/ph.jpg) 50% 50% no-repeat;
background-size: cover;
}
Using flex, you can create some surrounding divs for your ul menus, and specify the widths of each div container to show the menus and logo inline. As for the hero image, moving that after open <body>, you can specify a position of fixed with a z-index of -1 to move it behind the menu. Please see the JSFiddle that shows the new CSS with the actual images from your site.
https://jsfiddle.net/4Lk1ygsp/
.nav {
margin: auto;
height: 60px;
width: 100%;
max-width: 900px;
background: #efefef;
font-family: 'Assistant', sans-serif;
font-weight: 700;
}
#nav-left {
position: relative;
float: left;
width: 300px;
display: inline-flex;
}
#left {
margin: 0;
padding-top: 17px;
padding-left: 20px;
float: left;
list-style: none;
}
#left li {
display: inline-block;
padding-right: 15px;
font-size: 12pt;
}
.afs {
position: absolute;
text-align: center;
width: 100%;
max-width: 900px;
}
.afs img {
margin: 5px auto 0px auto;
height: 50px;
}
#nav-right {
position: relative;
float: right;
width: 300px;
display: inline-flex;
}
#right {
float: right;
margin: 0;
padding-top: 17px;
padding-right: 20px;
list-style: none;
}
#right li {
display: inline-block;
padding-left: 15px;
font-size: 12pt;
}
.hero {
height: 100%;
background: url(http://afsmma.com/images/ph.jpg) 50% 50% no-repeat;
background-size: cover;
position: fixed;
width: 100%;
z-index: -1;
}
#body-container {
width: 900px;
margin: 0px auto;
color: #fff;
}
<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ambition Fight Series</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Assistant:400,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="hero"></div>
<div class="nav">
<div id="nav-left">
<ul id="left">
<li>HOME</li>
<li>EVENTS</li>
<li>TICKETS</li>
</ul>
</div>
<div class="afs">
<img src="http://afsmma.com/images/LogoCyan.svg">
</div>
<div id="nav-right">
<ul id="right">
<li>SHOP</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper volutpat nunc vehicula tincidunt. Phasellus vel urna id mi aliquam consequat non eget eros. Fusce rutrum lorem nunc, eu ultricies justo tempor sit amet. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Mauris ante velit, eleifend non nulla et, mollis blandit purus. Curabitur vehicula orci vel ultricies pretium. Donec cursus suscipit arcu, eget dignissim eros scelerisque at. Mauris a blandit
libero. Quisque quis vehicula orci, id dapibus ipsum. Maecenas urna purus, mattis et sollicitudin eget, ullamcorper quis enim. Maecenas sagittis mi vitae justo feugiat pretium. In quis elementum sapien. Integer consequat mi vitae nisl vulputate
feugiat. Curabitur rhoncus, lorem at fermentum sagittis, tellus metus sagittis metus, et ullamcorper massa mi sit amet metus. Mauris nec dictum orci, eu pellentesque mi. Proin maximus et lacus eget vestibulum.
</p>
<p>
In tempor erat nec tristique cursus. Quisque eleifend placerat lacinia. Suspendisse lectus nibh, congue non auctor non, lacinia et erat. Donec pellentesque mi ac sapien luctus, luctus laoreet quam ullamcorper. Donec consequat est neque, id elementum libero
iaculis sit amet. Fusce imperdiet in erat in imperdiet. Cras ullamcorper elit vel nisl efficitur ultricies. Suspendisse potenti. Quisque eu porta erat, a mattis turpis. Quisque aliquam nunc quis felis consectetur, ut interdum tortor sagittis.
Suspendisse posuere ipsum ut ipsum sagittis viverra. Vestibulum feugiat, turpis ut vehicula dignissim, ipsum lectus efficitur magna, facilisis condimentum mi nulla sed mi. Nullam nunc dui, elementum et tellus nec, facilisis convallis libero. Mauris
facilisis, magna ut vestibulum ornare, elit massa pellentesque arcu, sed laoreet nisi erat quis dolor.
</p>
<p>
Donec ut imperdiet nisi. Nullam molestie convallis erat convallis accumsan. Suspendisse in lectus ac orci aliquet consequat. Praesent eleifend, nisl quis vulputate mollis, dui erat dignissim tortor, non mattis felis enim quis magna. Fusce posuere ante
ac orci rutrum, ut varius lectus gravida. Curabitur tristique volutpat sodales. Fusce lobortis volutpat pretium. Integer luctus purus eu neque blandit, id rhoncus diam consectetur. Donec placerat sapien vel augue semper, consequat consequat eros
dictum. Fusce sagittis, nibh at scelerisque finibus, lorem purus aliquam dolor, at finibus quam dui ut dolor.
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vehicula iaculis volutpat. Nullam nibh mi, dapibus a nisl facilisis, consectetur gravida elit. Donec tempus tristique massa semper elementum. Nam mauris
massa, aliquam in dolor ut, porttitor cursus erat. Cras pretium egestas ipsum quis ornare. Nunc sit amet ornare odio.
</p>
<p>
Mauris molestie enim vitae magna venenatis fringilla. Nullam nisi dui, eleifend et erat a, sollicitudin fringilla risus. Integer molestie purus id urna tristique volutpat. Duis interdum pharetra arcu vitae consectetur. Nunc at suscipit quam. Nunc sit
amet gravida risus, malesuada eleifend libero. Aenean quis nibh libero. Morbi ut sapien nec erat sodales tempor at in magna. Etiam pretium velit mi, quis auctor sapien fringilla sit amet. Maecenas ornare, sapien et posuere tempor, nunc justo tempus
odio, ac sodales ipsum lacus quis nisi. Suspendisse viverra turpis at nibh blandit, id sollicitudin purus fermentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper volutpat nunc vehicula tincidunt. Phasellus vel urna id mi aliquam consequat non eget eros. Fusce rutrum lorem nunc, eu ultricies justo tempor sit amet. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Mauris ante velit, eleifend non nulla et, mollis blandit purus. Curabitur vehicula orci vel ultricies pretium. Donec cursus suscipit arcu, eget dignissim eros scelerisque at. Mauris a blandit
libero. Quisque quis vehicula orci, id dapibus ipsum. Maecenas urna purus, mattis et sollicitudin eget, ullamcorper quis enim. Maecenas sagittis mi vitae justo feugiat pretium. In quis elementum sapien. Integer consequat mi vitae nisl vulputate
feugiat. Curabitur rhoncus, lorem at fermentum sagittis, tellus metus sagittis metus, et ullamcorper massa mi sit amet metus. Mauris nec dictum orci, eu pellentesque mi. Proin maximus et lacus eget vestibulum.
</p>
<p>
In tempor erat nec tristique cursus. Quisque eleifend placerat lacinia. Suspendisse lectus nibh, congue non auctor non, lacinia et erat. Donec pellentesque mi ac sapien luctus, luctus laoreet quam ullamcorper. Donec consequat est neque, id elementum libero
iaculis sit amet. Fusce imperdiet in erat in imperdiet. Cras ullamcorper elit vel nisl efficitur ultricies. Suspendisse potenti. Quisque eu porta erat, a mattis turpis. Quisque aliquam nunc quis felis consectetur, ut interdum tortor sagittis.
Suspendisse posuere ipsum ut ipsum sagittis viverra. Vestibulum feugiat, turpis ut vehicula dignissim, ipsum lectus efficitur magna, facilisis condimentum mi nulla sed mi. Nullam nunc dui, elementum et tellus nec, facilisis convallis libero. Mauris
facilisis, magna ut vestibulum ornare, elit massa pellentesque arcu, sed laoreet nisi erat quis dolor.
</p>
<p>
Donec ut imperdiet nisi. Nullam molestie convallis erat convallis accumsan. Suspendisse in lectus ac orci aliquet consequat. Praesent eleifend, nisl quis vulputate mollis, dui erat dignissim tortor, non mattis felis enim quis magna. Fusce posuere ante
ac orci rutrum, ut varius lectus gravida. Curabitur tristique volutpat sodales. Fusce lobortis volutpat pretium. Integer luctus purus eu neque blandit, id rhoncus diam consectetur. Donec placerat sapien vel augue semper, consequat consequat eros
dictum. Fusce sagittis, nibh at scelerisque finibus, lorem purus aliquam dolor, at finibus quam dui ut dolor.
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vehicula iaculis volutpat. Nullam nibh mi, dapibus a nisl facilisis, consectetur gravida elit. Donec tempus tristique massa semper elementum. Nam mauris
massa, aliquam in dolor ut, porttitor cursus erat. Cras pretium egestas ipsum quis ornare. Nunc sit amet ornare odio.
</p>
<p>
Mauris molestie enim vitae magna venenatis fringilla. Nullam nisi dui, eleifend et erat a, sollicitudin fringilla risus. Integer molestie purus id urna tristique volutpat. Duis interdum pharetra arcu vitae consectetur. Nunc at suscipit quam. Nunc sit
amet gravida risus, malesuada eleifend libero. Aenean quis nibh libero. Morbi ut sapien nec erat sodales tempor at in magna. Etiam pretium velit mi, quis auctor sapien fringilla sit amet. Maecenas ornare, sapien et posuere tempor, nunc justo tempus
odio, ac sodales ipsum lacus quis nisi. Suspendisse viverra turpis at nibh blandit, id sollicitudin purus fermentum.
</p>
</div>
</body>
</html>
Before I begin, I'd like to say that I am aware of similar questions that have already been asked on this site. . .It is just that none of the provided answers have been successful in helping me find a solution.
Ok, so I am currently making an HTML page. . . Everything was going fine, and I was able to overcome all the problems I ran into. That is, until I came across this pesky white space on my page.
To help you understand, please run the following code, and scroll down past the last paragraph.
#import url(https://fonts.googleapis.com/css?family=Bitter:300,400);
#import url(https://fonts.googleapis.com/css?family=Raleway:400,300);
header {
background-image: url(https://wallpaperscraft.com/image/yellow_red_spots_background_abstract_65559_2048x1152.jpg);
height: 100vh;
width: 100vw;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
h1, h3 {
font-family: 'Raleway', sans-serif;
color: white;
}
h1 {
font-size: 6em;
}
h3 {
font-size: 2em;
}
html, body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
height: 100%;
}
p {
width: 70%;
margin: 0 auto 30px;
font-family: 'Bitter', san-serif;
color: white;
font-size: 2em;
text-align: center;
}
/*Below are the ids and classes*/
#parSectOne {
border-bottom: 8px solid white;
border-top: 8px solid white;
background-color: #CE6269;
}
#parSectTwo {
background-color: #75A3A9;
}
#info-right {
height: 50vh;
width: 50vw;
border-right: 2px solid black;
}
#info-right h2 {
font-family:'Raleway', sans-serif;
}
.pars {
padding-top: 60px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Welcome To This Page</h1>
<h3>It is nice to see you. . .</h3>
</header>
<div id="parSectOne" class="pars">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, enim ut tempor maximus,
diam massa auctor sapien, sit amet porta quam est eu ex. Vivamus dapibus purus quis nibh malesuada ullamcorper.
Proin lobortis molestie quam dignissim posuere. Praesent vitae iaculis neque, vitae interdum dui. Quisque eget neque purus.
Donec tempus nisi orci, eget venenatis nisi semper venenatis. Pellentesque diam risus, rutrum nec aliquet vitae, iaculis finibus ante
Nullam tincidunt eros magna, at finibus libero dictum id.
</p>
<p>
Praesent feugiat ante sed lectus tempor iaculis. Curabitur vulputate placerat lobortis. Morbi ultricies mollis vulputate.
Fusce aliquet luctus molestie. Sed consequat semper vulputate. In accumsan, lacus ac pellentesque feugiat, lectus purus elementum eros,
ut mollis tortor libero ac mi. Suspendisse porta velit non elementum suscipit. Donec porttitor ut neque eget cursus.
Integer malesuada aliquet porta. Donec at eros placerat, luctus lacus consectetur, rhoncus nunc. Integer nunc enim, dignissim nec eros eu, mollis sodales massa.
</p>
</div>
<div id="parSectTwo" class="pars">
<p>
Sed in sem tellus. Pellentesque eu lacus vitae orci accumsan volutpat imperdiet sed urna.
Etiam porttitor massa nec purus scelerisque, in maximus justo scelerisque. Pellentesque nec porttitor augue.
Etiam eleifend nisl laoreet augue faucibus laoreet id sed augue. Donec porttitor urna arcu, a rhoncus est tristique ac.
Fusce venenatis laoreet enim eget varius. Sed at nulla bibendum diam pellentesque posuere id ac purus.
Morbi cursus sapien vel sem tempor venenatis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
In suscipit placerat tellus eu maximus. Phasellus vestibulum, nunc non ultricies tincidunt, odio nibh rutrum est,
nec consequat augue risus et diam.
Fusce orci ex, tincidunt non egestas ut, pulvinar sit amet odio. Phasellus consequat egestas ante, ac porttitor nunc feugiat volutpat.
Praesent at ligula vel enim imperdiet gravida. Vestibulum eleifend odio vel fringilla vestibulum. Nulla facilisi.
Vestibulum et massa sodales, mollis felis ac, feugiat enim. Etiam vel scelerisque purus. Mauris a efficitur leo.
Donec sodales lectus id sapien facilisis hendrerit.
Fusce pretium, magna sed sodales ultricies, enim enim scelerisque nibh, sed posuere lectus ipsum sed nunc.
</p>
</div>
<div id="info-right">
<h2>Click The Button To Find What You are Looking For</h2>
<button type="button" id="button-left">Click Me</button>
</div>
</div>
</body>
</html>
As you can see, there is a white space between the last paragraph, and the h2. Upon using the inspector element in Chrome, I discovered that the h2 had a margin-top that fit right within the whitespace, so I decided to remove it. However, even after removal, the whitespace stayed the same. I also tried to give the last paragraph a margin-bottom of zero, but that also didn't do anything. . . Also, looking again through the chrome inspector element, I can't seem to find what is causing the problem.
I know the answer is probably a simple solution, but for the life of me, I just can't figure it out!
This white space is because of following two factors in your code:
Top margin of h2 inside #info-right.
Bottom margin of p inside #parSectTwo.
Clear both margins and this space will be removed. Read more about Collapsing Margins.
#import url(https://fonts.googleapis.com/css?family=Bitter:300,400);
#import url(https://fonts.googleapis.com/css?family=Raleway:400,300);
header {
background-image: url(https://wallpaperscraft.com/image/yellow_red_spots_background_abstract_65559_2048x1152.jpg);
height: 100vh;
width: 100vw;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
h1, h3 {
font-family: 'Raleway', sans-serif;
color: white;
}
h1 {
font-size: 6em;
}
h3 {
font-size: 2em;
}
html, body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
height: 100%;
}
p {
width: 70%;
margin: 0 auto 30px;
font-family: 'Bitter', san-serif;
color: white;
font-size: 2em;
text-align: center;
}
/*Below are the ids and classes*/
#parSectOne {
border-bottom: 8px solid white;
border-top: 8px solid white;
background-color: #CE6269;
}
#parSectTwo {
background-color: #75A3A9;
}
#info-right {
height: 50vh;
width: 50vw;
border-right: 2px solid black;
}
#info-right h2 {
font-family:'Raleway', sans-serif;
margin: 0;
}
#parSectTwo p:last-child {
margin-bottom: 0;
}
.pars {
padding-top: 60px;
}
<div id="wrapper">
<header>
<h1>Welcome To This Page</h1>
<h3>It is nice to see you. . .</h3>
</header>
<div id="parSectOne" class="pars">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, enim ut tempor maximus,
diam massa auctor sapien, sit amet porta quam est eu ex. Vivamus dapibus purus quis nibh malesuada ullamcorper.
Proin lobortis molestie quam dignissim posuere. Praesent vitae iaculis neque, vitae interdum dui. Quisque eget neque purus.
Donec tempus nisi orci, eget venenatis nisi semper venenatis. Pellentesque diam risus, rutrum nec aliquet vitae, iaculis finibus ante
Nullam tincidunt eros magna, at finibus libero dictum id.
</p>
<p>
Praesent feugiat ante sed lectus tempor iaculis. Curabitur vulputate placerat lobortis. Morbi ultricies mollis vulputate.
Fusce aliquet luctus molestie. Sed consequat semper vulputate. In accumsan, lacus ac pellentesque feugiat, lectus purus elementum eros,
ut mollis tortor libero ac mi. Suspendisse porta velit non elementum suscipit. Donec porttitor ut neque eget cursus.
Integer malesuada aliquet porta. Donec at eros placerat, luctus lacus consectetur, rhoncus nunc. Integer nunc enim, dignissim nec eros eu, mollis sodales massa.
</p>
</div>
<div id="parSectTwo" class="pars">
<p>
Sed in sem tellus. Pellentesque eu lacus vitae orci accumsan volutpat imperdiet sed urna.
Etiam porttitor massa nec purus scelerisque, in maximus justo scelerisque. Pellentesque nec porttitor augue.
Etiam eleifend nisl laoreet augue faucibus laoreet id sed augue. Donec porttitor urna arcu, a rhoncus est tristique ac.
Fusce venenatis laoreet enim eget varius. Sed at nulla bibendum diam pellentesque posuere id ac purus.
Morbi cursus sapien vel sem tempor venenatis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
In suscipit placerat tellus eu maximus. Phasellus vestibulum, nunc non ultricies tincidunt, odio nibh rutrum est,
nec consequat augue risus et diam.
Fusce orci ex, tincidunt non egestas ut, pulvinar sit amet odio. Phasellus consequat egestas ante, ac porttitor nunc feugiat volutpat.
Praesent at ligula vel enim imperdiet gravida. Vestibulum eleifend odio vel fringilla vestibulum. Nulla facilisi.
Vestibulum et massa sodales, mollis felis ac, feugiat enim. Etiam vel scelerisque purus. Mauris a efficitur leo.
Donec sodales lectus id sapien facilisis hendrerit.
Fusce pretium, magna sed sodales ultricies, enim enim scelerisque nibh, sed posuere lectus ipsum sed nunc.
</p>
</div>
<div id="info-right">
<h2>Click The Button To Find What You are Looking For</h2>
<button type="button" id="button-left">Click Me</button>
</div>
</div>
By using CSS selector p:last-child you can remove the bottom margin of the last paragraph of parSectTwosection
#parSectTwo p:last-child {
margin-bottom: 0;
}
And also remove top margin from h2
h2 {
margin-top: 0;
}
#import url(https://fonts.googleapis.com/css?family=Bitter:300,400);
#import url(https://fonts.googleapis.com/css?family=Raleway:400,300);
header {
background-image: url(https://wallpaperscraft.com/image/yellow_red_spots_background_abstract_65559_2048x1152.jpg);
height: 100vh;
width: 100vw;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
h1,
h3 {
font-family: 'Raleway', sans-serif;
color: white;
}
h1 {
font-size: 6em;
}
h2 {
margin-top: 0;
}
h3 {
font-size: 2em;
}
html,
body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
height: 100%;
}
p {
width: 70%;
margin: 0 auto 30px;
font-family: 'Bitter', san-serif;
color: white;
font-size: 2em;
text-align: center;
}
/*Below are the ids and classes*/
#parSectOne {
border-bottom: 8px solid white;
border-top: 8px solid white;
background-color: #CE6269;
}
#parSectTwo {
background-color: #75A3A9;
}
#parSectTwo p:last-child {
margin-bottom: 0;
}
#info-right {
height: 50vh;
width: 50vw;
border-right: 2px solid black;
}
#info-right h2 {
font-family: 'Raleway', sans-serif;
}
.pars {
padding-top: 60px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Welcome To This Page</h1>
<h3>It is nice to see you. . .</h3>
</header>
<div id="parSectOne" class="pars">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, enim ut tempor maximus, diam massa auctor sapien, sit amet porta quam est eu ex. Vivamus dapibus purus quis nibh malesuada ullamcorper. Proin lobortis molestie quam dignissim
posuere. Praesent vitae iaculis neque, vitae interdum dui. Quisque eget neque purus. Donec tempus nisi orci, eget venenatis nisi semper venenatis. Pellentesque diam risus, rutrum nec aliquet vitae, iaculis finibus ante Nullam tincidunt eros magna,
at finibus libero dictum id.
</p>
<p>
Praesent feugiat ante sed lectus tempor iaculis. Curabitur vulputate placerat lobortis. Morbi ultricies mollis vulputate. Fusce aliquet luctus molestie. Sed consequat semper vulputate. In accumsan, lacus ac pellentesque feugiat, lectus purus elementum
eros, ut mollis tortor libero ac mi. Suspendisse porta velit non elementum suscipit. Donec porttitor ut neque eget cursus. Integer malesuada aliquet porta. Donec at eros placerat, luctus lacus consectetur, rhoncus nunc. Integer nunc enim, dignissim
nec eros eu, mollis sodales massa.
</p>
</div>
<div id="parSectTwo" class="pars">
<p>
Sed in sem tellus. Pellentesque eu lacus vitae orci accumsan volutpat imperdiet sed urna. Etiam porttitor massa nec purus scelerisque, in maximus justo scelerisque. Pellentesque nec porttitor augue. Etiam eleifend nisl laoreet augue faucibus laoreet id
sed augue. Donec porttitor urna arcu, a rhoncus est tristique ac. Fusce venenatis laoreet enim eget varius. Sed at nulla bibendum diam pellentesque posuere id ac purus. Morbi cursus sapien vel sem tempor venenatis. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
In suscipit placerat tellus eu maximus. Phasellus vestibulum, nunc non ultricies tincidunt, odio nibh rutrum est, nec consequat augue risus et diam. Fusce orci ex, tincidunt non egestas ut, pulvinar sit amet odio. Phasellus consequat egestas ante, ac
porttitor nunc feugiat volutpat. Praesent at ligula vel enim imperdiet gravida. Vestibulum eleifend odio vel fringilla vestibulum. Nulla facilisi. Vestibulum et massa sodales, mollis felis ac, feugiat enim. Etiam vel scelerisque purus. Mauris
a efficitur leo. Donec sodales lectus id sapien facilisis hendrerit. Fusce pretium, magna sed sodales ultricies, enim enim scelerisque nibh, sed posuere lectus ipsum sed nunc.
</p>
</div>
<div id="info-right">
<h2>Click The Button To Find What You are Looking For</h2>
<button type="button" id="button-left">Click Me</button>
</div>
</div>
</body>
</html>
I'm working on a school project. I am new to html. My page won't scroll down once my content goes past the footer. How do I fix this? Why won't it scroll down? I would like to keep my footer at the bottom and I tried playing around with it but can't seem to get it right.
<!DOCTYPE html>
<html lang="en">
<head>
<title>TRIP TO LONDON</title>
<meta charset="utf-8">
<link href="layout.css" rel="stylesheet" type="text/css">
<style>
<!--
Jasmine
Web Programming 1
10/28/14
- ids can be used 1 time per html page
- classes can be used unlimited time per html page
- ids typically contain margin, width of the divs
- classes contain styles of the divs
WCAG Guidelines (Section 508) WAI > W3C
AA - Headings Navigation
AAA - large bodies of text paragraphs -->
body {
font-family: Helvetica;
}
#main{
width: 950px;
margin: 0px auto;
background-color: #ececec;
}
<!--center div-->
#banner{
width: 800px;
margin-left: 45px;
margin-right: 45px;
border: medium;
}
.bg {
background-color:#ececec;
font-size: 88.5%;
font-family: helvetica;
}
#content{
width: 850px;
margin-top: 50px;}
#left{
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
}
#bottom {
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
margin-top: 10px;
}
#right{
width: 300px;
float: right;
padding: 20px 10px 10px 20px;
}
#footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 8px;
background-color: #4285f4;
text-align: center;
color: white;
}
.grid1{
color: #000000;
background-color: #FFFFFF;
font-family: sans-serif;
box-shadow: 0px 2px 4px #888888;
}
.grid2{
color:#000000;
background-color: #FFFFFF;
border-style: dashed;
border-width: 5px;
border-color: #000000;
box-shadow: 0px 2px 4px #888888;
}
#banner1
{
background: #4285f4;
color: white;
position: fixed;
left: 0;
right: 0;
padding: 10px;
height: 30px;
text-align: center;
top: 0;
width: 100%;
font-family: Helvetica;
font-size: 18px;
}
</style>
</head>
<body id="body" class="bg">
<div id="main">
<div id="banner1">TRIP TO LONDON</div><!--close banner-->
<div id="content">
<div id="left" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.</div><!--close left-->
<div id="right" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.
</div><!--close right-->
<div id="bottom" class="grid1"> Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam. sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, elis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus bla.
</div>
</div><!--close content-->
<div id="footer">J.O. Copyright 2014</div><!--close footer-->
</div><!--close main-->
</body>
</html>
Your content is scrolled to the bottom of your page as it is supposed to do. You can't see it because you have your footer on top of your content with a fixed position. The simple solution is to put height on your footer and add the same height as padding to the content. Or just add some padding-bottom to #content like this. And add overflow: hidden to #content so it has height. If the parent is filled with floated children element it doesn't have height. So either add overflow: hidden; or use a clearfix :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>TRIP TO LONDON</title>
<meta charset="utf-8">
<link href="layout.css" rel="stylesheet" type="text/css">
<style>
<!--
Jasmine
Web Programming 1
10/28/14
- ids can be used 1 time per html page
- classes can be used unlimited time per html page
- ids typically contain margin, width of the divs
- classes contain styles of the divs
WCAG Guidelines (Section 508) WAI > W3C
AA - Headings Navigation
AAA - large bodies of text paragraphs -->
body {
font-family: Helvetica;
}
#main{
width: 950px;
margin: 0px auto;
background-color: #ececec;
}
<!--center div-->
#banner{
width: 800px;
margin-left: 45px;
margin-right: 45px;
border: medium;
}
.bg {
background-color:#ececec;
font-size: 88.5%;
font-family: helvetica;
}
#content{
width: 850px;
margin-top: 50px;
padding-bottom: 50px;
overflow: hidden;
}
#left{
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
}
#bottom {
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
margin-top: 10px;
}
#right{
width: 300px;
float: right;
padding: 20px 10px 10px 20px;
}
#footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 8px;
background-color: #4285f4;
text-align: center;
color: white;
}
.grid1{
color: #000000;
background-color: #FFFFFF;
font-family: sans-serif;
box-shadow: 0px 2px 4px #888888;
}
.grid2{
color:#000000;
background-color: #FFFFFF;
border-style: dashed;
border-width: 5px;
border-color: #000000;
box-shadow: 0px 2px 4px #888888;
}
#banner1
{
background: #4285f4;
color: white;
position: fixed;
left: 0;
right: 0;
padding: 10px;
height: 30px;
text-align: center;
top: 0;
width: 100%;
font-family: Helvetica;
font-size: 18px;
}
</style>
</head>
<body id="body" class="bg">
<div id="main">
<div id="banner1">TRIP TO LONDON</div><!--close banner-->
<div id="content">
<div id="left" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.</div><!--close left-->
<div id="right" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.
</div><!--close right-->
<div id="bottom" class="grid1"> Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam. sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, elis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus bla.
</div>
</div><!--close content-->
<div id="footer">J.O. Copyright 2014</div><!--close footer-->
</div><!--close main-->
</body>
</html>
if your content is going off too far below and you can't scroll it means the element containing the content isn't big enough. Try to set the element that has all the content with a larger height value (I'm guessing the body element in your case)
so in your css if:
height:800px
set it to
height:1200px
or enough to hold all the content