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>
            ....

これにより、中央と上部にロゴが表示されます。しかし、ナビゲーションバーはロゴの上にあります。ロゴの下に配置する必要があります (画面上部から 135px の位置にある必要があります)。#top-nav margin-top: 135px にマージンを追加すると、ロゴも 135px 移動します。これを解決する適切な方法は何ですか？

これは簡単な質問だと思いますが、psd を html にスライスするのはこれが初めてです。

4

2 に答える 2

2

次のようなヘッダー 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 に答える