Logo div won't budge
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>T开发者_StackOverflow中文版emplate 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo"></div>
<div id="line"></div>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">services</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact us</a></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;
}
加载中,请稍侯......
精彩评论