徽標div不會改變

我在我的html中有一個叫做logo的div，我想要做的就是放下margin-top or padding-top這個徽標，這樣它的身體背景就不會很難了。徽標div不會改變

我已經嘗試了以上，但我不能得到它的預算。

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><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; 
}

來源

2011-10-14 Jess McKenzie

增加'＃logo'了'保證金top'似乎很好地工作：http://jsfiddle.net/ h77v7/...或者我誤解了你想要做的事情？ –

因爲它的背景圖片，你有（通過填充或保證金），以增加空間外股利。

<div style="padding:10px;"> 
    <div id="logo"/> 
</div>

來源

2011-10-14 21:21:47 egrunin

謝謝，我以爲只是雙重檢查 –

最好使用圖像替換技術。使用<h1>標籤，而不是<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; 
}

來源

2011-10-15 02:42:31 rizqyhi

''標籤實際上最適合用於實際標題，所以搜索引擎蜘蛛對網站內容有了更清晰的概念 –

徽標div不會改變

回答

相關問題