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
Related
I have some HTML that looks like this: https://jsfiddle.net/9uwmxLa8/
I can't get the footer to stay at the bottom and not overlap the text on the page. The footer should stay at the bottom of the page if there isn't enough content to force the footer below the window height. I have the first part right--but can't get it to not overlap; I know it's because of position: absolute--but everything I search online tells me this is necessary.
I want it to function like this: https://codepen.io/cbracco/pen/zekgx
Any ideas how to fix this?
<div class="container">
<div>
<h1>This is some long test content.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget sapien risus. Cras eleifend, diam quis tempus mattis, nunc leo vulputate metus, et rhoncus elit libero ac nisl. In ligula lectus, ultricies in pretium eget, accumsan non turpis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus molestie ultricies. Vivamus et libero et mauris rutrum hendrerit sed in leo. Fusce luctus lorem iaculis, mattis felis non, suscipit nisi. Integer tempus blandit est tempus ullamcorper.
Ut at risus eget arcu congue rhoncus sit amet pharetra turpis. Maecenas ultricies, ex eget egestas scelerisque, ante ipsum placerat mauris, vitae porta felis mauris dictum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Duis fringilla dolor a neque laoreet tristique. Donec non feugiat orci. Nulla nulla mauris, fermentum at arcu quis, venenatis consectetur odio. Vestibulum a risus non lorem ullamcorper sollicitudin. Praesent quis ante ipsum. Suspendisse odio ligula, tincidunt
vitae consectetur vel, posuere tincidunt odio. Donec at mollis neque. Sed ex felis, aliquam sed turpis eget, porta aliquet justo. Vivamus vestibulum libero id pulvinar egestas.
</p>
<p>
Quisque vestibulum urna eu blandit consectetur. Integer eget massa suscipit, scelerisque augue sed, mattis erat. Proin ut tincidunt nisi. Duis vestibulum congue accumsan. Vivamus a nisi tellus. Proin pretium neque eros, quis lacinia nisl pulvinar eget.
Quisque commodo urna eu nibh vulputate accumsan. Sed nec neque blandit, commodo metus sed, hendrerit orci. Nullam ullamcorper libero massa, vel pretium felis vulputate sed. Mauris in mauris pretium, accumsan erat quis, dapibus lacus.
</p>
<p>
Quisque arcu metus, ultricies sed urna a, gravida aliquam mauris. Nullam quis velit odio. Pellentesque dignissim odio tortor, at tempus nunc posuere et. In consequat eros a nunc varius, quis varius metus malesuada. Mauris viverra auctor elit quis hendrerit.
Donec risus ante, viverra et ante a, egestas faucibus purus. Integer semper id nulla eget vehicula. Aliquam a egestas leo. Suspendisse eu magna sit amet eros tempor ultrices. Quisque sed tempor purus, vitae egestas nunc. Cras congue nulla in sem
eleifend, sed pharetra ipsum volutpat. Etiam suscipit lacus ultricies dolor hendrerit fermentum. Pellentesque vestibulum in tellus ac blandit. In nec elit non eros tincidunt semper. Fusce sed leo eget ex laoreet fermentum sed vitae nibh. Aliquam
aliquam erat magna, sit amet gravida neque aliquam ac.
</p>
<p>
Phasellus vehicula, libero eget tempus tristique, lectus felis ornare erat, sit amet semper sapien sem ac nisl. Sed dignissim vulputate mauris, id imperdiet tellus tincidunt id. Proin eget risus a enim convallis pulvinar. In bibendum augue in tellus fermentum
sollicitudin. Proin finibus tellus lacinia hendrerit faucibus. Curabitur congue aliquam eros non condimentum. Nullam justo ex, pulvinar ac fringilla nec, ullamcorper in lorem ullamcorper in lorem ullamcorper in lorem. Quisque vestibulum urna eu
blandit consectetur.
</p>
</div>
<div class="footer">
<div>
This is a footer
</div>
</div>
</div>
SCSS:
p {
margin: 0 auto;
padding-top: 32px;
max-width: 75%;
font-size: 1.5em;
}
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: cyan;
text-align: center;
}
position: absolute takes the element out if the normal layout. You then use left, right, and bottom to stick the footer to the bottom, essentially putting it over the bottom of the page.
By taking out those lines, my fiddle seems to above what you're wanting. If you want the footer to not have a margin, turn the margin to 0. Absolute positioning is not how that's done.
https://jsfiddle.net/kLqp3my7/
Make the body 100% of your page, with a min-height of 100% too.
The footer is then given negative margin-top:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
You can create a footer that will stick to the bottom of the page fairly easy using flexbox
set the .container to be a flex container with display: flex;, and stack the flex items in a column with flex-direction: column;
then set the main content to flex: 1 which is shorthand for
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
this will make it so that it will grow to fill the space, which will push the footer to the bottom of the page.
When the main content hits the footer, it will push the footer off the page since its in a flex container.
$(".add-section").on("click", function(){
$("main").append("<div class='section s3'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div>");
});
* {
box-sizing: border-box;
}
html, body {
font-weight: 300;
font-size: 16px;
padding: 0;
margin: 0;
height: 100%;
}
.wrap {
display: flex;
min-height: 100%;
flex-direction: column;
}
header {
background: grey;
}
header .logo {
padding: 1.4rem;
font-size: 2rem;
}
main {
flex: 1;
}
.section {
font-size: 1.1rem;
padding: 1rem 2rem;
margin: 0;
background: #ccc;
}
footer {
background: grey;
padding: 1.2rem 1.4rem;
font-size: 1.2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class='wrap'>
<header>
<div class='logo'>
Flexbox Footer
</div>
</header>
<main>
<div class='section s1'>
<button class='add-section'>Add Section</button>
</div>
<div class='section s2'>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
</main>
<footer>
Footer
</footer>
</div>
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.
i am experimenting with html and css and trying to figure out how to make this work... I am just trying to make the #menu float to the right of the h1 but be on the same baseline so... but obviously float:right makes it float to top-right? any way to make it float to bottom-right or align with the bottom of the containing div?
here is the html:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<link rel="Stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<h1>Website.com</h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>About</li>
</ul>
</div>
</div>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis elit et augue pellentesque fermentum semper urna interdum. Nullam egestas augue ut risus molestie mollis ut sed dolor. Curabitur fermentum, lorem sed suscipit euismod, diam urna vulputate sapien, ac venenatis velit eros sed leo. Duis venenatis, metus at scelerisque fringilla, neque arcu dignissim arcu, quis sodales lorem mauris eget tellus. Phasellus fermentum est eget erat pretium mollis. Cras eu nunc dui, sed fermentum libero. Vivamus posuere pellentesque tellus in interdum. Vestibulum eleifend fringilla enim, in vehicula justo tristique a. Aenean congue vestibulum iaculis. Sed tristique interdum lectus, vel aliquam nisi fringilla ac. Mauris ligula nisl, gravida id consequat in, vestibulum at risus. Vivamus vitae massa lorem, vel molestie tellus. Nulla et magna orci. Nunc turpis ipsum, facilisis eget tristique sit amet, scelerisque quis ligula. Mauris in molestie purus. Cras eget magna vel enim imperdiet aliquam.</p>
<p>Vestibulum vel eros lacus, vel viverra magna. Duis mollis nibh ut erat accumsan ut pulvinar ipsum dapibus. Aliquam vehicula tempus fermentum. Morbi ut turpis sem, pretium sodales libero. Vestibulum dapibus, ligula in molestie scelerisque, lacus est aliquam elit, ut vulputate sapien nisl vitae elit. Cras pulvinar mi nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in est orci. Ut rutrum lobortis quam vitae commodo. Maecenas dapibus aliquam ante eget mattis. Proin justo eros, bibendum quis scelerisque eget, fermentum eu purus. Vivamus viverra ligula a dolor iaculis ullamcorper. Aliquam erat volutpat. Nunc libero nulla, sodales at dictum vel, tempus quis est.</p>
<p>Nullam pharetra tincidunt lectus ac sollicitudin. Duis in venenatis eros. Phasellus malesuada quam vel sapien ultricies tincidunt. Duis condimentum posuere semper. Vivamus eleifend libero eget ligula egestas adipiscing. Proin dapibus leo non urna pellentesque convallis. Suspendisse massa leo, semper vitae tincidunt at, mattis et sapien. Maecenas consequat hendrerit odio et feugiat. Sed dignissim massa a leo sollicitudin imperdiet consequat purus vehicula. Mauris sit amet nulla a turpis porta accumsan. Morbi interdum pellentesque massa, vel accumsan massa aliquam quis. Sed sed ligula neque. In hac habitasse platea dictumst. Curabitur vehicula scelerisque ligula non tincidunt.</p>
<hr />
<p id="footer">Use of this site constitutes acceptance of our User Agreement and Privacy Policy. © 2010 Website.com. All rights reserved.</p>
</body>
</html>
and here is the css:
body
{
font-family: verdana, sans-serif;
min-width: 800px;
}
h1
{
display: inline;
font-variant: small-caps
}
h1 a
{
color: #090;
text-decoration: none;
}
h1 a:hover
{
color: #0A0;
}
#menu
{
float: right;
display: inline;
margin: 0;
padding: 0;
font-variant: small-caps;
}
#menu ul
{
margin: 0;
padding-left: 0;
float: left;
font-weight: bold;
}
#menu ul li
{
float: left;
display: inline;
}
#menu ul li a
{
color: #090;
background-color: #F3F3F3;
padding: 2px 6px 4px 6px;
text-decoration: none;
}
#menu ul li a:hover
{
font-weight: bolder;
color: #0A0;
background-color: #F3F3F3;
border-bottom: 4px solid #0A0;
padding-bottom: 0;
}
#footer
{
text-align: center;
font-size: x-small;
}
here is what is looks like now:
thanks for help!
I haven't looked into this much, but if you set the containing div's position: relative, you can just make the ul position: absolute; bottom: 0; right: 0 and it should go where you want it.
Example:
div {position: relative}
ul {position: absolute; bottom: 0; right: 0}
li {float: left; list-style: none}
--
<div>
<h1>Header</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Etc...</li>
</ul>
</div>
There's no property floating it bottom-right or top-right. But without changing your html structure you can just add a top margin to your menu div
#menu {
....
margin-top:20px;
}
You can use table:
<table id="title">
<tr>
<td>
<h1>Website.com</h1>
</td>
<td>
<div id="menu">
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>About</li>
</ul>
</div>
</td>
</tr>
</table>
And add this into your CSS file:
#title
{
width:100%;
}
#title td+td
{
text-align:right;
vertical-align:center;
}
Vertical align is default set to center, so you need not to set it.
Or if you don't want to use table, you can just set padding-top:10px; into #menu ul.