How come my padding isnt working on my logo div it was working before i added an extra div but i still cant see the reason it isn't working.Please check out my code to figure out if you can help me :)
<!DOCTYPE html>
<html>
<head>
<title>Learning Javacript</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="contact_info">
<div class="email">
<img src="icons/icon_mail.png">
<p>contact#thislooksgreat.net</p>
</div>
<div class="phone">
<img src="icons/icon_phone.png">
<p>+40.727.123.456</p>
</div>
<div class="Social_Media">
<ul>
<li><img src="Social/facebook.png"></li>
<li><img src="Social/twitter.png"></li>
<li><img src="Social/youtube.png"></li>
<li><img src="Social/googleplus.png"></li>
<li><img src="Social/linked.png"></li>
</ul>
</div>
<div class="language">
<p>ENGLISH</p>
<img src="icons/arrow.png">
</div>
</div>
</header>
<div class="main_real">
<div class="main_img">
<div class="main_nav_width">
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
html,body,h1,h2,h3,h4,h5,h6,p,li,ul,a,nav{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:#143e6e;
height:40px;
border-top:6px solid #0d2f57;
}
.contact_info{
width:1200px;
margin:0 auto;
}
.contact_info p, img{
float:left;
}
.email p,img{
float:left;
}
.email .phone, p{
padding-top:12px;
padding-right:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:white;
}
.email img{
padding-top:11px;
padding-right:10px;
}
.phone p,img{
float:left;
}
.phone img{
padding-top:7px;
}
.Social_Media ul{
padding-top:10px;
padding-left:25px;
float:right;
}
.Social_Media li{
display:inline;
}
.Social_Media img{
padding-right:25px;
}
.Social_Media li:last-child img {
padding-right:0px
}
.language{
float:right;
}
.language p{
padding-right:0px;
}
.language img{
padding-top:15px;
padding-left:5px;
}
.main_nav_width{
width:100%;
background-color:white;
box-shadow: 0 5px 6px -6px black;
}
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:35px;
height:55px;
}
nav li{
display:inline;
}
nav li:last-child a{
margin-right:0px;
}
nav a{
width:50px;
margin-right:20px;
margin-left:20px;
padding-top:33px;
padding-bottom:40px;
text-decoration:none;
height:90px;
color:#143e6e;
}
nav a:hover {
width:90px;
padding-top:35px;
text-decoration:none;
height:15px;
color:#143e6e;
border-bottom:5px solid blue;
padding-bottom:33px;
}
nav li:last-child a:hover{
width:70px;
margin-left:20px
}
.main_img{
background-image: url("images/imac.png");
background-repeat:no-repeat;
background-position: 780px 64px;
background-repeat: no-repeat;
background-size:500px 500px;
width:100%;
height:650px;
}
.main_real{
background-image: url("images/background_jumbo.jpg");
background-repeat:no-repeat;
background-position: right top;
background-size:100% 480px;
width:100%;
}
Check your brackets. The extra curly brace might be throwing you off. If not try get a JSFiddle up.
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
Related
I cant seem to figure out how to overlap my nav bar so that it will always be on full display when scrolling. The code is given below. Please help me as i am lost for a few days. I've fixed the navagation bar by using position:fixed. i dont know whether my position of div element is wrong or there is something that i should ve known earlier before making a fixed navigation bar.
`
body{
background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/04/Blue-icy-ocean-wallpaper-HD.jpg');
}
*{
padding:0px;
margin:0px;
}
#maindiv{
width:100%;
height:100px;
}
#navdiv ul{
width:100%;
height:80px;
background-color:#000916;
line-height:80px;
position:fixed;
}
#navdiv ul li{
list-style-type:none;
display:inline-block;
float: right;
}
#navdiv ul a{
text-decoration:none;
color:white;
padding:20px;
}
#navdiv ul a:hover{
background:#000948;
transition: all 0.40s;
}
#navdiv h1{
color:white;
float:left;
width:200px;
margin-left:20px;
margin-top:10px;
cursor:pointer;
}
#about{
width:50%;
margin:auto;
background-color:#000916;
border-radius:30px;;
}
#about p{
color:white;
}
#left-text1{
padding-left:10px;
padding-top:10px;
}
.resize{
width:400px;
height:auto;
border-radius:30px;
}
<head>
<title>Portfolio</title>
</head>
<body>
<div id="maindiv">
<div id = "navdiv">
<ul>
<h1>Danial</h1>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="about">
<div class="row">
<div class="col-md-6">
<p id="left-text1">Welcome to my Site<br>I am a front-end web developer who loves to cooperate and involve in projects to either earned money or earned experience</p>
</div>
<div class="col-md-6">
<img class="resize"src="https://www.123freevectors.com/wp-content/uploads/digi/casual-man-standing-free-vector-17.jpg">
</div>
</div>
</div>
</body>
`
body{
background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/04/Blue-icy-ocean-wallpaper-HD.jpg');
}
*{
padding:0px;
margin:0px;
}
#maindiv{
width:100%;
height:100px;
}
#navdiv ul{
width:100%;
height:80px;
background-color:#000916;
line-height:80px;
position:fixed;
/* you can set who you want to be infront by the z-index prop */
z-index:99999;
}
#navdiv ul li{
list-style-type:none;
display:inline-block;
float: right;
}
#navdiv ul a{
text-decoration:none;
color:white;
padding:20px;
}
#navdiv ul a:hover{
background:#000948;
transition: all 0.40s;
}
#navdiv h1{
color:white;
float:left;
width:200px;
margin-left:20px;
margin-top:10px;
cursor:pointer;
}
#about{
width:50%;
margin:auto;
background-color:#000916;
border-radius:30px;;
}
#about p{
color:white;
}
#left-text1{
padding-left:10px;
padding-top:10px;
}
.resize{
width:400px;
height:auto;
border-radius:30px;
}
<head>
<title>Portfolio</title>
</head>
<body>
<div id="maindiv">
<div id = "navdiv">
<ul>
<h1>Danial</h1>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="about">
<div class="row">
<div class="col-md-6">
<p id="left-text1">Welcome to my Site<br>I am a front-end web developer who loves to cooperate and involve in projects to either earned money or earned experience</p>
</div>
<div class="col-md-6">
<img class="resize"src="https://www.123freevectors.com/wp-content/uploads/digi/casual-man-standing-free-vector-17.jpg">
</div>
</div>
</div>
</body>
The border after every menu item ie after news,sports,whether etc are extending the top bar the height should be similiar to the top bar should not go out of the top bar
And also the the bar below the top bar which is news bar is not displaying properly check the image link which is the required output for ref see the images click on This is correct image link below
To see the code click the link below "Click Me to see the code"
This is correct image
Click Me to see the code
**HTML**
<html>
<head>
<title> BBC NEWS</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
height:40px;
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1150px;
}
.bbclogo{
padding:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 0 20px;
line-height:1;
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
Removed the height of navbar and made necessary changes
Demo Link
<html>
<head>
<title> BBC NEWS</title>
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
/*height:40px;*/ /* removed*/
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1050px;
}
.bbclogo{
padding:13px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding: 4px 20px 0 20px; /* changed */
line-height: 2.8; /* added */
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
for newsbar you have to change your height and width like below :
.newsbar{background-color:#990000; height:5000px; width:100%; color:white; }
Will definately works ☺
The red bar is overlapping the topbar when it should be right below it, also even though I set the width to be 100% it's not extending the whole way across. I copied the CSS code from the topbardiv CSS, but it still wasn't working properly.
Image:
Code:
<head>
<title>Grace's WRAL</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin:0;
}
#topbar {
background-color:#0C1F2F;
width:100%;
height:95px;
}
.fixedwidth {
width:1095px;
margin:0 auto;
}
#logodiv {
padding:10px 0 0 45px;
float:left;
}
#topmenudiv {
}
#topmenudiv ul {
background-color:none;
padding:8px 0 0 35px;
margin:0;
height:20px;
}
#topmenudiv li {
list-style:none;
color:#008ECD;
font-size:0.9em;
font-family:Gill Sans;
border-right:1px solid #008ECD;
padding: 0 6px 0 10px;
float:left;
background-color:none;
}
#alertdiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 334px 0 334px;
font-size:0.9em;
}
#alertdiv p {
float:right;
margin-top:1px;
font-family:Gill Sans;
padding:0 5px 0 5px;
}
#signindiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 271px 0 271px;
}
#signindiv p {
margin-top:1px;
font-size:14px;
font-family:Baskerville;
margin-top:-8px ! important;
}
#searchdiv {
float:right;
margin-top:-33px ! important;
padding:0 55px 0 55px;
}
#searchdiv input {
height:15px;
width:190px;
background-color:#093B51;
border:none;
font-size:0.9em;
padding:5px 6px 6px 5px;
background-image:url("file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Search_Icon.png");
background-repeat:no-repeat;
background-position:right center;
}
#searchdiv input:focus {
background-color:#FFFFFF;
}
#searchdiv input::-webkit-input-placeholder {
color: white;
text-transform:none;
font-size:13px;
padding-left:5px;
}
#topicmenudiv {
}
#topicmenudiv ul {
background-color:none;
margin:0;
}
#topicmenudiv li {
list-style:none;
float:left;
color:white;
padding:15px 0 0 15px;
font-family:Gill Sans;
font-size:16px;
}
#currentweatherdiv {
float:right;
font-size:33px;
padding:8px 8px 0 0;
color:white;
}
#currentweatherdiv img {
float:right;
padding-top:4px;
}
#currentweatherimgdiv {
float:right;
padding:10px 50px 0 0;
}
.break {
clear:both;
}
#newsbardiv {
background-color:red;
width:100%;
height:95px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="topmenudiv">
<ul>
<li>Noticias</li>
<li>Instant Savings</li>
<li>Classifieds</li>
<li>Jobs</li>
<li style="border-right:none">Real Estate</li>
</ul>
</div>
<div id="alertdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Alert_Icon.png" /> <p>Alert</p>
</div>
<div id="signindiv">
<p>Sign In</p>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
<div id="logodiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/WRAL_logo.png" />
</div>
<div id="topicmenudiv">
<ul>
<li>News</li>
<li>Weather</li>
<li>Sports</li>
<li>Business</li>
<li>Consumer</li>
<li>Health & Life</li>
<li>Entertainment</li>
<li>Video</li>
</ul>
</div>
<div id="currentweatherimgdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Current_Weather.png" />
</div>
<div id="currentweatherdiv">
65 <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Degrees_Icon.png" />
</div>
<div class="break"></div>
<div id="newsbardiv">
<div class="fixedwidth"></div>
</div>
</div>
</div>
</body>
</html>
The red bar is nested inside a div with the class fixedwidth, which unsurprisingly has a fixed width of 1095px. So the width of the red bar can only be 1095px.
To debug a problem such as this, simply view it in Chrome, press F12, press Ctrl-Shift-C, and click on the element you want to inspect. It will explain what's going on.
One is issue is because .fixedwidth has a width of 1095px so your div can't be 100% because since it's nested 100% = 1095px.
Change .fixedwidth to this,
.fixedwidth {
width:100%;
margin:0 auto;
}
CODEPEN DEMO
I am trying to clone the BBC website for educational purposes.
My newsbar and topicdiv divs refuse to fill the width of the screen. I would like some help understanding as to why and how I can remedy the problem.
Any help would be greatly appreciated.
<!doctype html>
<html>
<head>
<title>Darren's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
background-color:violet;
/* This ensures the topbar stretches all the way across the screen and fills the top */
}
#topbar {
background-color:rgb(255,255,255);
width:100%;
height:40px;
color:black;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:0.8em;
}
.fixedwidth {
width:1000px;
margin:0 auto;
}
#logodiv {
padding-top:4px;
padding-right:5px;
padding-bottom:4px;
float:left;
border-right:1px solid #DDDDDD;
}
#signindiv {
padding:8px 85px 11px 15px;
float:left;
border-right:1px solid #DDDDDD;
}
#signindiv img {
position:relative;
top:3px;
padding-right:2px;
}
#menudiv ul {
margin:0;
}
#menudiv li {
padding:14px 17px 10px 17px;
list-style:none;
float:left;
border-right:1px solid #DDDDDD;
}
#searchdiv {
float:left;
padding:8px 0 0 10px;
}
#searchdiv input {
border:none;
background-color:#E4E4E4;
height:24px;
width:190px;
font-weight:bold;
font-size:0.9em;
padding:0 5px 0 5px;
background-image:url("images/search.png");
background-repeat:no-repeat;
background-position:right center;
}
#newsbar {
background-color:#BB1919;
height:55px;
}
#newsbar p {
margin:0;
font-size:2.7em;
color:white;
font-family:Verdana, Geneva, sans-serif;
padding-left:50px;
}
.break {
clear:both;
}
#topicdiv {
margin:0;
background-color:#A91717;
width:100%;
height:37px;
}
#topicdiv ul {
margin:0;
padding:12px 0 5px 37px;
}
#topicdiv li {
color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
list-style:none;
float:left;
border-right:1px solid #B73C3C;
padding-left:11px;
padding-right:11px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" />
</div>
<div id="signindiv">
<img src="images/signin.png" /> Sign In
</div>
<div id="menudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>Shop</li>
<li>Earth</li>
<li>Travel</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
<div class="break"></div>
<div id="newsbar">
<p>NEWS</p>
</div>
<div class="break"></div>
<div id="topicdiv">
<ul>
<li>Home</li>
<li>Video</li>
<li>World</li>
<li>Asia</li>
<li>UK</li>
<li>Business</li>
<li>Tech</li>
<li>Science</li>
<li>Magazine</li>
<li>Entertainment & Arts</li>
<li>Health</li>
<li>World News TV</li>
<li style="border-right:none">More...</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Both of those divs are nested in a fixed width div that has a width of 1000px. Percentages are worked out using the space available to that object, so 100% for those divs would be 1000px rather than the full width of your screen.
Just switch these 2 divs:
<div class="fixedwidth">
<div id="topbar">
Switching them will make #topbar to inherit its parent width.
demo
Here is what I did:
.fixedwidth {
//width:1000px;
margin:0 auto;
}
#topicdiv {
margin:0;
background-color:#A91717;
width:100%;
//height:37px;
position:absolute;
}
Here is the JSFiddle demo
<!doctype html>
<html>
<head>
<title>Darren's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
background-color:violet;
<!--This ensures the topbar stretches all the way across the screen and fills the top-->
}
#topbar {
background-color:rgb(255,255,255);
width:100%;
height:40px;
color:black;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:0.8em;
}
.fixedwidth {
width:1000px;
margin:0 auto;
}
#logodiv {
padding-top:4px;
padding-right:5px;
padding-bottom:4px;
float:left;
border-right:1px solid #DDDDDD;
}
#signindiv {
padding:8px 85px 11px 15px;
float:left;
border-right:1px solid #DDDDDD;
}
#signindiv img {
position:relative;
top:3px;
padding-right:2px;
}
#menudiv ul {
margin:0;
}
#menudiv li {
padding:14px 17px 10px 17px;
list-style:none;
float:left;
border-right:1px solid #DDDDDD;
}
#searchdiv {
float:left;
padding:8px 0 0 10px;
}
#searchdiv input {
border:none;
background-color:#E4E4E4;
height:24px;
width:190px;
font-weight:bold;
font-size:0.9em;
padding:0 5px 0 5px;
background-image:url("images/search.png");
background-repeat:no-repeat;
background-position:right center;
}
#newsbar {
background-color:#BB1919;
height:55px;
}
#newsbar p {
margin:0;
font-size:2.7em;
color:white;
font-family:Verdana, Geneva, sans-serif;
padding-left:50px;
margin: 0 auto;
width: 1000px;
}
.break {
clear:both;
}
#topicdiv {
margin:0;
background-color:#A91717;
width:100%;
height:37px;
}
#topicdiv ul {
margin:0;
padding:12px 0 5px 37px;
margin: 0 auto;
width: 1000px;
}
#topicdiv li {
color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
list-style:none;
float:left;
border-right:1px solid #B73C3C;
padding-left:11px;
padding-right:11px;
}
</style>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" />
</div>
<div id="signindiv">
<img src="images/signin.png" /> Sign In
</div>
<div id="menudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>Shop</li>
<li>Earth</li>
<li>Travel</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break"></div>
<div id="newsbar">
<p>NEWS</p>
</div>
<div class="break"></div>
<div id="topicdiv">
<ul>
<li>Home</li>
<li>Video</li>
<li>World</li>
<li>Asia</li>
<li>UK</li>
<li>Business</li>
<li>Tech</li>
<li>Science</li>
<li>Magazine</li>
<li>Entertainment & Arts</li>
<li>Health</li>
<li>World News TV</li>
<li style="border-right:none">More...</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I have a div in my html called logo and what I am trying to do is drop the margin-top or padding-top the logo so its not hard up against the body background.
I have tried the above but I cannot get it to budge.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Template 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo"></div>
<div id="line"></div>
<nav>
<ul>
<li>home</li>
<li>services</li>
<li>portfolio</li>
<li>contact us</li>
</ul>
</nav>
</header>
<section id="banner">
<img src="_assets/images/banner_1.jpg" alt="Banner" width="960px" height="161px" />
</section>
<section id="content">
<h1>Web Development Guru At Your Service </h1>
<p></p>
</section>
<footer>
<p>This is the footer</p>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/cufon-yui.js" type="text/javascript"></script>
<script src="_assets/js/Myriad_Pro_400-Myriad_Pro_700.font.js" type="text/javascript"></script>
<script src="_assets/js/js.js" type="text/javascript"></script>
CSS:
html{
height:100%;
width:100%;
background:url(../images/bg.jpg) repeat;
}
body{
width:960px;
height:100%;
background-color:#e3e3e3;
margin:42px auto;
}
p,h1,h2{
margin:25px;
font:Myriad Pro;
}
h1{
color:#000;
}
header{
width:100%;
height:210px;
}
#logo{
height:115px;
width:159px;
margin:0 auto;
background:url('../images/logo.png') no-repeat;
border:1px solid red;
}
header nav{
width:410px;
height:18px;
margin:20px auto;
}
header nav ul{
width:100%;
height:18px;
margin:0 auto;
}
header nav ul li{
float:left;
display:block;
margin:0 auto;
}
header nav li a{
float:left;
width:85px;
padding:0 3px 3px 3px;
font:18px Myriad Pro;
text-decoration: none;
color:#99999a;
}
header nav li a:hover, a:active{
font:18px Myriad Pro bold;
color:#67686a;
}
#line{
clear:both;
width:610px;
height:1px;
margin:0 0 0 235px;
background:url('../images/line.png') no-repeat;
}
#banner{
width:100%;
height:161px;
}
#content{
float:left;
width:100%;
height:100%;
background-color:#e3e3e3;
}
footer{
clear:both;
height:24px;
}
Because it's the background image, you have to add space (via padding or margin) outside the div.
<div style="padding:10px;">
<div id="logo"/>
</div>
It's better to use image-replacement technique. Using <h1> tag instead of <div>
HTML
<h1 id="logo">This is my logo</h1>
CSS
#logo{
height:115px;
width:159px;
margin:0 auto;
background:url('../images/logo.png') no-repeat;
background-repeat: no-repeat;
border:1px solid red;
text-indent:-9999px;
display:block;
overflow:hidden;
}