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>
Related
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 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>
So I have two divs, and am trying to create a parallax effect. So pretty much, when I scroll I want .collapse to be hidden behind .content. My problem here is that when I add position: fixed; to .collapse, the div is completely hidden. But when it isn't set to position: fixed;, it just acts like a div below a div, no parallax effect. Here is a JSFiddle.
HTML
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">
Lorem ipsum dolor sit amet.
</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, …</p>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.collapse {
background-image: url('../img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
left: 0;
right: 0;
z-index: -9999;
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
z-index: 9999;
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
Your example code suffers from a number of problems, all of which contribute to the confusion, and correcting one of them will not make much of a difference. That's why each of the comments above, while all valuable, appear not to do much by themselves.
The background picture to collapse, given as '../img/bg.jpg', resolves to 'http://fiddle.jshell.net/obgpkLLq/1/img/bg.jpg', which doesn't exist. As a result,collapse is white on white; invisible.
The z-index in content doesn't work, because content isn't positioned.
Also because content isn't positioned, it starts at the top of the screen, partially behind the nav bar and fully in front of collapse
The nav bar is positioned, but it doesn't have a z-index. This will cause problems later after we've corrected the content positioning.
None of the positioned sections have top properties, which will cause all of them to end up at the top of the window.
All these problems need to be solved before the page looks like you want.
In the snippet, I have simplified the nav bar somewhat, because its CSS was distracting from the main issues. Also, assuming that the nav bar needs to be in front of everything, I changed the z-indexes to 0 for collapse, 1 for content and 2 for the nav bar.
body,
h1,
p {
margin: 0
}
.nav {
margin-bottom: 20px;
margin-left: 0;
background-color: #fff;
height: 60px;
width: 100%;
position: fixed;
box-shadow: 0px 5px 5px #888888;
border-top: 1px solid #ccccff;
z-index:2; /* added */
}
.collapse {
background-image: url('http://lorempixel.com/940/400'); /* changed; needs to change back! */
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
top: 60px; /* added */
left: 0;
right: 0;
z-index: 0; /* changed */
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
position: relative; /* added */
top: 460px; /* added */
z-index: 1; /* changed */
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
<!-- Navigation -->
<div class="nav">
This is the nav bar
</div>
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">Lorem ipsum dolor sit amet.</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, tempor ut vestibulum in, varius id neque. Etiam nisl eros, posuere ac odio at, porta tincidunt ligula. Curabitur id auctor libero. Cras lacinia est ut laoreet egestas. Mauris
volutpat lectus in pellentesque facilisis. Sed lobortis enim eu elit aliquam pellentesque. Mauris ultrices, felis ut dapibus imperdiet, sem sem lobortis arcu, at rhoncus massa mauris a est. Aliquam erat volutpat. Nam ac lorem odio. Pellentesque
sodales, erat nec dictum fermentum, purus turpis sollicitudin arcu, ac imperdiet urna nunc ultrices diam. Nulla imperdiet leo nulla, a iaculis neque blandit venenatis. Morbi ipsum urna, finibus vitae ultrices ut, venenatis in arcu. Nullam et arcu
efficitur, viverra orci id, malesuada elit. Sed purus nisi, mollis at maximus et, mollis ut arcu. Donec id porta ipsum, vel tincidunt odio. In nec egestas ligula, at maximus eros. Ut consectetur consectetur velit, non maximus quam blandit ac. Cras
id vulputate arcu. Donec suscipit luctus est, faucibus iaculis ligula convallis id. Pellentesque nisl quam, interdum et blandit vel, ultrices et metus. Morbi cursus, odio non tempor vehicula, quam justo rhoncus purus, at interdum nisl justo at ante.
Aliquam cursus sit amet diam non maximus. Morbi dolor lorem, fermentum eget suscipit ac, pellentesque ut quam. Cras sit amet mi sagittis, ultricies lectus id, condimentum eros. Etiam mattis ligula nunc, vitae pulvinar urna molestie et. Nulla ex
lorem, viverra sed interdum id, dictum in dui. Nulla pellentesque fermentum urna eget aliquet. Morbi at condimentum augue, id lacinia dui. Etiam non lacus lorem. Duis sit amet nunc iaculis, feugiat lorem in, ultricies orci. Donec ornare quam sed
faucibus vehicula. Integer in felis ac orci congue facilisis quis et urna. Etiam sed tempus mi, eget congue quam. Nullam sodales pellentesque orci ut varius. In semper, erat non tincidunt feugiat, mauris massa hendrerit purus, eget pharetra diam
dolor sit amet purus. Sed id sapien ut nulla luctus maximus a ac lacus. In hac habitasse platea dictumst. Sed fringilla orci sapien, et facilisis velit vulputate in. Cras blandit id lectus eget vehicula. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Praesent egestas elit ac tempus lacinia. Cras efficitur facilisis tortor ut commodo. In porttitor mollis pellentesque. Mauris et tempus turpis. Etiam tincidunt diam eget ornare suscipit. Duis condimentum
velit sollicitudin massa interdum tristique. Cras risus libero, blandit ac ultricies sed, scelerisque sed massa. Nulla eu lobortis tellus. Suspendisse lorem nulla, blandit non pretium maximus, tempus ut urna. Nunc magna augue, iaculis at libero
eu, pellentesque vulputate est. Maecenas facilisis libero in odio fringilla, nec placerat erat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut turpis venenatis, dapibus ligula ac, ornare lacus.
Etiam gravida orci eu tortor gravida, sit amet gravida eros tincidunt. Duis a turpis in ex faucibus sodales at sit amet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed blandit tellus tellus,
nec ornare ipsum ornare non. Maecenas sed dictum quam. Nunc tellus eros, feugiat quis porttitor nec, rutrum eu nisl. Aenean vel blandit neque. Nullam congue justo risus, malesuada congue sem ultricies a. Phasellus dictum magna eget est commodo,
a tincidunt erat mollis. Mauris luctus ante vel hendrerit porttitor. Donec egestas, felis quis sodales hendrerit, eros mauris cursus diam, eleifend bibendum justo neque sed lectus. Fusce feugiat eget ligula at elementum. Vestibulum tempus ipsum
ipsum, et dignissim augue commodo vitae. Nam at dolor in elit dignissim semper at fringilla elit. In congue, nunc ut malesuada bibendum, nunc urna varius nunc, vel sollicitudin purus turpis at ligula. Nullam sed ultricies nunc, eu ornare augue.
Nulla sit amet arcu et lorem tristique tincidunt vitae a urna. Praesent nec eros mollis diam vestibulum cursus faucibus eu velit. Phasellus at justo eget diam rutrum porttitor at ut nibh. Fusce tempor nisi ac dapibus congue. Mauris luctus, urna
eget gravida varius, quam eros pellentesque elit, et eleifend ligula elit quis elit. Fusce sed lacus sed justo vulputate tempus. Praesent auctor ornare neque, eget vehicula nisl vehicula in. Nunc urna purus, placerat eu ipsum at, bibendum consequat
ante. Curabitur in pharetra tellus. Sed ac vehicula lectus. Curabitur feugiat massa nec erat viverra rhoncus vitae quis libero. Donec sed purus porttitor orci maximus semper laoreet vel mauris. Duis malesuada scelerisque enim sed facilisis. Mauris
laoreet, urna sit amet pulvinar euismod, massa est commodo nulla, vel volutpat risus enim vitae leo. Donec viverra iaculis odio et tincidunt. Integer eleifend fermentum cursus. Praesent diam velit, aliquam sit amet mauris pretium, dictum scelerisque
felis. Donec fermentum porta libero nec vehicula. Ut vitae porta quam. Aliquam erat volutpat. Nullam a felis nec libero egestas consectetur. Pellentesque sit amet eros vel libero iaculis tempor vel a ex. Morbi eu dolor nec nunc laoreet hendrerit
in vitae ante. Nulla facilisi. Nam condimentum massa sit amet tortor pulvinar venenatis. Morbi gravida quam in turpis convallis, at egestas metus efficitur. Integer porta lectus eu vulputate dictum. Nunc mollis leo aliquam tortor cursus lobortis.
Ut finibus nisl nec feugiat molestie. Mauris urna massa, commodo ut risus id, interdum pellentesque mauris. Sed vulputate maximus varius. Nulla facilisi. Morbi ultricies elit magna, nec egestas nulla egestas id.</p>
</div>
</div>
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
I have the following code. Jfiddle is here. As seen, the bottom borders, what resemble <HR> tags extend the entire length of the page.
I would like to limit the borders of <h1> and <h2> tags to be only 30% of the page. While <h3> tags remain extending across the entire page. Is this possible with css?
EDIT: with a follow up question, how would I change the css on the <h3> tag so that under the border is roughly one line of white space the same size of the font as <h3>?
HTML
<HTML>
<HEAD>
<TITLE>Sample Wiki Page</TITLE>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<DIV id='content'>
<h3>Main Title</h3>
<h2>Sub Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.
Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo, accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum arcu non egestas.
</p>
<h2>Code Section</h2>
<pre>
<xmp>
<HTML>
<HEAD>
<TITLE>Sample Wiki Page</TITLE>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<h3>Main Title</h3>
<h2>Sub Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut
suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum
ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi
semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar
justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros
pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia
tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere
nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet
mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.
Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus
fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis
augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor
a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem
. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo,
accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices
placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum
arcu non egestas.
<h2>Code Section</h2>
<pre>
</pre>
</BODY>
</HTML>
</xmp>
</pre>
</DIV>
</BODY>
</HTML>
CSS
#content pre {
padding: 1em;
border: 1px dashed #2f6fab;
color: black;
background-color: #f9f9f9;
white-space: pre;
margin: 1em 0px;
display: block;
font-family: monospace,Courier;
line-height: 1.1em;
width:70%;
}
#content h3{
font-size: 188%;
line-height: 1.2em;
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
#content h1, h2 {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
You can use width: 30% for your first question, and margin-bottom: 1.2em for your second.
Here is your fiddle.
You can do something like this. http://jsfiddle.net/n5qRS/1/
<h1><span>Hello World</span></h1>
css
h1 span {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
display: block;
width: 30%;
}
as for the second question, add a margin bottom to the h3 the same as the line height of the h3.
It is very odd that you are having your h3 as a the Main Title and h2 as the subtitle (that is reversed of how it "should" be). This fiddle uses pseudo-elements to get the border.
#content h1:after, h2:after {
content: '';
display: block;
width: 30%;
height: 0;
margin: 0 auto;
border-bottom: 1px solid #aaa;
}
The margin-bottom is added in that fiddle to the h3 for your follow-up.