How would i be able to align my navigation links to the header?
This is what i currently have:
But, I'd really like to have the links vertically aligned within the header, like this:
How would i do this?
Below is my CSS & HTML.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
max-width: 90%;
margin: 0 auto;
}
#top_header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: #26ABF5;
height: 70px;
vertical-align: middle;
}
#logo_top {
display: inline-block;
width: 53px;
padding-top: 8px;
}
#main_nav {
display: inline-block;
font-size: 12px;
padding-left: 170px;
}
#main_nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 6em;
}
.button {
float: right;
justify-content: center;
display: flex;
width: 101px;
margin-top: 14px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 2px;
background-color: #fff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #26abf5;
font-size: 13px;
font-weight: 600;
}
<body>
<header id="top_header">
<div class="wrapper">
<img id="logo_top" draggable="false" src="images/logo1.png">
<nav id="main_nav">
FORSIDE
HVAD TILBYDER VI?
PRISER
OM OS
</nav>
<a class="button" href="#">LOG IND</a>
</div>
</body>
Use line-height for vertical-align. Im add the line in #main_nav.
Edit: add float: left; for your logo image.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
max-width: 90%;
margin: 0 auto;
}
#top_header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: #26ABF5;
height: 70px;
vertical-align: middle;
}
#logo_top {
display: inline-block;
float: left;
width: 53px;
padding-top: 8px;
}
#main_nav {
display: inline-block;
font-size: 12px;
line-height: 70px;
padding-left: 170px;
}
#main_nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 6em;
}
.button {
float: right;
justify-content: center;
display: flex;
width: 101px;
margin-top: 14px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 2px;
background-color: #fff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #26abf5;
font-size: 13px;
font-weight: 600;
}
<body>
<header id="top_header">
<div class="wrapper">
<img id="logo_top" draggable="false" src="images/logo1.png">
<nav id="main_nav">
FORSIDE
HVAD TILBYDER VI?
PRISER
OM OS
</nav>
<a class="button" href="#">LOG IND</a>
</div>
</body>
Related
I've trying to make a website just for a home project but having some trouble with the css for mobile.
There seems to be a lot of whitespace surrounding the elements to the right and bottom of the site. I'm newer to the world of CSS so any help would be appreciated.
Screenshot of what chrome shows in developer mode.
#media screen and (max-width:450px) {
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
max-width: 100vw;
overflow-x: hidden;
}
html{scroll-behavior:smooth}
.navbar {
background-color: #008B8B;
position: fixed;
top: 0;
z-index: 100;
width: 100vw;
}
.navbar a {
text-decoration: none;
display: inline-block;
float: center;
padding-bottom: 20px;
}
.logo{
display: none;
}
.loginLogo{
width = 1px;
height = 1px;
visibility: hidden;
}
.navbar-name{
color: #f2f2f2;
font-size:25px;
padding-left: 25%;
font-family: 'Lobster', cursive;
}
.navbar-home{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-products{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-about{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-contact{
font-size: 17px;
padding-top: 5px;
padding-right: 17.5%;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-login{
font-size: 1px;
padding-top: 1px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
visibility: hidden;
}
/* Change the color of links on hover */
.navbar-home:hover {
color: black;
}
.navbar-products:hover {
color: black;
}
.navbar-about:hover {
color: black;
}
.navbar-contact:hover {
color: black;
}
.navbar-login:hover {
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
/*--------HOME PAGE------------*/
.homePage{
margin: 0 0 0 0;
padding: 0;
width: 100vw;
height: 820px;
background-image: url(multiGrain.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homePageH1{
position: absolute;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 26%;
left:50%;
transform: translateX(-50%) translateY(-50%);
font-size: 40px;
color: white;
}
.homePageH2{
position: absolute;
text-align: center;
display: inline;
top: 28%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
font-size: 20px;
color: white;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
}
.aboutUsButton{
position: absolute ;
text-align: center;
top: 31%;
left:30%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
.ourProductsButton{
position: absolute ;
text-align: center;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
top: 31%;
left:70%;
padding: 10px;
padding-right: 18px;
padding-left: 18px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
/*-------ABOUT US PAGE----------*/
.aboutUsPage{
margin: 0 0 0 0;
padding: 0px;
background-color: white;
height: auto;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.aboutUsH1{
position: relative;
padding-top: 20px;
padding-left: 20px;
margin: 0px;
text-align: left;
display: block;
width: 90%;
top: 20%;
font-size: 20px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.aboutUsP{
position: relative;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 30px;
margin: 0px;
text-align: left;
float: bottom;
display: block;
width: 90%;
top: 5%;
font-size: 15px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.mixerImage{
position: relative;
object-fit: cover;
width: 100%;
height: 150px;
}
/*--------PRODUCTS PAGE------------*/
.productsPage{
position: relative;
margin: 0px;
padding: 0px;
background-color: white;
height: 300px;
width: auto;
}
.productsH1{
position: relative;
text-align: left;
top: 5%;
left: 4%;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
color: black;
}
.productsP{
position: relative;
padding: 10px;
padding-top: 15px;
text-align: left;
float: inherit;
width: 45%;
left: 2%;
font-size: 15px;
font-family: 'Titillium Web', sans-serif;
color: black;
background-color: white;
}
.productListButton{
position: absolute ;
text-align: center;
left: 2%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
background-color: black;
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
letter-spacing: 5px;
color: white;
text-decoration: none;
}
.slideshowImage1{
position: absolute;
width: auto;
left: 55%;
top: 15%;
height: 100px;
float: right;
margin: 10px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshowImage2{
width = 0px;
height = 0px;
visibility: hidden;
}
/*-------CONTACT US PAGE---------*/
.contactPage{
margin: 0 0 0 0;
padding: 0px;
background-image: url(rollingPin2.JPG);
height: 700px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-size: 200% 100%;
}
.contactH1{
position: relative;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 10%;
left:0%;
font-size: 70px;
letter-spacing: 3px;
color: white;
font-family: 'Dancing Script', cursive;
}
.contactP1{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contactP2{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contact-form{
position: relative;
top: 15%;
width: 80%;
left: 47.5%;
transform: translateX(-50%);
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
font-family: 'Titillium Web', sans-serif;
border-radius: 4px; /* Rounded borders */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: none; /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
width: 105%;
background-color: #008B8B;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: black;
}
.nameInput{
position: relative;
top: 0px;
color: white;
}
.emailInput{
position: relative;
top: 5px;
color: white;
}
.messageInput{
position: relative;
top: 5px;
color: white;
}
.submitButton{
position: relative;
top: 5px;
}
/*--------FOOTER---------*/
.facebookLogo{
width: 0%;
height: 0%;
visibility: hidden;
}
.footer {
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp1{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp2{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp3{
width: 0px;
height: 0px;
visibility: hidden;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap" rel="stylesheet">
<title>Doughboys Bakery</title>
<link href="StyleSheet.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="navbar">
<img class = "logo" src="Doughboys Logo - Website Version.png" alt="Logo" width="80"height="45.109">
<a class="navbar-name" href="">Doughboy's Bakery.</a>
<a class="navbar-login" href="">Log In</a>
<img class = "loginLogo" src="loginLogo2.png" onmouseover="this.src='loginLogo2Black.png';" onmouseout="this.src='loginLogo2.png';" width="50"height="28.889"/>
<a class="navbar-contact" href="#contactPage">Contact</a>
<a class="navbar-products" href="#productsPage">Products</a>
<a class="navbar-about" href="#aboutUsPage">About</a>
<a class="navbar-home" href="#homePage">Home</a>
</nav>
</header>
<div class = "homePage" id="homePage">
<h1 class="homePageH1">Quality or Quantity</h1>
<h2 class="homePageH2">We're here to give you both</h2>
<div class = "homePageButtons">
<a class="aboutUsButton" href="#aboutUsPage">About Us</a>
<a class="ourProductsButton" href="#productsPage">Our Products</a>
</div>
</div>
<div class = "aboutUsPage" id="aboutUsPage">
<div class = "aboutUsText">
<h1 class="aboutUsH1">Who we are.</h1>
<p class="aboutUsP">Doughboys Bakery is a locally owned and operated wholesale bakery located near the city centre of Palmerston North. We produce traditional bakery goods like the classic Mince and Cheese Pies and Custard Squares. <br/><br/>We deliver actively in the Manawatu-Whanganui, Horowhenua & Wairarapa regions. (T's & C's Apply)<br/><br/>Use the contact section below to see how we can help suit your baking needs.</p>
</div>
</div>
<div class = "productsPage" id="productsPage">
<h1 class="productsH1">What we make.</h1>
<p class="productsP">At Doughboys' we supply traditionally sold bakery goods all the way from the classic Mince and Cheese Pie to the humble Scone.</p>
<button class="productListButton" type="submit" onclick="window.open('ProductList.doc')">Full Product List</button>
<div id="slideshow">
<div>
<img class="slideshowImage1" src="fruitPies.jpeg">
</div>
<div>
<img class="slideshowImage2" src="pies.jpg">
</div>
</div>
</div>
<div class="contactPage" id="contactPage">
<h1 class="contactH1">Contact Us.</h1>
<p class="contactP1">ADDRESS: 15 Johnston St </p>
<p class="contactP2">TEL: (06) 123 1234 | doughboys#gmail.net.nz</p>
<div class = "contact-form">
<form id = "contact-form" method="post" action="contactForm.php">
<input class= "nameInput" type="text" id="name" name="name" placeholder="Your name...">
<input class= "emailInput" type="text" id="email" name="email" placeholder="Your email...">
<textarea class= "messageInput" id="message" name="message" placeholder="Write something..." style="height:100px"></textarea>
<input class= "submitButton" type="submit" value="Submit">
</form>
</div>
</div>
<div class="footer">
<a href="https://www.facebook.com/Doughboys-Bakery-Ltd-216199385212667">
<img class = "facebookLogo" src="facebookLogo.png" >
</a>
<p class="footerp1">(06) 123 1234</p>
<p class="footerp2">doughboys#gmail.net.nz</p>
<p class="footerp3">15 Johnston St</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<!--<meta name="viewport" content="width=960">
<meta name="viewport" content="width=480">-->
<title>Habitat for Humanity Restore | Home</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="headimg">
<h2 class="slogan1">HOME IMPROVEMENT & FURNITURE OUTLET</h2>
<h3 class="slogan2"> A clean, happy place to find treasures</h3>
</div>
</header>
<!--
<div class="socialmedia"><img src="images/facebook-14.png" width="40" height="52" alt="FacebookSM">
<img src="images/Pinterest-icon.png" width="40" height="52" alt="PinterestLogo">
<img src="images/twitter-icon.png" width="40" height="52" alt="TwitterLogo"></div>
-->
</div>
<div id="nav">
<ul>
<li>SHOP</li>
<li>DONATE</li>
<li>VOLUNTEER</li>
<li>CONTACT US</li>
</ul>
</div>
<!-- Tony please fix text shadows, sidebar shadows and nagivation effects -->
<div id="sidebarleft">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED </li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY </li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
<!--<p>CONTACT US </p>-->
<div class="sidebartextleftsmall">
Restore Facility<br/>
200 South Larkin<br/>
Joliet, IL. 60436<br/>
P: 815-714-7100<br/>
E: info#restorejoliet.org
</div>
</div>
<!--</div>-->
<div id="sidebarright">
<div class="sidebartextright">
<p>FEATURED THIS WEEK:</p>
</div>
<div class="rightsidebarimg">
<div class="featuredimg">
<img src="images/furniture for sale.jpg" width="265" height="457" alt="furniture for sale">
</div>
</div>
<div class="sidebartextrightsmall"><span>Save our contact info to your smartphone</span>
<img src="images/scancode.jpg" width="125" height="126" alt="Habitat Restore Contact Information Smartphone Code">
</div>
</div>
<div id="content">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="images/restorelocationtext.png" alt="Will County Habitat For Restore Location">
</figure>
<figure>
<img src="images/slider2.jpg" alt="Worker setting up bookshelf">
</figure>
<figure>
<img src="images/slider3.jpg" alt="Warehouse selection">
</figure>
<figure>
<img src="images/slider4.JPG" alt="More Ware Selection Tables and fans">
</figure>
<figure>
<img src="images/slider5.JPG" alt="Household furniture warehouse selection">
</figure>
</figure>
</div>
<div id="box">
<img src="images/habitatBox1.png" alt="Shop for repurposed materials" class="center" />
<img src="images/habitatBox2.png" alt="Donate Heart" class="center" />
<img src="images/habitatBox3.png" alt="Shop for repurposed materials" class="center" />
</div>
</div>
<div id="sidebarbottom">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED</li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY</li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
</div>
<div id="footer">2015 Will County Habitat for Humanity ReStore. All Rights Reserved.</div>
</div>
</body>
</html>
I'm having an issue in which my content section suddenly stops before reaching the footer causing a black underlay to show up, I've looked into editing the wrapper size and height of the content container but cannot figure out what the issue may be, please help me out
This below image is what the page is complete page should look like
CSS
#media only screen and (min-width: 960px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 7px;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 170px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
a {
text-decoration: none;
}
a:visited {
color:#FFF !important;
}
#sidebarleft {
float: left;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarright {
float: right;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 60%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 100px;
display: inline-block;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 24px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes desktop media query */
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#header {
height: 106px;
background-color: #d9e6ef;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 9px;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 140px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
float: left;
width: 25%;
height: 784px;
background-color: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 75%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 40px;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 22px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 18px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes tablet media query */
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
background-color: #51b948;
}
#nav ul {
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: block;
list-style-type: none;
border-bottom: 2px dotted white;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li a {
display: block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
padding: 20px;
}
#nav ul li a:link {
text-decoration: none;
}
#nav ul li a:visited {
color: #F4E9E9;
}
#nav ul li a:hover {
background: #51b948;
}
#nav ul li a:active {
background: #406718;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
display: none;
float: left;
width: 25%;
height: 784px;
background: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
width: 100%;
background: #005596;
text-align: center;
}
#sidebarbottom ul li a {
display: block;
padding: 15px;
border-bottom: 3px solid #fff;
}
#sidebarbottom ul li a:link {
text-decoration: none;
}
#sidebarbottom ul li a:visited {
color: #fff;
}
#sidebarbottom ul li a:hover {
background: #005596;
}
#sidebarbottom ul li a:active {
background: #d9e6ef;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
font-weight: bolder;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
#content {
width: 100%;
background: #dbf1da;
padding: 0;
margin: 0;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 33%;
margin: 0;
background: #42603C;
}
img.center:first-child {
float: left;
}
img.center:last-child {
float: right;
}
.headimg {
height: 106px;
margin: 0 auto;
padding: 0 auto;
text-align: center;
background: url(images/head.png) no-repeat center;
}
h2.slogan1 {
display: none;
/*
padding: 35px 0 0 220px ;
font-weight: bold;
font-size: 20px;
*/
}
h3.slogan2 {
display: none;
/*
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 16px;
*/
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes phone media query */
}
You are closing one div more then you open div (tags). Count them and then look, which div should close at which point. You could for example search for all div> to get all open and closing div tags. One tip: take a look at the sourcecode in the browser, at least Firefox highlights wrong html syntax (too manny or to few tags or not matching tags) which makes it easy to find them.
Edit:
You close your content div after this div <div id="box">....</div>
I want to sharpen my HTML & CSS skills by recreating the Bootstrap homepage in pure HTML & CSS. I am almost finished, but I seem to be having trouble with my footer. Everything else is positioned the way I would like it, but everything on the footer shoots up to the top and middle of my page. Can anyone tell me what I am missing here?
HTML
<header>
<div class="top-bar">
<p>Aww yeah, Bootstrap 4 is coming!</p>
</div>
<nav>
<div class="nav-bar">
<div class="logo">
Bootstrap
</div>
<div class="left-nav">
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Customize</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Themes</li>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<nav>
</header>
</div>
<center>
<main>
<section>
<div class="head-component">
<div class="b-logo">
<p>B</p>
</div>
<div class="short-description">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
<div class="download-button">
<button class="dwn">Download Bootstrap</button>
</div>
<div class="current">
<p>Currently v3.3.5</p>
</div>
</div>
</section>
<section>
<div class="mid-section">
<div class="mid-info">
<h2>Designed for everyone, everywhere.</h2>
<p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div>
<hr class="hz-line" />
<div class="column-left">
<img src="http://getbootstrap.com/assets/img/sass-less.png" />
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="column-middle">
<img src="http://getbootstrap.com/assets/img/devices.png" />
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="column-right">
<img src="http://getbootstrap.com/assets/img/components.png" />
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
<div class="clear"></div>
<hr class="hz-line" />
<div class="github">
<p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div class="github-button">
<button class="view-git">View the Github Project</button>
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="clear"></div>
<div class="photo-section">
<hr class="hrln-full" />
<div class="second-mid-info">
<h2>Built with Bootstrap.</h2>
<p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
</div>
<hr class="hz-line" />
<div class="photos">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
</div>
<hr class="hz-line" />
<div class="expo-button">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<button class="expo">Explore the Expo</button>
</div>
<hr class="hrln-full" />
</div>
</div>
<div class="clearfooter"></div>
</section>
</main>
<div class="clear"></div>
<footer>
<p>Designed and built with all the love in the world by #mdo and #fat.
<br /> Maintained by the core team with the help of our contributors.
<br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
<ul>
<li>Github</li>
<li>Examples</li>
<li>v2.3.2 docs</li>
<li>About</li>
<li>Expo</li>
<li>Blog</li>
<li>Releases</li>
</ul>
</footer>
</center>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body, #wrap {
height: 100%;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fff;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 22px;
font-weight: 100px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 14px;
}
#container {}
ul {
list-style: none;
}
li {
list-style: none;
display: inline;
padding: 10px;
}
a {
list-style: none;
color: inherit;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
main {
padding-bottom: 150px;
display: block;
margin: 0 auto;
}
.top-bar {
margin: 0;
padding: 15px 0;
background-color: #0275D8;
text-align: center;
}
.top-bar p {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0;
}
.top-bar:hover {
margin: 0;
padding: 15px 0;
background-color: #0269C2;
text-align: center;
}
.nav-bar {
background-color: #fff;
position: relative;
color: #583F7E;
display: block;
width: 100%;
height: 50px;
}
.logo {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #583F7E;
padding: 15px;
line-height: 0.8em;
margin-left: 100px;
}
.left-nav {
float: left;
font-size: 15px;
font-weight: 500;
text-align: center;
margin-left: 200px;
}
.right-nav {
float: right;
text-align: right;
font-size: 15px;
font-weight: 500;
margin-right: 120px;
}
.left-nav a:hover {
background-color: #f9f9f9;
}
.right-nav a:hover {
background-color: #f9f9f9;
}
.head-component {
background-color: #583F7E;
height: 700px;
display: block;
margin: 0 auto;
}
.b-logo {
margin: 0 auto;
padding-top: 5px;
width: 160px;
height: 300px;
display: block;
}
.b-logo p {
font-size: 130px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 25px;
text-align: center;
}
.short-description {}
.short-description p {
font-size: 30px;
color: #fff;
font-weight: 300;
width: 850px;
text-align: center;
display: block;
margin: 0 auto;
padding-top: 40px;
}
.download-button {
padding-top: 40px;
}
.dwn {
background: none;
font-size: 20px;
padding: 15px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.dwn:hover {
background: #fff;
font-size: 20px;
padding: 15px;
color: #583F7E;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.current p {
color: #9781A9;
font-size: 14px;
padding-bottom: 75px;
padding-top: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.mid-section {
height: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
}
.mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
text-align: center;
display: block;
margin: 0 auto;
}
.mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
padding-bottom: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.hz-line {
width: 10%;
color: #f3f3f3;
opacity: 0.5;
}
.column-left {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-left img {
width: 100%;
}
.column-left p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-middle {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-middle img {
width: 100%;
}
.column-middle p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-right {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-right img {
width: 100%;
}
.column-right p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.clear {
clear: both;
}
.github {
padding-top: 15px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
text-align: center;
}
.github p {
font-weight: 400;
font-size: 18px;
color: #555;
padding-bottom: 20px;
text-align: center;
}
.view-git {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.view-git:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.hrln-full {
color: #f3f3f3;
opacity: 0.5;
}
.spacer {
height: 60px;
}
.second-mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
.second-mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
text-align: center;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
.photo-section {
height: 100%;
display: block;
margin: 0 auto;
}
.photos {
padding: 30px;
padding-left: 115px;
}
.photos img {
width: 23%;
}
.expo-button {
padding-top: 15px;
padding-bottom: 120px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
}
.expo-button p {
font-weight: 300;
font-size: 22px;
color: #555;
padding-bottom: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.clearfooter {
height: 130px;
clear: both;
}
footer {
text-align: center;
bottom: 0;
height: 100%;
left: 0;
width: 100%;
display: block;
margin: 0 auto;
}
footer p {
text-align: center;
}
footer ul {
position: relative;
}
footer li {
color: #489FD6;
}
footer li:hover {
color: #23517C;
text-decoration: underline;
}
footer a {}
From what I can tell I believe its because of two main reasons.
You have set fixed heights for elements with content that is height than the fixed height.
.mid-section {
height: 500px;
background-color: #fff;
margin: 0;
}
.photo-section {
height:500px;
}
The footer has position: absolute but isn't contained by a parent with position: relative. If you would like the footer to stick to the bottom use position: fixed instead.
footer {
text-align: center;
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
I correctly linked my pdf to my project and spelled everything right but when I hover over it and click it, nothing happens. Im not sure if its something to do with the positioning of everything?
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
/*----------header styles-------------*/
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: -1;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -5%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: white;
opacity: 1.0;
text-shadow: 3px 3px 2px #000000;
text-align: center;
}
a.down{
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 1em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 100%;
}
a.down:hover{
text-decoration: underline;
}
<body>
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
It's the z-index -1 on #hero - it's basically making it under the body. Change that to 0 or remove it and you should be good.
Please help!
I tried many tricks to remove the white space under my footer but none of them solved my problem. I noticed that the white space is only visible in the pages with text, p and h1 tags. Any help is highly appreciated.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Olive Green Studio</title>
<link href="oliva.css" rel="stylesheet" type="text/css" />
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]—>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header"><!-- end #header -->
<div id="logo">
<a href="index.html">
<img src="olivaimages/olivegreenlogoweb.png" border="none"/>
</a>
</div>
<div id="sidebar1">
<ul>
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- end #sidebar1 --></div>
</div>
<div id="mainContent">
<h1>Contact Us </h1>
<p>If you need a creative help or want to take your project to the next level please don't hesitate to drop us a line.</p>
<a class="worklinks" href= "mailto:info#olivegreenstudio.com"> info#olivegreenstudio.com</a>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div class="clearfooter"></div>
<!-- end #container -->
</div>
<div id="footerframe">
<div id="footer">
<div id="footer2">
<div id="address">Khobar<br> Saudi Arabia </div>
<div id="contact">
<strong>Services:</strong><br> Logos<br>Branding<br>Identity<br>Collaterals<br>Packaging<br> Web Design & Development <br>
</div>
<div id="email">
If you have a project inquiry, we will be happy to answer you <a class="contactlink" href="mailto:info#olivegreenstudio.com"> here.</a>
</div>
<div class="social">
<div class="twitter">
<a href="https://twitter.com/OliveGreenSTU" />
<img src="olivaimages/twitterbirdwebgreen.png" onmouseover="this.src='olivaimages/twitterbirdweb-lightgreen.png'" onmouseout="this.src='olivaimages/twitterbirdwebgreen.png'" />
</div>
</a>
<div id="pinterest">
<a href="http://pinterest.com/olivegreenstu/">
<img src="olivaimages/pinterestwebgreen.png" onmouseover="this.src='olivaimages/pinterestweb-lightgreen.png'"
onmouseout="this.src='olivaimages/pinterestwebgreen.png'" />
</a>
</div>
<div class="copywrite"> © 2013 Olive Green. All rights reserved.</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
height: 100%;
}
.twoColFixLtHdr #header {
height: 170px;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center center;
margin: 0px;
padding: 0;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #5A6219;
text-decoration: none;
font-style: normal;
font-weight: normal;
padding-bottom: 20px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #908B23;
text-decoration: none;
line-height: 1.5em;
margin-bottom: 30px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #908B23;
text-decoration: none;
margin: 0px;
}
.twoColFixLtHdr #container {
width: 900px;
text-align: left; /* this overrides the text-align: center on the body element. */
min-height: 100%;
margin-top: 0;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: -215px;
height: 100%;
}
.twoColFixLtHdr #mainContent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.workmaincontent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColFixLtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 300px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
margin-top: 70px;
background-color: #FFFFFF;
height: 30px;
}
#sidebar1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 200px;
line-height: 1.5em;
text-decoration: none;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 500px;
}
#sidebar1 ul {
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#sidebar1 li {
display: run-in;
list-style-type: none;
}
#sidebar1 a {
display: run-in;
text-decoration: none;
color: #918C10;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
padding: 5px;
float: left;
width: 65px;
}
#sidebar1 a:hover {
color: #5A6219;
}
.worklinks{
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.worklinks:hover{
font-family: Arial, Helvetica, sans-serif;
color: #908B23;
text-decoration: none;
}
#print{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-right: 85px;
}
#web{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-top: 50px;
margin-bottom: 50px;
}
#packaging{
background-color: #FFF;
height: 100%;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
}
.imagetitles a {
text-decoration: none;
font-family: "Century Gothic";
font-size: 25px;
font-style: normal;
font-weight: normal;
color: #00CCCC;
}
#printtitle{
bottom: -5px;
left: 333px;
}
#webtitle{
position: absolute;
left: 333px;
top: 521px;
}
#packagingtitle{
position: absolute;
left: 317px;
top: 823px;
width: 89px;
}
#bigimages{
width: 570px;
height: 100%;
}
.imagestalk {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
font-size: 14px;
line-height: 1.5em;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
}
.thumbnails {
border: 5px solid #666666;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #5A6219;
text-decoration: none;
}
h3 a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
h3 a:visited {
color: #D0BA0B;
text-decoration: underline;
}
h3 a:hover {
color: #5A6219;
}
h3 a:active {
color: #579835;
}
.back{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
padding-left: 520px;
}
.back a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
}
.back a:visited {
color: #666666;
text-decoration: none;
}
.back a:hover {
color: #000000;
text-decoration: none;
}
.back a:active {
color: #333333;
text-decoration: none;
}
.source{
font-size: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
}
.workimage {
height: 150px;
width: 200px;
float: left;
margin: 20px;
}
img {
border: 0;
}
#logo {
height: 150px;
width: 300px;
float: left;
}
#footerframe {
width: 100%;
background-color: #AEA03A;
height: 215px;
position: relative;
float: right;
}
#footer {
width: 900px;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: #AEA03A;
float: none;
position: relative;
height: 215px;
}
#footer2 {
width: 100%;
background-color: #AEA03A;
padding-top: 30px;
float: left;
position: relative;
}
#address {
height: 50px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
color: #5A6219;
line-height: 1.5em;
}
#contact {
height: 130px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
margin-right: 180px;
margin-left: 180px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
line-height: 18px;
}
#email {
background-color: #AEA03A;
height: 50px;
width: 180px;
float: right;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
}
.social {
background-color: #AEA03A;
height: 35px;
width: 100%;
float: right;
margin-top: 20px;
}
#pinterest {
height: 20px;
width: 20px;
float: left;
background-repeat: no-repeat;
margin-left: 15px;
margin-bottom: 15px;
}
.twitter {
height: 20px;
width: 20px;
background-repeat: no-repeat;
float: left;
margin-bottom: 15px;
}
.copywrite {
font-size: 11px;
font-weight: lighter;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
width: 300px;
background-color: #AEA03A;
float: right;
height: 15px;
color: #5A6219;
vertical-align: middle;
margin-bottom: 10px;
margin-top: 5px;
}
.contactlink {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink a {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink:hover {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
h4 {
color: #5A6219;
}
.indeximg {
height: 100px;
width: 900px;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../olivaimages/indeximg.png)
}
.indexwrap {
height: 100%;
width: 810px;
padding-left: 90px;
}
#wrapper {
min-height: 100%;
}
.clearfooter {
height: 215px;
clear: both;
}
try this
#footerframe {
background-color: #AEA03A;
bottom: 0;
float: right;
height: 223px;
position: absolute;
width: 100%;
}
Replacing the footers 900px with 100% should do the trick.
I think you'll need implement a sticky footer technics by setting html,body height to 100% and
setting id#container as the following:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: auto !important;
min-height: 100%;
height: 100%;
}
example