メニューバーの左右をブラウザいっぱいに表示する
こんばんは、今日はHTML、CSSの勉強の中でわからなくなったことを書いていきます。
padding、marginが個人的に1番よくわからなくなりました。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
#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%で背景を設定してあげることでメニューバーの横をブラウザいっぱいにすることができます。
※勉強のメモ程度なのであっているかわかりません