I am creating a web page with HTML and CSS, however, when I created the footer CSS it appears in the middle of the page. I've gone through w3Schools but I couldn't find anything on it.
The footer should be on the bottom of the page. However, it is in the middle.
I'd like it to keep it on the bottom of the page as a footer should do.
Would anyone know how to fix this issue?
I've attached my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="The Dusty Garage">
<title> The Dusty Garage </title>
<style>
html,
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}
#wrapper {
margin: auto;
width: 100%;
max-width: 100%;
}
#navigationbar {
clear: both;
height: 50px;
max-width: 100%;
background-color: cornflowerblue;
}
#companyname {
margin: 0;
float: left;
padding: 5px;
font-size: 12px;
text-decoration: none;
}
#companyname a {
color: black;
text-decoration: none;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
nav ul li {
color: #fff;
display: block;
float: left;
padding: 1rem;
border-right: 1px solid #bbb;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
nav ul li a {
display: block;
text-decoration: none;
color: white;
}
nav ul li:hover,
nav ul li:focus-within {
background-color: royalblue;
cursor: pointer;
}
nav ul li:focus-within a {
outline: none;
}
nav ul li ul {
background-color: cornflowerblue;
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
white-space: nowrap;
}
nav ul li:hover>ul,
nav ul li:focus-within>ul,
nav ul li ul:hover,
nav ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
nav ul li ul li {
background-color: cornflowerblue;
width: 100%;
display: inline-block;
}
nav li:last-child {
border-right: none;
}
nav .active {
background-color: black;
}
/* Navigation CSS End */
/* Banner Image CSS Start */
.hero {
height: 70vh;
display: block;
justify-content: center;
align-items: center;
text-align: center;
color: white;
background-image: url(https://memberpress.com/wp-content/uploads/2015/06/Google-tools#2x-1.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.hero>* {
color: black;
}
.hero>h2 {
font-size: 3rm;
padding-bottom: 20rem;
text-align: center;
vertical-align: middle;
}
/* HERO IMAGE BANNER END */
/* START SECTION CSS FOR BROWSE AND SELL */
.browsesellarea {
display: flex;
flex-wrap: wrap;
}
/* Heading Style */
.browsesellarea-heading {
position: absolute;
margin-top: 0;
}
.browsesellarea-area {
flex: 1 0 500px;
box-sizing: border-box;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
margin: 3rem .5rem .5rem .5rem;
padding: .1rem .1rem .1rem .1rem
}
.browsesellarea-area img {
display: block;
border: black;
width: auto;
height: 290px;
padding: .1rem .1rem .1rem .1rem
}
/* END BROWSE-SELL CSS */
/* START FOOTER CSS */
.footer {
display: flex;
align-items: center;
justify-content: center;
background-color: cornflowerblue;
color: white;
margin: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<!---Contains Navigation and Logo-->
<header>
<div id="navigationbar">
<div id=companyname>
<a href="#">
<h1>The Dusty Garage</h1>
</a>
</div>
<nav>
<ul>
<li>
Home
</li>
<li>
Browse Tools
<ul>
<li>
Browse Tools
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<h2>Find the Perfect Tool</h2>
</section>
<main>
<!---Contains Main Content-->
<div class="goal-heading">
<h1>Our Aim</h1>
</div>
<p> The Aim of this project is to develop a peer to peer marketplace for used and new tools. Many people own tools they don’t use anymore, so instead of gathering dust in the garage, this marketplace aims to give old tools a new lease on life. From
garden to industrial tools, users can list tools they own for sale and make bids on other user’s listed tools. Users can see a list of bidders and contact the user who has made the most appealing bid, for transaction outside the website. Once
a sale has been made, all the seller needs to do is mark the item as sold .</p>
<section class="browsesellarea">
<section class="browsesellarea-heading">
<h2>Looking for Tools?</h2>
<div class="browsesellarea-area">
<img src="Images/2925.jpg" alt="Browse Tools to Buy" />
</div>
<button>Browse Categories</button>
<h2> Got a shed full of dusty tools?</h2>
<div class="browsesellarea-area">
<img src="Images/10975.jpg" alt="Browse Tools to Buy" />
</div>
<button>Sell Your Tools Here</button>
</section>
</section>
</main>
</div>
<!-- FOOTER -->
<footer class="footer">
<div>
<p>Copyright © 2019</p>
</div>
</footer>
</body>
</html>
Remove position: absolute from .browsesellarea-heading class. Because of this the footer is not coming on bottom
Related
I'm trying to make my navigation section a little nicer. Currently when I hover over the menu items to display the pages within, the pages show up instantly. I'd like them to show up gradually instead of all at once. I've tried adding transition: 2s; underneath nav ul li:hover ul in my CSS file, but that doesn't seem to work.
header {
color: #348899;
background-color: #343642;
background-image: url(Images/heading.png);
background-position: right;
background-repeat: no-repeat;
}
#wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}
h1 {
margin: 0;
padding: 10px;
font-size: 42pt;
line-height: 36pt;
font-weight: lighter;
}
h2 {
margin: 0;
padding: 0 10px 5px;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
h3 {
margin: 0;
padding: 0 10px 5px 0;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
nav {
color: #343642;
background-color: #979C9C;
float: left;
width: 160px;
font-weight: bold;
height: 100%;
position: relative;
}
nav ul li {
list-style: none;
padding: 10px;
}
nav ul li a {
display: block;
text-decoration: none;
color: #343642;
}
nav ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
nav ul li:hover ul {
display: block;
transition: 2s;
}
nav ul li ul li:hover {
background-color: #b1b6b6;
width: 80px;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
background-color: #b1b6b6;
}
main {
color: #17354A;
background-color: #F2EBC7;
margin-left: 160px;
padding: 10px;
z-index: 0;
display: flex;
}
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
margin: 0 20px 0 0;
}
main .row .left {
width: 25%;
}
main .row .left p {
margin-right: 5px;
}
main .row .middle {
width: 50%;
}
main .row .middle h3 {
text-align: center;
}
main .row .right {
width: 25%;
}
main .side .left {
width: 50%;
}
main .side .right {
width: 50%;
}
.brass {
float: right;
margin: 0 0 5px 5px;
}
.logo {
float: right;
margin: 0 0 5px 5px;
}
body{
background-color: #348899;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
footer {
color: #348899;
background-color: #343642;
font-style: italic;
text-align: center;
margin-left: 160px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
Beginning Band Players
</h1>
<h2>
Home
</h2>
</header>
<nav>
<ul>
<li>Home</li>
<li>Brass
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li>Woodwind
<ul>
<li>Clarinet</li>
<li>Flute</li>
<li>Oboe</li>
<li>Saxophone</li>
</ul>
</li>
<li>Percussion
<ul>
<li>Bells</li>
<li>Snare Drum</li>
</ul>
</li>
<li>Maintenence</li>
<li>Additional Equipment</li>
</ul>
</nav>
<main>
<div class="column left">
<div class="logo">
<img src="Images/Logo-E.png" alt="logo" height="200" width="355">
</div>
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
It's our hope that prospective music students find what they're looking
for and enjoy a lifetime of music.
</p>
<div class="brass">
<img src="Images/brass-1.jpg" alt="brass" height="238" width="425">
</div>
</div>
</div>
<div class="column right">
<h3>
What to Expect:
</h3>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources:
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
<footer>
Copyright © 2022, Carter Thomas Wolfe <br>
Web Project Prototype
</footer>
</div>
</body>
</html>
You have to tell the CSS which property you'd like to transition, and how you'd like it to transition. If you changed your transition line to something like:
transition: opacity 2s ease-in;
That's saying: fade the opacity in over 2 seconds, with an "easing in" function. https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function That line above should work - but only if it has different states of opacity to transition between. Elements default to an opacity of 1, so simply defining the transition for opacity won't be enough, you have to also different states to change between. If you were using opacity, I'd try setting the default state for the element/class/whatever to 0, and the hover state to 1.
.classYouWantToFadeIn {
opacity:0;
/*rest of the CSS*/
}
.classYouWantToFadeIn:hover {
opacity: 1;
}
If the transition still doesn't seem to work, read up on "specificity rules" in CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
try this instead:
nav ul li:hover ul {
display: block;
transition: 2s ease-in-out;
}
I'm new to flexbox and CSS. I'm trying to design this navbar where the flexbox contents taking an unnecessary linebreak for a single word. Please tell me how to fix that issue.
body {
background: #000;
margin: 0;
}
.logo-title #logo {
width: 20%;
min-width: 20%;
margin: 1.5em;
position: relative;
/* left: 40%; */
}
/* =================================================================
Layout
================================================================= */
header {
background: #869189;
padding: 2em, 0;
flex: none;
}
.container {
width: 90%;
max-width: 900px;
border: 1px solid magenta;
margin: 0 auto;
}
.container-nav {
display: flex;
justify-content: space-between;
}
/* =================================================================
Navigation
================================================================= */
nav ul {
/* Turns off the bullets */
list-style: none;
padding: 0;
display: flex;
justify-content: start;
}
nav ul li {
margin: 1em;
}
nav ul li a {
text-decoration: none;
color: #FFF;
font-weight: 600;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
padding: .25em 0;
}
nav a:hover,
nav a:focus {
text-decoration: none;
color: #1AF1CE;
}
.active-page {
border-bottom: 1px solid #1AF1CE;
}
.active-page:hover {
color: #1AF1CE;
}
<header>
<div class="container container-nav">
<div class="logo-title">
<img id="logo" src="https://via.placeholder.com/150" alt="CubeWind Logo">
</div>
<nav>
<ul>
<li> Home </li>
<li> About Us </li>
<li> Our Services </li>
<li> Our Products </li>
<li> Contact Us </li>
</ul>
</nav>
</div>
<!-- / .container -->
</header>
When I changed the display of container-nav into display:flex;, the navbar is taking 2 lines to display a single word. Here, I'm attaching a screenshot of the issue. Please help me to find the cause of this.
Thanks
Screenshot
Hello I added a bottom navigation bar in HTML and CSS code on my webpage but I want have that centered on the bottom of the website any help and solutions is greatly appreciated I have attached screenshots of the HTML, CSS codes and the webpage of where I have my navigation bar currently in the left hand side thanks very much in advance.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
<div class="navbar">
About
Contact
Facebook Page
</div>
HTML navbar code
CSS navbar code
webpage navbar
Just Replace your CSS code with below css code:
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
and your HTML with this code:
<div class="navbar">
<div class="navbar-inner">
About
Contact
Facebook Page
</div>
</div>
Hope this code will work as you expect ..
Add to .navbar:
text-align:center;
Delete from .navbar a:
float: left;
Update in .navbar a:
display: inline-block;
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #DDA0DD;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
About
Contact
Facebook page
</div>
<div class="main">
<h1>Bottom Navigation Bar</h1>
<p>Some text some text some text.</p>
</div>
</body>
</html>
How to center a nav-bar at the bottom of a page
I've been following this video online on how to create dropdown menu using css. I followed it and there's no any signs of a dropdown menu on my website. It's so frustrating because i want to get over with it so i can focus now on backend dev. Hope you guys can figure this one out.
Code for html:
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<script src="js/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="shortcut icon" type="image/png" href="../Music Store/img/rockSign.png"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul id="nav">
<li>HOME</li>
<li>INSTRUMENTS
<ul class="sub-menu">
<li>ELECTRIC GUITARS</li>
<li>BASS GUITARS</li>
<li>DRUMS</li>
</ul>
</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/ibanez.jpg"/></li>
<li><img src="../Music Store/img/raven.jpg"/></li>
<li><img src="../Music Store/img/metallica.jpg"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
</script>
<section class="one-third">
<div class="border_section">
<h3>NEW BASS AMPS THIS YEAR</h3>
<img src="../Music Store/img/fender_amps_bassbreaker.jpg"/>
<p>We would like to proudly announce the new shipment of fender bass amps that you all have been
waiting for. It will provide you that rich rock and roll tone like no other. Please check
out our bass amp section for more details.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>NEW FEATURE ARTIST</h3>
<img src="../Music Store/img/feature_markHolcomb.jpg"/>
<p>Behold Mark Holcomb from Periphery is in the house! Check out his info and new signature guitar
at our feature artists section. He will also be having a 20-minute guitar clinic on Oct 8 2016 right
here at Music Store.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>ATTENTION VOCALISTS!</h3>
<img src="../Music Store/img/GoMic.jpg"/>
<p>Check out the new Samson Go Mic Connect. It has a top-notch noise cancellation feature that can
definitely minimize the annoying sound that your dog makes while your recording. For more details,
Go to Accessories section.</p>
</div>
</section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Code for CSS:
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
*
{
margin: 0;
border: 0;
padding: 0;
}
body
{
background-image: url('../Music Store/img/background.png');
background-repeat: repeat-x;
}
.clearfix
{
clear:both;
}
#wrapper
{
margin: 0 auto;
max-width: 1120px;
overflow: auto;
border: 1px solid black;
}
#main_header
{
width: 100%;
font-family: 'Black Ops One', sans-serif;
background-color: black;
border: 1px solid black;
color: white;
}
#main_header h1
{
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout
{
margin: 50px 20px 0 0;
}
#callout h2{
text-align: right;
color: white;
}
#callout p{
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu
{
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li
{
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a
{
text-decoration: none;
color: black;
}
#nav_menu li a:hover
{
color: grey;
}
.sub-menu
{
position: absolute;
background-color: black;
list-style-type: none;
width: 124px;
padding-left: 0px;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
.sub-menu li
{
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
#nav_menu li:hover .submenu
{
opacity: 1;
}
.sub-menu li:hover
{
color: green;
background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
max-width: 1120px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev{
background: url("../Music Store/img/arrow_left.png") no-repeat 7px 9px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
background: url("../Music Store/img/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
text-align: center;
max-width: 100%;
height: auto;
opacity: 0.9;
}
.border_section p{
font-family: 'Lato', sans-serif;
padding: 2%;
color: white;
text-align: justify;
}
.border_section h3
{
font-family: 'Open Sans', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 1%;
}
.border_section
{
border: 1px solid black;
background-color: black;
}
.one-third{
width: 27.35%;
float: left;
margin: 2% 0 3% 4.5%;
text-align: center;
background-color: white;
}
footer{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: black;
overflow: auto;
}
footer p
{
margin-top: 1%;
color: white;
}
Add this to your CSS :
It will help you to have the result you want. Of course there are still adaptations to do regarding your preferences.
/* Without this line, the submenu elements are black on black background */
#nav_menu .sub-menu li a {
color: #fff;
}
/* With this line you will remove the opacity:0; of the submenu when you hover the parent li */
#nav_menu li:hover .sub-menu {
opacity: 1;
}
/* Don't set a width so you have a better output */
#nav_menu li .sub-menu {
width: auto;
}
/* This lines make the submenu li dislay verticaly and not inline */
#nav_menu li .sub-menu li {
display: block;
}
Edit:
Instead of changing the opacity property to show/hide the submenu, you should use the display property.
Currently, the submenu is just transparent, but always opened. If your menu were bigger in height, you could open it by hovering the mouse on the slide at the location where it is when opened.
By using the display property, you're actually hiding it, and it will be opened only if you hover the menu element (as it should be).
To do this, you have to replace the opacity: 0; in your .sub-menu class by : display: none;
Then change the code opacity: 1; in the #nav_menu li:hover .sub-menu by : display: block; (in the code I gave you before).
It will be cleaner than handling it with the opacity.
I've got a basic HTML document setup and I want the div to have the height of the view port. But as soon as I add height:100vh to the .main div there's a gap above the body and there's a vertical scroll bar
Here's my code.
HTML:
<div class="main">
<div class="container">
<div class="nav">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="main_text">
<h1>Hey there! I'm <span class="yellow">Gautham SK</span>, a digital designer & web developer.</h1>
</div>
</div> <!-- end container -->
</div> <!-- end main -->
CSS:
html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.container {
max-width: 1024px;
padding: 0 20px;
margin: 0 auto;
}
/* NAVIGATION */
.nav ul {
display: flex;
align-items: center;
justify-content: flex-end;
/* margin-top: 75px;*/
list-style-type: none;
}
.nav ul li {
margin-left: 40px;
list-style: none;
font-size: 16px;
}
.nav ul li a, .nav ul li a:visited {
color: #000;
padding: 5px;
text-decoration: none;
transition: 0.2s color;
}
.nav ul li a:hover {
color: #ffde00;
transition: 0.2s color;
}
.nav ul li a.active {
color: #000;
border-bottom: 5px solid #ffde00;
}
/* MAIN SECTION */
.main {
background: url("../images/bg.jpg") center center no-repeat;
background-size: cover;
}
.main, .main .container {
height: 100vh;
}
.main_text {
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.main_text h1 {
font-weight: 400;
font-size: 45px;
}
span.yellow {
color: #ffde00;
}
I've also got a normalize.css linked to this document. I tried to remove the padding and margin for all the elements but that doesn't work.
UPDATE
Yay! Found the solution. Here's what I did:
Removed the margin for the nav and it's children and replaced it with a top padding to get the desired look.
Changed the height of the main_text to 80%.
If you've got a better solution, let me know!
As a simple test, set padding: 1px on body. If the gap goes away read: http://www.sitepoint.com/web-foundations/collapsing-margins/