According to a book, I have to use the CSS style like "#navigation ul li.sub:hover ul{display: block;}" to display a submenu. However, it isn't run as I expect, I have to code the other style like "#navigation ul li.sub:hover li{display: block;}", which leads to run. Please help me expalin this little change and give me your advice about creating a 2 or more-tier navigation bar!
/* the styles for the elements */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
width: 800px;
margin: 0 auto;
border: 3px solid #931420;
}
#body-background-color {
background-color: #fffded;
}
/* the styles for the header */
#header-gradient{
background-image: linear-gradient(45deg, #f6bb73 0%, #f6bb73 30%, white 50%, #f6bb73 80%);
}
#header-border{
border-bottom: 3px solid #931420;
padding-top: 1.5em;
padding-bottom: 2em;
}
header img {
float: left;
padding-left: 30px;
padding-right: 30px;
}
header h2{
font-size: 170%;
color: #800000;
}
header h3{
font-size: 130%;
font-style: italic;
}
.shadow{
color:#800000;
text-shadow: -2px -2px 4px yellow;
}
/* the style for navigation nemu */
#navigation ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation ul li{
float: left;
position: relative;
}
#navigation ul li a{
display: block;
width: 160px;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
}
#navigation ul li.sub ul{
position: absolute;
}
#navigation ul li.sub ul li{
float: none;
display: none;
position: relative;
}
#navigation ul li.sub:hover li{
display: block;
}
#navigation ul li.sub li.sub2 ul{
position: absolute;
top: 0;
right: -100%;
display: none;
}
#navigation ul li.sub li.sub2 ul li{
position: relative;
}
#navigation ul li.sub li.sub2:hover ul{
display: block;
}
#navigation ul li.sub li.sub2 li.sub3 ul{
display: none;
position: absolute;
top: 0;
}
#navigation ul li.sub li.sub2 li.sub3:hover ul{
display: block;
}
/* the styles for the main section */
main {
clear: left;
}
main h2{
font-size: 130%;
color:#800000;
padding-top: .5em;
padding-bottom: .25em;
}
/* the styles for the aside */
aside{
width: 215px;
float:right;
padding-left: 20px;
padding-bottom: 20px;
}
aside img{
padding-bottom: 1em;
}
aside h3{
font-size: 105%;
padding-bottom: .25em;
}
/* the styles for the section */
section{
width: 525px;
float: right;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
section p{
padding-bottom: .5em;
}
section q{
padding-left: 2em;
padding-right: 2em;
font-style: italic;
}
section h1{
font-size: 150%;
padding-top: .5em;
padding-bottom: .25em;
}
section article{
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
}
section article h2{
padding: 0;
}
section article h3{
font-size: 105%;
padding-bottom: .25em;
}
section article img{
float: right;
margin: .5em;
border: 1px black;
}
section ul{
padding-bottom: .25em;
padding-left: 1.25em;
list-style: circle
}
section li:hover, section li:focus{
font-style: italic;
}
section li{
padding-bottom: .35em;
}
/* the styles for the footer */
footer p{
text-align: center;
color: white;
padding: 1em;
}
#footer-background{
clear: both;
border: 3px solid #931420;
background-color: #931420;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="body-background-color">
<header>
<div id="header-gradient">
<div id="header-border">
<img src="images/paisley-town-hall.jpg" alt="the logo of the town hall" height="100">
<h2>San Joaquin Valley Town Hall</h2>
<h3>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h3>
</div>
</div>
</header>
<nav id="navigation">
<ul>
<li class="current">Home</li>
<li class="sub">About US
<ul>
<li>Our history</li>
<li>Board of Directors</li>
<li class="sub2">Past Speakers
<ul>
<li class="sub3">2015
<ul>
<li>Mr A</li>
<li>Mr B</li>
<li>Mrs C</li>
<li>Mrs D</li>
</ul>
</li>
<li>2016</li>
<li>2017</li>
</ul>
</li>
<li>Contact Information</li>
</ul>
</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Ticket</li>
</ul>
</nav>
<main>
<section>
<h2>Our Mission</h2>
<p>San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned, thought-provoking speakers who inform, educate, and entertain our audience! As one or our members told us:</p>
<p><q>Each year I give a ticket package to each of our family members. I think of it as the gift of knowledge...and that is priceless.</q></p>
<h1>Speaker of the Month</h1>
<article>
<h2>Fossil Threads in the Web of Life</h2>
<img src="images/sampson_dinosaur.jpg" alt="Sampson beside dinosaur" width="230" height="240">
<h3>February<br>Scott Sampson</h3>
<p>
What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.</p>
<p>Read more. <b>Or play video.</b></p>
</article>
<h2>Our Ticket Packages</h2>
<ul>
<li>Season Package: $95</li>
<li>Patron Package: $200</li>
<li>Single Speaker: $25</li>
</ul>
</section>
<aside>
<h2>Guest speakers:</h2>
<h3>October<br> Jeffrey Toobin</h3>
<img src="images/toobin75.jpg" alt="Toobin's portrait" width="70" height="70">
<h3>November<br>Andrew Ross Sorkin</h3>
<img src="images/sorkin75.jpg" alt="Sorkin's portrati" width="70" height="70">
<h3>January<br>Amy Chua</h3>
<img src="images/chua75.jpg" alt="Chua's portrait" width="70" height="70">
<h3>February<br>Scott Sampson</h3>
<img src="images/sampson75.jpg" alt="Sampon's portrait" width="70" height="70">
</aside>
</main>
<footer>
<div id="footer-background">
<p>© 2018, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</div>
</footer>
</div>
</body>
</html>
strong text
That's because the display: none is set at #navigation ul li.sub ul li.
So I removed display: none from #navigation ul li.sub ul li and added display: none to #navigation ul li.sub ul.
Also I moved display: block from #navigation ul li.sub:hover li to #navigation ul li.sub:hover ul.
/* the styles for the elements */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
width: 800px;
margin: 0 auto;
border: 3px solid #931420;
}
#body-background-color {
background-color: #fffded;
}
/* the styles for the header */
#header-gradient{
background-image: linear-gradient(45deg, #f6bb73 0%, #f6bb73 30%, white 50%, #f6bb73 80%);
}
#header-border{
border-bottom: 3px solid #931420;
padding-top: 1.5em;
padding-bottom: 2em;
}
header img {
float: left;
padding-left: 30px;
padding-right: 30px;
}
header h2{
font-size: 170%;
color: #800000;
}
header h3{
font-size: 130%;
font-style: italic;
}
.shadow{
color:#800000;
text-shadow: -2px -2px 4px yellow;
}
/* the style for navigation nemu */
#navigation ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation ul li{
float: left;
position: relative;
}
#navigation ul li a{
display: block;
width: 160px;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
}
#navigation ul li.sub ul{
position: absolute;
}
/* ADD */
#navigation ul li.sub ul {
display: none;
}
/*******/
#navigation ul li.sub ul li{
float: none;
/* display: none; */
position: relative;
}
/*
#navigation ul li.sub:hover li{
display: block;
}
*/
/* ADD */
#navigation ul li.sub:hover ul {
display: block;
}
/*******/
#navigation ul li.sub li.sub2 ul{
position: absolute;
top: 0;
right: -100%;
display: none;
}
#navigation ul li.sub li.sub2 ul li{
position: relative;
}
#navigation ul li.sub li.sub2:hover ul{
display: block;
}
#navigation ul li.sub li.sub2 li.sub3 ul{
display: none;
position: absolute;
top: 0;
}
#navigation ul li.sub li.sub2 li.sub3:hover ul{
display: block;
}
/* the styles for the main section */
main {
clear: left;
}
main h2{
font-size: 130%;
color:#800000;
padding-top: .5em;
padding-bottom: .25em;
}
/* the styles for the aside */
aside{
width: 215px;
float:right;
padding-left: 20px;
padding-bottom: 20px;
}
aside img{
padding-bottom: 1em;
}
aside h3{
font-size: 105%;
padding-bottom: .25em;
}
/* the styles for the section */
section{
width: 525px;
float: right;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
section p{
padding-bottom: .5em;
}
section q{
padding-left: 2em;
padding-right: 2em;
font-style: italic;
}
section h1{
font-size: 150%;
padding-top: .5em;
padding-bottom: .25em;
}
section article{
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
}
section article h2{
padding: 0;
}
section article h3{
font-size: 105%;
padding-bottom: .25em;
}
section article img{
float: right;
margin: .5em;
border: 1px black;
}
section ul{
padding-bottom: .25em;
padding-left: 1.25em;
list-style: circle
}
section li:hover, section li:focus{
font-style: italic;
}
section li{
padding-bottom: .35em;
}
/* the styles for the footer */
footer p{
text-align: center;
color: white;
padding: 1em;
}
#footer-background{
clear: both;
border: 3px solid #931420;
background-color: #931420;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="body-background-color">
<header>
<div id="header-gradient">
<div id="header-border">
<img src="images/paisley-town-hall.jpg" alt="the logo of the town hall" height="100">
<h2>San Joaquin Valley Town Hall</h2>
<h3>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h3>
</div>
</div>
</header>
<nav id="navigation">
<ul>
<li class="current">Home</li>
<li class="sub">About US
<ul>
<li>Our history</li>
<li>Board of Directors</li>
<li class="sub2">Past Speakers
<ul>
<li class="sub3">2015
<ul>
<li>Mr A</li>
<li>Mr B</li>
<li>Mrs C</li>
<li>Mrs D</li>
</ul>
</li>
<li>2016</li>
<li>2017</li>
</ul>
</li>
<li>Contact Information</li>
</ul>
</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Ticket</li>
</ul>
</nav>
<main>
<section>
<h2>Our Mission</h2>
<p>San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned, thought-provoking speakers who inform, educate, and entertain our audience! As one or our members told us:</p>
<p><q>Each year I give a ticket package to each of our family members. I think of it as the gift of knowledge...and that is priceless.</q></p>
<h1>Speaker of the Month</h1>
<article>
<h2>Fossil Threads in the Web of Life</h2>
<img src="images/sampson_dinosaur.jpg" alt="Sampson beside dinosaur" width="230" height="240">
<h3>February<br>Scott Sampson</h3>
<p>
What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.</p>
<p>Read more. <b>Or play video.</b></p>
</article>
<h2>Our Ticket Packages</h2>
<ul>
<li>Season Package: $95</li>
<li>Patron Package: $200</li>
<li>Single Speaker: $25</li>
</ul>
</section>
<aside>
<h2>Guest speakers:</h2>
<h3>October<br> Jeffrey Toobin</h3>
<img src="images/toobin75.jpg" alt="Toobin's portrait" width="70" height="70">
<h3>November<br>Andrew Ross Sorkin</h3>
<img src="images/sorkin75.jpg" alt="Sorkin's portrati" width="70" height="70">
<h3>January<br>Amy Chua</h3>
<img src="images/chua75.jpg" alt="Chua's portrait" width="70" height="70">
<h3>February<br>Scott Sampson</h3>
<img src="images/sampson75.jpg" alt="Sampon's portrait" width="70" height="70">
</aside>
</main>
<footer>
<div id="footer-background">
<p>© 2018, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</div>
</footer>
</div>
</body>
</html>
My website is working great on most browsers but for some reason Chrome is showing my navigation items outside of the header bar. I'm not sure which part of my CSS is at fault here and why it is being interpreted differently between browsers. Help would be appreciated. You need to look at it with screen size of 1100px or higher to see what I mean - lower than that and it turns into responsive navigation button.
Here's a link to show you: http://imgur.com/m5sVBww
body {
margin: 0;
line-height: 1.428;
background-color:#956396;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: #ffffff;
background: #956396;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
border-radius: 10px;
}
.show-menu:hover {
background: #9b729b;
}
#extra {
background: #ffffff;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
#extra2 {
background: #956396;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
position: relative;
top: 5px;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: white;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
position: relative;
top: 20px;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#956396;
margin-top: 28px;
padding-left: 35px;
padding-right: 35px;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
#extra {
clear: both;
}
}
<head>
<meta charset="utf-8">
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div> Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>Home</li>
<li>Customer Research</li>
<li>Business Improvement</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div>
</body>
</html>
I have a "hamburger" mobile navigation button that when clicked brings up a div titled #navigation. However, due to where the div is positioned (it is in other divs) the div does not extend to 100% of the width of the document, just 100% of the width of the container div.
Not only is this a problem but there is also a secondary issue because the navigation div also overlaps slightly with both the header div and the div below it. I'd rather it push the header up and the div below it down.
Whilst I could take this div out of the container and possibly fix the problems by placing it elsewhere, that then causes problems with the navigation on the full size version of the page then as the #navigation div is the same for both versions of the page, just different styling. Here's the code.
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
}
.show-menu:hover {
background: #ac1111;
}
#extra {
background: #222922;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#333333;
top: 0;
left: 0;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
}
<!doctype html>
<head>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async>
</script>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</div>
Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>
<a href="#" class="current">
Home
</a>
</li>
<li>
<a href="#">
Customer Research
</a>
</li>
<li>
<a href="#">
Business Improvement
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="extra">
<div class="wrap">
Test
</div>
</div>
</body>
</html>
you could add position: relative; to #header and position: absolute; to #navigation plus top: 69px /*adjust to your needs*/ inside #media only screen and (max-width : 920px) {}
the absolute position takes it out of the flow.
Is there a better way of making footer menu for responsive? rather than duplicating and display: none; in the css?
Here are my attempts:
<header class="row">
<div class="container">
<div class="col-12 columns">
<img src="images/logo.png" alt="" class="logo">
Navigation
<nav role="primary" >
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
Footer nav. Commented out the nav for the purpose of this question.
<nav role="secondary_menu">
<!-- <ul id="nav2">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav> -->
<footer id="footer">
<div class="container">
<p>Created by: </p>
</div>
</footer>
CSS:
a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}
nav[role="primary"] ul{
list-style-type: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}
.container .columns{
float: left;
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}
.row{
float: left;
clear: both;
width: 100%;
}
.columns.col-12 { width: 100%; }
So the codes above shows when the screen is below 600px however this way it pushes the footer the menu rather than at the bottom, Sure I positioned the footer absolute but it just sits above the menu rather than under it. So I made another attempt which I duplicated the nav and just hiding the when its below 600px.
position:none
position:absolute
Trying to achieve without duplicating and remove whitespace
I saw your main nav was set to position: absolute. I would suggest looking at CSS templates to see how they structure things like footers. For example, http://bootswatch.com/default/ Try this CSS:
a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}
nav[role="primary"] ul{
list-style-type: none;
bottom: 0;
left: 0;
width: 100%;
}
nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}
.container .columns{
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}
.row{
margin-right: -15px;
margin-left: -15px;
clear: both;
width: 100%;
}
.columns.col-12 { width: 100%; }
I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.