Question

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

我有以下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>
            ....

这给了我中心和顶部的Logo。但导航栏上有徽标。我需要它在徽标下面（它应该是从屏幕顶部135px）。如果我向＃top-nav margin-top：135px添加保证金，那么徽标也会被移动135px。解决这个问题的正确方法是什么？

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

Answer 1

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

Answer 2

您应该将您的徽标与导航分开，如下所示

<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%和背景图片。

在徽标下方添加导航

2 个答案: