メニューバーの左右をブラウザいっぱいに表示する - 本厚木のエンジニアブログではある

こんばんは、今日はHTML、CSSの勉強の中でわからなくなったことを書いていきます。

padding、marginが個人的に１番よくわからなくなりました。marginの相殺については
このサイト(http://kojika17.com/2012/08/margin-of-css.html)で調べました！
心の距離わかりやすかったです！

HTML、CSSの勉強

調べてもなかなか難しかったのが、widthを設定してある横並びのメニューを中心にしてメニューバーの左右をブラウザいっぱいにすることでした。
メニューバーのHTML、CSSはこんな感じです。

HTML

   <div id="top_menu">
      <ul class="clearfix">
        <li>
          <a href="#"><img alt="トップページ" src="images/header/nav01.jpg"></a>
        </li>

        <li>
          <a href="#"><img alt="事業概要" src="images/header/nav02.jpg"></a>
        </li>

        <li>
          <a href="#"><img alt="施工事例" src="images/header/nav03.jpg"></a>
        </li>

        <li>
          <a href="#"><img alt="会社概要" src="images/header/nav04.jpg"></a>
        </li>

        <li>
          <a href="#"><img alt="お問い合わせ" src="images/header/nav05.jpg"></a>
        </li>
      </ul>
    </div><!--top_menu-->

  <div id="top_image"><img alt="画像" src="images/top/main_visual.jpg"></div>
  <!--top_image-->

  <div class="main">
    <div class="top clearfix">
      <div class="left">
        <ul>
          <li>
            <a href="#"><img alt="求人募集" src="images/sidebar/banner01.jpg"></a>
          </li>

          <li>
            <a href="#"><img alt="協力業者募集" src=
            "images/sidebar/banner02.jpg"></a>
          </li>

          <li>
            <a href="#"><img alt="あいうえお" src="images/sidebar/banner03.jpg"></a>
          </li>
        </ul>
      </div><!--left-->
    </div><!--main-->
  </div><!--top-->

上記ではリストタグで用意してあった画像を並べてあります、

で囲う所がかなり大事でした、以下のCSSで説明していきます！

CSS

#top_menu{
  margin: 0 auto;  
  width:100%;
  background:url(images/header/nav_bg.jpg) left top repeat-x;
}

#top_menu ul{
  margin: 0 auto;/*センターへ*/
  padding: 0;
  overflow: hidden;/*あふれた部分を表示しない*/
  width:980px;    
}

#top_menu ul li{
  float: left;/*フロートを使ってつめていく*/
  margin: 0 ;/*デフォルトのmarginを0にする*/
  list-style-type:none;/*リストの丸をなくす*/
}

#top_menu ul li img{
  vertical-align: text-bottom;
}

上記のCSSの説明をしていきます、まず、#top_menuのmargin: 0 auto;というのは要素をセンターにもっていくものです！
width:100%;は横並びメニューの横をブラウザいっぱいにするためのものです！
background:url(images/header/nav_bg.jpg) left top repeat-x;これは小さい画像だったので横方向に繰り返すようにしました。 #top_menu ulはIDがtop_menuの中にある<ul>で囲われている場所を指しています、
この中でwidthを980pxで指定しているのでメニューバーの横をいっぱいにブラウザに表示してあげようとすると、幅が決められてしまっているので横並びにしたメニューが崩れます、なのでひとつ前のブロックでwidthを100％で背景を設定してあげることでメニューバーの横をブラウザいっぱいにすることができます。

※勉強のメモ程度なのであっているかわかりません