2012-04-28 3 views
0

누군가 이미이 작업을 수행 했음에 틀림 없으나 배경 이미지와 테이블 작업을 포함한 모든 작업을 수행하지 않았습니다. 인라인 ul 탐색 바 옆에 세로로 이미지 정렬

나는 960 픽셀 넓은 래퍼를 가지고 있고, 현재 코드 나는 표시를 상향 링크 탐색 표시 줄과 같은 줄에 헤더가 있습니다

____________________________________________________________ 
!   h2 text   ! menu1 ! menu 2 ! menu3 ! 
____________________________________________________________ 

내가하는 로고가있는 H2 텍스트를 대체 할을 현재 텍스트 라인보다 키와 같은 바닥에 모든 것을 줄 :

___________________________ 
!       !  
!  LOGO.jpg   ! 
!       !________________________________ 
!       ! menu1 ! menu 2 ! menu3 ! 
____________________________________________________________ 

및 배경 이미지, 테이블, 내가 생각할 수있는 다른 모든 시도 후, 내가 할 수있는 최선은 그 상단의 로고는 이와 같이 메뉴 막대의 맨 위에 정렬됩니다.

#header { 
position: relative; 
display: block; 
background-color: #003366; 
} 


#header ul { 
position: absolute; 
right: 0px; 
top: 2px; 
} 

#header ul li { 
list-style: none; 
display: inline; 
} 

img.bottom 
    { 
vertical-align:text-bottom; 
    } 

<div id="header"> 
<img src="src/logo.jpg" width="414" height="140" class="bottom" /> 
    <div id="navbar"> 
      <ul>    
<li><a href="menu1.htm"><span>Home</span></a></li> 
<li><a href="menu2.htm"><span>About</span></a></li> 
<li><a href="menu3.htm"><span>Contact</span></a></li> 
     </ul> 
</div> 
    </div> 

는 JPG의 하단에 정렬되도록 아래로 해당 메뉴를 이동 할 수있는 쉬운 방법이 있나요 : 순간
____________________________________________________________ 
!       ! menu1 ! menu 2 ! menu3 ! 
!  LOGO.jpg   !_______________________________! 
!       ! 
!       ! 
___________________________! 

는이 코드를 ?

답변

1

머리글의 높이를 자동으로 설정하고 ul을 아래쪽에 배치 할 수 있습니다. 여기에 jsfiddle가 있습니다. http://jsfiddle.net/YBrkB/

+0

고마워요! 그것은 놀랍도록 간단했고 그것을하는 가장 우아한 방법처럼 보입니다. – FrugalYankee

+0

문제 없습니다. 위의 해결 방법이 도움이 되었다면 올바른 것으로 표시하는 것을 잊지 마십시오. – koenpeters