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.
Related
Beginner with HTML here. I've been getting a pretty funky error with my HTML script. When I display it, the footer looks it was formatted like an inline element. It is showing up on the side of my timeline rather than at the bottom of the page.
Here is a screen shot:
Webpage Screenshot
Here is the code:
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>About Mangetsu Budogu</title>
<style>
/*Total Body width must be greater than widths for content */
/*global scope css */
body{
width: 1080px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
.main_content{
float: left;
width: 620px;
margin: 10px;
}
/* Nav Bar CSS */
nav {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
border-radius: 25px;
width: 99%;
text-align: center;
}
nav a{
float: center;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover{
background-color: red;
}
nav li{
display: inline;
padding: 5px;
}
/* Timeline */
.timeline{
float: left;
width: 300px;
margin: 10px;
}
li{
margin: 10px 0;
}
/* Main Content*/
#main_heading{
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
footer {
display: block;
}
</style>
</head>
<header>
<center><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Sakai_Kamon.svg" width="200" height="200"/></center>
<nav>
<ul id="nav_li">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Classes</li>
<li>Contact</li>
</ul>
</nav>
</header>
<body>
<h1 id="main_heading">About Mangetsu Budogu</h1>
<article class="main_content">
<h2>Beginnings</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
<p>
Nam et ipsum ac est ornare mattis. Mauris aliquet consequat lorem id lacinia. Nunc vulputate mollis bibendum. Duis sed enim a turpis mollis consectetur vitae vel mi. Phasellus quis lectus velit. Morbi vel libero pulvinar tortor placerat placerat. Suspendisse id ante leo. Etiam eu facilisis enim. Cras lorem tellus, bibendum eget turpis vitae, porta blandit lorem. Nam ut dui eu mauris malesuada ultricies. Cras nec erat dictum, ultricies sem non, vestibulum arcu. Fusce varius imperdiet nulla eu convallis. Curabitur quis mattis felis, non pretium ex. </p>
<h2>The 1990s Era</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
</article>
<div class="timeline">
<h3>Mangetsu Budogu Timeline</h3>
<ul>
<li><time>1991</time>: Established Flagship Store in <strong>Kyoto, Japan, Nishijin District</strong></li>
<li>1995: Created first Kendogu Website in Japan</li>
<li>1997: Establishment of 2nd Store in <strong>Shinagawa District, Tokyo</strong></li>
<li>1999: Creation of the Mangetsu Budogu Reward Points</li>
<li>2001: Establishment of 3rd Store in <strong>Nakamura District, Nagoya</strong></li>
<li>2010: Creation of the Shingsengumi Line of Bogu</li>
<li>2011: First Overseas Store in Los Angeles, California</li>
</ul>
</div>
<footer>
© Mangetsu Budogu 2018
</footer>
</body>
</html>
You need to clear the float property you have assigned to <article class="main_content"> and <div class="timeline">. Just add this element before footer.
<div style="clear:both;"></div>
Your .main_content and the timeline are floating elements which don't span the whole width of the body, that's why the footer is displayed next to it (it "floats" next to the floating elements).
To avoid this, add clear: both to the footer CSS
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>
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
With the below code, it allows for a "code block" for code to stand out on. Is there a way that I can wrap, but not too tightly (20px border maybe?) the box around the text within? And related, is there a way to limit how far the code on the inside can go before being wrapped to the next line? This would allow me to limit the size of the code block to be 1000px
fiddle
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;
margin-bottom: 1.2em;
}
#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;
width: 40%;
}
You need to add white-space: pre-wrap; to the xmp tag.
I believe the xmp tag has been deprecated for a while. You should encode your text to convert the 'illegal' characters into html-entities. Many IDE's provide this functionality, or you could use some script or a online tool.
Also, when you use the pre tag, it is not possible make line-breaks automatic, that is exactly what the pre is for.
I suggest you alter your approach and have a look at something like this: http://code.google.com/p/google-code-prettify/
This way can also have the benefits of code coloring etc.