0

我需要在屏幕顶部中心有徽标。在徽标下我需要导航栏。

我有以下CSS：

    * {
    margin: 0;
    padding: 0;
}

body {
    background: url(images/bg_image.jpg);
    background-size: 100%;      
    font-size: 14px;
    font-family: Verdana;
    color: #ffffff;
}
    #header {
    background: url(images/logo2.png);    /* THIS IS LOGO IMAGE IN CENTER*/     
    background-repeat:no-repeat;
    background-position: center 20px;    /* CENTERING AND TOP MARGIN IS 20PX*/
    height: 180px;      
}
/* NAVIGATION BAR */
#top-nav{       
    border:0px solid #ccc;      
    list-style:none;    
    /*margin-top:135px;*/
    padding: 0;
    text-align:center;              
    background-color: #000000;
}

#top-nav li {       
    display:inline;
    width:130px;
}

#top-nav a{
    display:inline-block;
    padding:10px;
    text-decoration: none;
    color: white;
}   

#top-nav a:hover{
    background: url(images/selected_menu.png);      
    background-repeat:repeat-x; 
}

和 HTML

   <body>

    <div id="header">           
        <ul id="top-nav">
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
        </ul>           
    </div>
            ....

这给了我在中心和顶部的标志。但导航栏上的标志。我需要它在徽标下（它应该距离屏幕顶部 135 像素）。如果我将边距添加到#top-nav margin-top: 135px，那么徽标也会移动 135px。解决这个问题的正确方法是什么？

我想这是一个简单的问题，但这是我第一次将 psd 切片为 html。

4

2 回答 2

2

向 Header div 元素添加填充，例如padding-top:135px

于 2013-02-06T08:02:30.150 回答
0

你应该像这样将你的标志和你的导航分开

<header>
   <div id="logo"></div>
  <ul id="top-nav">
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
   </ul>  
</header>

并提供您的徽标width:100%和背景图像。

于 2013-02-06T08:06:33.437 回答