CSS를 사용하여 이러한 요소를 올바르게 정렬하려면 어떻게해야합니까? 여기

Question

내 메뉴는 지금 모습입니다 :
여기

내가 보이게하는 방법입니다 :

을 지금 내가 가지고있는 다음과 같은 CSS :

#menu 
{ 
    position:relative; 
    width: 940px; 
    height:90px; 

} 

#menuItem 
{ 
    position: absolute; 
    bottom: 0px; 
    padding-left: 50px; 
    float: left; 
    width: 600px; 
} 

.titleText 
{ 
    float: right; 
    color:#209202; 
    font-size:22px; 
    font-style:italic; 
    font-family:Georgia; 
    font-weight:bold; 
} 

그리고 다음 HTML :

<div id="titleBar"> 

     <div id="menu"> 
      <div id="menuItem"> 


<ul class="tabs"> 
    <li><a href="/dashboard/"> 

     <img alt="Dashboard" src="/Content/Images/Dashboard_green.png" /> 
     </a> 
    </li> 
    <li><a href="/placements/"> 

     <img alt="Place Accounts" src="/Content/Images/Place_Accounts_white.png" /> 
     </a> 
    </li> 
    <li><a href="/messages"> 

     <img alt="Messages" src="/Content/Images/Messages_white.png" /> 
     </a> 
    </li> 
    <li><a href="/reports"> 

     <img alt="Reports" src="/Content/Images/Reports_white.png" /> 
     </a> 
    </li> 
    <li><a href="/admin"> 

     <img alt="Admin" src="/Content/Images/Admin_white.png" /> 
     </a> 
    </li> 
</ul> 

      </div> 
       <div class="titleText"> 

     Dashboard 

     </div> 
     </div> 

    </div> 

나는 오른쪽에서 titleText 40px, 상단에서 50px를 얻고, 왼쪽 아래에서 40px로 떠 다니는 탭을 갖기 위해 수백만 가지를 시도했다. 그러나 내가 시도한 모든 것은 닫히지 만 IE7에서는 작동하지 않는다. 몇 가지 이유.

메뉴는 전체 회색 막대 영역을 나타냅니다. menuItem은 탭입니다. titleText는 "대시 보드"라는 녹색 단어입니다.

menuItem, menu 및 titleText 스타일을 지정해야 올바른 이미지가 아래처럼 표시되고 여전히 IE7에서 작동합니까?

도움을 주시면 감사하겠습니다. 나는이 맹목적으로 잠시 노력했다.

Answer 1

절대 위치 지정 (왼쪽, 위쪽) 또는 부동 (왼쪽 패딩, 패딩 위쪽, 부동 : 왼쪽) 중 하나를 사용합니다. 둘 다의 조합이 아닙니다.

그건 그렇고 : 그것은 메뉴뿐만 아니라 오른쪽의 제목에도 적용됩니다.

Answer 2

제거 위치 : #menuitem에서 절대 및 titleText 사업부를 들어

#menu 
{ 
    position:relative; 
    width: 940px;  
    height:40px; /* remember that height + padding = total height */ 
    padding-top:50px; /* adjust as necessary to push the tabs and text down */ 
} 

#menuItem 
{ 
    padding-left: 50px; 
    float: left; 
    width: 600px; 
} 

Answer 3

을 #menu하는 최고 패딩을 추가, 당신은 ... 그냥에게 여유를 줄 수 있어야

.titleText 
{ 
    float: right; 
    color:#209202; 
    font-size:22px; 
    font-style:italic; 
    font-family:Georgia; 
    font-weight:bold; 
    margin: 50px 40px 0 0; 
} 

모를 경우를 대비하여 마진을위한 4 개의 매개 변수를 나열하면 다음과 같이 지정됩니다. ...

여백 : TOP RIGHT BOTTOM LEFT

조엘 포터의 대답에 관해서라면, 절대 위치를 #menuItem에서 없애고, position: relative을 #menu으로 지정할 필요가 없습니다.

유일한 목적은 을 #menu과 관련하여 유지하는 것처럼 보였지만 이제는 절대 배치하지 않고도 그럴 필요가 없습니다.

Answer 4

이것은 매우 쉽지만 HTML 위에 약간의 변경이 필요합니다. 메뉴 위에 대시 보드 텍스트를 배치해야하기 때문입니다.당신은 단순히 floatright (에 h1가 block로 선언 할 수 있습니다로

<div id="mainmenu"> 
    <h1>Dashboard</h1> 
    <ul> 
     <li><a href="/dashboard/"><img alt="Dashboard" src="/Content/Images/Dashboard_green.png" /></a></li> 
     <li><a href="/placements/"><img alt="Place Accounts" src="/Content/Images/Place_Accounts_white.png" /></a></li> 
     <li><a href="/messages"><img alt="Messages" src="/Content/Images/Messages_white.png" /></a></li> 
     <li><a href="/reports"><img alt="Reports" src="/Content/Images/Reports_white.png" /></a></li> 
     <li><a href="/admin"><img alt="Admin" src="/Content/Images/Admin_white.png" /></a></li> 
    </ul> 
</div> 

이, 당신은 당신의 CSS가 훨씬 쉽게 만들 수 있습니다 :

당신은 이러한 종류의 코드에 대해 생각해야) 및 ul을 left

다음에 추가하면 필요한 여백과 기타 검가를 간단히 추가 할 수 있습니다.