香川県の新築・一戸建て・工務店なら石田工務店

香川県の新築,一戸建て,工務店の「石田工務店」は親切丁寧な地域密着型の会社です。一生に一度の大切な買い物は安心・信頼の香川県の石田工務店へ!

新築一戸建て・工務店(愛知県)なら三昭堂

新築一戸建て,工務店(愛知県)なら「三昭堂」。地域密着型の会社です。一生に一度の大切な買い物は安心の新築一戸建て,工務店、「三昭堂」へ!

信頼のリフォーム(姫路)なら大聖住宅

姫路のリフォームなら「大聖住宅」。自然素材で健康住宅も手がける会社です。リフォームで失敗しない、大切な家をお願いするなら姫路市工務店の 「大聖住宅」へ!

  

モンスターカレンダー

? 2009年5月 ?
12345678910111213141516171819202122232425262728293031

2009年5月16日アーカイブ

今回はWEBサイトで必須要素と言ってもいいグローバルメニューをCSSで記述してみたいと思う。一般に横並びのメニューのCSSでの記述は<LI>タグで各ボタンを設置し、<LI>タグにフロートをかけることで横並びになる。あと、注意する箇所は<LI>タグはデフォルトでリストタイプが設定されているので外さなければならない。

index.html ※↓いくつか<li>の閉じタグが消えています


common.css
/*-------------------------
  グローバルナビゲーション
--------------------------*/

#globalnavi{
  margin: 0;
  padding: 0;
  width: 600px; /*各リストの合計の幅*/
}

#globalnavi ul{
  list-style-type: none; /* リストスタイルタイプを外す*/
  margin: 0;
  padding: 0;
}

#globalnavi li{
  float: left; /* フロートで横に並べていく */
  width: 100px;
  margin: 0;
  padding: 0;
}

#globalnavi a{
  text-align: center;
  display:block;
  padding: 0.5em 0;
  width: 100%;
  background-color: black;
  color: white;
}

/* ロールオーバー */
#globalnavi a:hover{
  background-color: red;
  color: white;
}

ブログ村 IT系資格 へ1票お願いします   |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |

ランキングに参加しています!
Support by