아래에 내비게이션 추가 로고

화면 상단 중앙에 로고가 있어야합니다. 로고 아래에 탐색 바가 필요합니다.아래에 내비게이션 추가 로고

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

이것은 중앙 상단에 나에게 로고를 제공합니다

나는 다음과 같은 CSS를 가지고있다. 그러나 네비게이션 바가 로고에 표시됩니다. 로고 아래 있어야합니다 (화면 상단에서 135 픽셀이어야합니다). 상단 여백 margin-top : 135px에 여백을 추가하면 로고도 135px 이동합니다. 이것을 해결할 수있는 적절한 방법은 무엇입니까?

나는 이것이 간단한 질문이라고 생각하지만, 이것은 psd를 html로 슬라이스 할 때 처음입니다. padding-top:135px

출처

2013-02-06 renathy

추가 패딩이

<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-06 08:02:30 Techmonk

같은 헤더 div 요소의 뭔가

출처

2013-02-06 08:06:33

아래에 내비게이션 추가 로고

답변

관련 문제