I am html/css beginner and Created this webpage in which there is three main divs header,boxcontainer,footer.
there is some problem with footer div that its background is not showing before its text. i have used float in box container divs.
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white;
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
div#footer {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Clear the float for the footer using clear:both
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
div#footer {
clear: both;
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events
<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Always set layout of parent element while using float on child
elements.
You haven't set layout of parent element in your code.
There are many ways of setting layout. You can use overflow: hidden i.e:
#boxcontainer {
overflow: hidden;
}
Alternatively you can use :after pseudo element as well:
#boxcontainer:after {
display: block;
content: '';
clear: both;
}
div#header {margin-left:1%;background-color:lightblue;height:30px;width:95%;}
ul#menu li {margin:10px;color:black;font-size:25px;display:inline;margin-top:100px;}
ul#menu li:hover{color:white}
div.box { background-color:lightblue;height:200px;width:200px;float:left;margin:10px;width:35%;}
div.boxhead {background-color:yellow;height:30px;padding:0px;width:100%;}
div.boxhead p {font-size:150%;text-align:center;color:lightblue;height:30px;width:200px;padding:0px;-webkit-margin-before: 0.0em;-webkit-margin-after:0.0em;}
div#footer {margin-left:1%;background-color:lightblue;width:95%;}
#boxcontainer {overflow: hidden;}
<div style="margin: auto;width: 95%;"id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
Instead of using a <div>, try using the tag <footer>.
html
<footer class="footer">
<p>Your content</p>
</footer>
css
.footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
Here are two solutions for your case:
Remove the float of the footer div
#footer {
float:none;
}
or
2.Add helper class clearfix to your footer div:
<div id="footer" class="clearfix">
with the following style, which will clear the float
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
hi you can add this code for footer : clear:both
div#footer {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
clear: both;
}
and for more reference see this link : https://jsfiddle.net/
thanks
Add .clearfix class to the parent of float elements:
<div id="boxcontainer" class="clearfix">...</div>
CSS for .clearfix:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Also, I think that you need not fixed height at your footer. So, remove height: 30px; from your footer div.
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white;
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
div#footer {
margin-left: 1%;
background-color: lightblue;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer" class="clearfix">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Just remove height: 30px from footer and add float: left;
div#footer {
margin-left: 1%;
background-color: lightblue;
width: 95%;
float: left;
}
First You need to set the style for footer
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Then You call
<div id="footer">footer</div>
Related
I face the problem that when I put float to my #middle-content. The float doesn't display. Moreover, this removes its background too. I want the middle-content to be at the right of #leftcontent. Help please!!
<body>
<div id="page">
<div id="banner">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" /> </div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div> <!--banner-->
<div id="maincontent">
<div id="leftcontent">
<div class="navigation">
Home
</div><!--navigation-->
<div class="navigation">
About Us
</div><!--navigation-->
<div class="navigation">
Products
</div><!--navigation-->
<div class="navigation">
Contact
</div><!--navigation-->
<div class="navigation">
ABOUT US
</div><!--navigation-->
</div> <!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div> <!--middle-content-->
</div> <!--maincontent-->
</div> <!--page-->
</body>
And this is my CSS
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align:center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
#leftcontent {
width: 150px;
display: table;
}
#middle-content {
width: 400px;
float: left;
}
You need to float the #leftcontent, and to fix the background, add a clear fix
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align: center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
.clear:after {
content: '';
display: block;
clear: left;
height: 0;
}
#leftcontent {
width: 150px;
display: table;
float: left;
}
#middle-content {
padding-top: 1px;
width: 400px;
float: left;
}
<div id="page">
<div id="banner" class="clear">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
<div id="maincontent" class="clear">
<div id="leftcontent">
<div class="navigation">
Home
</div>
<!--navigation-->
<div class="navigation">
About Us
</div>
<!--navigation-->
<div class="navigation">
Products
</div>
<!--navigation-->
<div class="navigation">
Contact
</div>
<!--navigation-->
<div class="navigation">
ABOUT US
</div>
<!--navigation-->
</div>
<!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div>
<!--middle-content-->
</div>
<!--maincontent-->
</div>
<!--page-->
I have also added 1px top padding to middle-content to stop the h2 margin causing a gap above maincontent
Update
Sounds like your dreamweaver does not support pseudo elements, see if this fixes your clear problem:
change css .clear:after to:
.clear {
display:block;
height:0;
overflow:hidden;
clear:both;
}
and then in the html above, find the divs with the clear class and remove the class, then at the end of those divs, add a physical div to see if it fixes your problem:
<div class="clear"></div>
try this
#leftcontent {
width: 150px;
float:left;
}
#middle-content {
width: 400px;
float: left;
}
also I have added
#maincontent:before,
#maincontent:after{
clear:both;
display:table;
content:"";
}
to fix the background color
working code is here
For your problems, i have the following solutions:
#maincontent can't show its background because its height is 0. You can fix it :
#maincontent {
background-color: #A6D2FF;
height:250px;
}
#leftcontent must have float:left so the middle-content to be at the right of #leftcontent
#leftcontent {
width: 150px;
display: table;
float: left;
}
I'm about to become insane with this css thing. I don't know the language very well..and can't make what I need to do.
I have this html
<div id="content">
<div id="video-content">
<div id="source">
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</div>
and I have to achieve this:
so far my css code:
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content {
background: dimgrey;
width: 97%;
height: 90%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#video-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
z-index: 20;
}
#segment-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
}
I am not interested in doing this resposive so far
To get a clean grid you'll have to change your html-structure a little bit.
<div id="content">
<div id="video-content">
<div class="row">
<div class="col-1-2">
<div id="source"></div>
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div class="col-1-2">
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-1-1">
<div id="segment-content">
</div>
</div>
</div>
</div>
Here's an example I made of how to achieve something similar to your screenshot:
Codepen example
You want to switch out the height-properties or remove them completly and let the content fill in dynamically. I used them in this example since we have no content, so that the divs become visible.
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
height:auto;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content{width:100%;
height:auto;
background: dimgrey;}
#video-content{width:80%;
height:370px;
margin:0 auto;}
#source{width:45%;
float:left;
height:auto;
}
#preview{width:45%;
float:left;
height:auto;
margin-left:10%;
}
#s-video{width:100%;
height:300px;
background-color:black;}
#p-video{width:100%;
height:300px;
background-color:black;}
#source-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#preview-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#segment-content:after {
content: "";
display: table;
clear: both;}
#segment-content{width:80%;
margin: 20px auto;
height:300px;
background:blue;}
this will work,although not the pretty way of writing css
I think you'd be much better off going with a pre-built framework if that's an option. Something like purecss.io or bootstrap. But this should also work for what you want.
https://jsfiddle.net/w5qfvezg/
.video-display {
background-color: black;
min-height: 200px;
}
.video-description {
background-color: red;
min-height: 50px;
}
body {
padding: 5%;
padding-left: 10%;
padding-right: 10%;
background-color: #999;
}
.video-item {
width: 49%;
float: left;
margin-bottom: 20px;
}
.video-spacer {
width: 2%;
float: left;
min-height: 200px;
}
#segment-content {
background-color: blue;
min-height: 200px;
}
<body>
<div id='video-content'>
<div class='video-item' id='source'>
<div class='video-display' id="s-video">
</div>
<div class='video-description' id="source-controls">
</div>
</div>
<div class='video-spacer'>
</div>
<div class='video-item' id='preview'>
<div class='video-display' id='p-video'>
</div>
<div class='video-description' id="preview-controls">
</div>
</div>
</div>
<div style='clear:both'>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</body>
I am trying to make a header wider, so that it extends to both sides of the browser size. I have all of my content inside of a wrapper div that is set to 990px. My header is the part I want to be full width. I also am trying to make my header have a fixed position. But when i put the corrected position into the css for the header, the title and the navigation bar stack vertically and do not remain how I originally set them.
<body>
<div class="wrapper">
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="main">
<p>Welcome to the #1 stop in automotive today</p>
<div class="article">
<img class="image" src="http://cdnedge.vinsolutions.com/dealerimages/Dealer%204697%20Images/content/car-tire-repair.jpg">
</div>
<div class="article">
<img class="image" src="http://www.lonniesautomachineshop.com/shopimg/Engines1.jpg">
</div>
<div class="article">
<img class="image" src="http://image.superstreetonline.com/f/features/modp-1011-castrol-syntec-top-car-challenge-nissan-gtr/29181584/eurp_1011_02_o+castrol_syntec_top_car_challenge+lift.jpg">
</div>
</div><!--end of main-->
<div class="main-two">
<p id="two-header">Schedule today for a free consultation</p>
<div class="article">
<img class="image" src="http://s3-media2.fl.yelpcdn.com/bphoto/YDLPwsEk_fMXIw9Xwu_8rw/ls.jpg">
</div>
<div class="article">
<img class="image" src="http://image.trucktrend.com/f/tech/1011tr_2004_gmc_sierra_buildup/28770854/1011tr_03+2004_GMC_sierra_buildup+factory_ring_and_pinion.jpg">
</div>
<div class="article">
<img class="image" src="http://aautomotivetx.com/wp-content/uploads/2013/04/Brakes.jpg">
</div>
</div><!--end of main-two-->
<div class="main-three">
<p id="two-header">Guranteed service for 30 days</p>
<div class="article">
<img class="image" src="http://bernalautobodyrepair.com/images/paint_booth.jpg">
</div>
<div class="article">
<img class="image" src="https://www.bkreader.com/wp-content/uploads/2015/06/welding-1.jpg">
</div>
<div class="article">
<img class="image" src="http://cdn.instructables.com/F4Q/QD4F/HHS9SLP0/F4QQD4FHHS9SLP0.LARGE.jpg">
</div>
</div><!--end of main-three-->
<footer class="footer">
<p class="copyright">Schedule now! Call today at (123)456-7890.</p>
<p class="copyright-two">Copyright © All Rights Reserved.</p>
<div class="social-icons">
<img src="http://www.voxlumiere.com/wp-content/uploads/2009/12/facebook-logo-resized-image-50x50.png"/>
<img src="http://www2.actionforchildren.org.uk/media/128162/twitter_50x50.jpg"/>
<img src="http://www.clickondetroit.com/image/view/-/21435108/highRes/1/-/ubsa5pz/-/50x50-Instagram-logo-png.png"/>
</div><!--end of social-icons-->
</footer>
</div><!--end of wrapper-->
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: arial, sans-serif;
color: black;
background-image: url("http://www.theonecar.com/wp-content/uploads/2014/02/car-shops-499.jpg"), url("http://i.ytimg.com/vi/1n5j3sy-Rok/maxresdefault.jpg");
background-repeat: no-repeat;
background-position: top, bottom;
}
.wrapper {
font-size: 1.6em;
margin: 0 auto;
width: 990px;
background-color: white;
/*padding: 2em;*/
}
header {
background-color: white;
height: 50px;
display: block;
width: 100%;
}
header h1 {
float: left;
padding: 5px;
color: rgb(95, 207, 128);
margin-top: 5px;
margin-left: 100px;
font-size: 1.8em;
}
.navlist a {
text-decoration: none;
color: black;
}
.navlist a:hover {
color: white;
background-color: rgb(95, 207, 128);
padding: 15px;
}
.navlist {
float: right;
display: inline-block;
text-align: center;
padding: 15px;
font-size: 1.2em;
}
.main {
min-height: 20px;
background-color: rgb(95, 207, 128);
display: block;
width: 100%;
}
.main p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.image {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
}
.main-two {
background-color: #39ADD1;
display: block;
}
.main-two p {
color: white;
font-size: 1.6em;
padding: 50px;
text-align: right;
width: 100%;
}
.main-three {
min-height: 20px;
background-color: #f08c35;
display: block;
width: 100%;
}
.main-three p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
footer {
background-color: #294860;
}
.copyright {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.copyright-two {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.social-icons {
display: inline-block;
padding: 5px;
margin-left: 40.2%;
width: 100%;
}
.social-icons a {
margin-left: 5px;
header {
...
width: 100%;
min-width: 990px;
position: fixed;
left: 0;
}
Demo
You're seeing horizontal scrolling because the site loads in a frame. That shouldn't happen in a full browser window.
you header would need to be outside the wrapper since the wrapper is 990px wide.
make the header width 100% but it needs to either be on the root of the div structure or in another 100% width element.
Because it's inside you're <div class="wrapper"> It's not possible,
Move it above the wrapper and it should work.
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="wrapper">
I've done some searching and I just can't seem to find out what's wrong. My main content keeps overlapping the banner. I tried using the position and overflow hidden and auto but I still can't seem to get it right.
Here's the html
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
</div></div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer"></div>
</p>
</body>
Here's the CSS:
body {
background: #F9F9F9; margin: 0 auto; padding: 0; font: color: #FFFFFF; text-align: center}
a {
color: #2b2bf6;}
#header {
float: left;
position: fixed;
Align: left;
clear: both;
width: 0x;
max-width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background:
#FFFFFF;
z-index: 2;}
#Navigation {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
background: #000000;
Font-size: 18px;
float: right;
position: fixed;
z-index: 1;
display: incline-block;
}
#Navigation Container {
WIDTH: 100%;
float: right;
background: #282828;
position: fixed;
z-index: 0;}
#Banner {
height: 100%;
width: 100%;
margin: auto;
padding-top: 70px}
#wrapper {
width: 100%;
overflow: hidden; }
#container {
width: 100%;
margin: 0 auto; }
#banner-img {
width: 100%;}
#dropdown {
position: relative;
overflow: hidden; }
#MainContent {
margin-top: -270px;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 100px;
text-align: left;}
#footer {
width: 100%;
height: 120px;
background: #282828;
padding: 0px; }
#navwrap {
width: 160px;
height: 70px;
Float: right;
display: incline-block;
z-index: 4; }
#Searchbar {
float: left;
padding: 20px;
}
ul{
padding: 0;
list-style: none;
height: 70px;
}
ul li{
float: right;
width: 110px;
text-align: center;
line-height: 21px;
}
ul li a{
display: block;
height: px;
padding: 5px 10px;
color: #333;
background: #282828;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #3d3d3d;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
}
Please help.
There are a few discrepancies in the HTML posted by you.
I have corrected the same. Can you please reuse the HTML and check.
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer">
</div>
</p>
</body>
</html>
I've looked up how to stick the footer to the bottom of the page but i'm having trouble making it actually work! If i post my code can you look at it and change it to make it work, but also explain how you did it?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Aaron Kelsey - Home</title>`enter code here`
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="header_wrapper">
<ul id="navigation">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
</div>
<div id="line-1"></div>
<div id="line-2"></div>
<div class="content">
<img class="header" src="images/header.png">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
body{
margin: 0 auto;
padding:0;
margin: 0;
height: 100%;
background-color: #F5F5F5;
}
img.header{
display: table;
margin: 0 auto;
}
#wrapper{
min-height: 100%;
position: relative;
}
.header_wrapper{
display: table;
margin: 0 auto;
width: 1000px;
height: 50px;
position: relative;
padding:10px;
}
.content{
position: relative;
margin: 0 auto;
width: 1000px;
height: 100%;
min-height: 100%;
padding:10px;
padding-bottom:150px;
}
.footer{
position: absolute;
margin: 0 auto;
bottom: 0px;
width: 100%;
height: 150px;
background-color: #E0E0E0;
}
#line-1{
position: absolute;
margin: 0 auto;
width: 100%;
height: 1px;
background-color: #E0E0E0;
top: 10px;
}
#line-2{
position: absolute;
margin: 0 auto;
width: 100%;
height: 1px;
background-color: #E0E0E0;
top: 50px;
}
#navigation {
position: relative;
width: 1000px;
height: 10px;
font-size: 18px;
font-family: Arial;
font-weight: bold;
top: 20px;
text-align: center;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #A9A9A9;
}
#navigation a:hover {
color: #1e1e1e;
}
You have your footer inside of the wrapper. It is fixed at the bottom of that div but not the body.
take the footer div outside of your wrapper and it is good to go.
<div id="wrapper">
<div class="header_wrapper">
<ul id="navigation">
<li>HOME
</li>
<li>ABOUT
</li>
<li>WORK
</li>
<li>CONTACT
</li>
</ul>
</div>
<div id="line-1"></div>
<div id="line-2"></div>
<div class="content">
<img class="header" src="images/header.png" />
</div>
</div>
<div class="footer"></div>
JSFIDDLE
Also in your footer you don't need to have margin: 0 auto; since it is 100%. The next thing is close your image tags like so, <img src="" alt="" />.