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は "Dashboard"と表示される緑色の単語です。

私はmenuItem、menu、およびtitleTextをスタイルして、下の正しい画像のように表示し、IE7でも動作するようにしますか？

ご協力いただければ幸いです。私はこの盲目的にしばらく努力してきました。

Answer 1

絶対配置（左、上）または浮動（パディング左、パディングトップ、浮動小数点：左）のどちらかを使用します。両方の組み合わせではありません。

ところで、これはメニューだけでなく、右側のタイトルにも当てはまります。

Answer 2

削除位置：#menuitemから絶対、およびtitleText divのため

#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に指定する必要はありません。

その唯一の目的は、を基準にしてを保持しているように見えましたが、絶対に配置する必要はありません。

Answer 4

これは非常に簡単ですが、メニューの上にダッシュボードのテキストを配置する必要があるため、htmlを少し変更する必要があります。

あなたはこの種のコードを考える必要があります：（blockとしてそれを宣言するあなたは、単にrightへh1をfloatすることができ、これは、あなたがあなたのCSSは非常に簡単行うことができます

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

）と、この後のleft

にul、あなたは、単に必要なマージンパディングや他のstyingを追加することができます。