スポンサーサイト

一定期間更新がないため広告を表示しています

0
    • 2012.07.15 Sunday
    • -
    • -
    • -
    • -
    • -
    • by スポンサードリンク

    IE7の型崩れ vol.1 -ナビ-

    「IE7の型崩れ」では、私自身が過去にやらかしたIE7で型崩れをしたパターンを不定期的に(笑)書いていく予定です。私自身の覚え書きでもありますが、Webデザイナーの卵さんの参考になれば幸いです。なお、スマホやモバイルでは正しく表示されない恐れがあります。

    さて、今回のネタは、Webサイトを制作する人であれば誰でも作ったことがある横長の「グローバルナビゲーション」です。

    IE7を使っている方でも綺麗に並んでいると思います。

    サンプルソースはこちら

    ***************************
              html
    ***************************

    <ul id = "navi">
    	<li class = "navi_btn"><a href = "#">ホーム</a></li>
    	<li class = "navi_btn"><a href = "#">ショップ</a></li>
    	<li class = "navi_btn"><a href = "#">会社概要</a></li>
    	<li class = "navi_btn"><a href = "#">リンク集</a></li>
    	<li class = "navi_btn"><a href = "#">お問い合わせ</a></li>
    </ul>
    

    ***************************
              css
    ***************************

    ul#navi{
    	margin:0 auto;
    	padding:0;
    	border:#900 1px solid;	
    	width:600px;
    	height:50px;
    	overflow:hidden;
    	list-style:none inside;
    }
    li.navi_btn{
    	border:0;
    	margin:0;
    	padding:0;
    	list-style-type:none;	
    	float:left;
    }
    li.navi_btn a,
    li.navi_btn a:link{
    	display:block;
    	width:120px;
    	line-height:50px;
    	background-color:#900;
    	color:#fff;
    	text-align:center;
    	text-decoration:none;
    }
    li.navi_btn a:hover,
    li.navi_btn a:active{
    	background-color:#fff;
    	color:#900;
    }
    .attention{
    	color:#f00;
    }
    

    問題はこちらのグローバルナビゲーション。

    IE8以降や、firefox,safari,chrome等を使っている方には先ほどと同じように見えてると思いますが、IE7では、

    ie7_navi.gif

    このように型崩れしていると思います。

    サンプルソースはこちら

    ***************************
              html
    ***************************

    <ul id = "navi">
    	<li class = "navi_btn"><a href = "#">ホーム</a></li>
    	<li class = "navi_btn"><a href = "#">ショップ</a></li>
    	<li class = "navi_btn"><a href = "#">会社概要</a></li>
    	<li class = "navi_btn"><a href = "#">リンク集</a></li>
    	<li class = "navi_btn"><a href = "#">お問い合わせ</a></li>
    </ul>
    

    ***************************
              css
    ***************************

    ul#navi{
    	margin:0 auto;
    	padding:0;
    	border:#900 1px solid;	
    	width:600px;
    	height:50px;
    	overflow:hidden;
    	list-style:none inside;
    }
    li.navi_btn{
    	border:0;
    	margin:0;
    	padding:0;
    	list-style-type:none;	
    }
    li.navi_btn a,
    li.navi_btn a:link{
    	display:block;
    	width:120px;
    	line-height:50px;
    	background-color:#900;
    	color:#fff;
    	text-align:center;
    	text-decoration:none;
    	float:left;
    }
    li.navi_btn a:hover,
    li.navi_btn a:active{
    	background-color:#fff;
    	color:#900;
    }
    .attention{
    	color:#f00;
    }
    

    違いはcssで、float:left;が、<a>タグに指定されているか、<li>タグに指定されているかです。

    考えてみると崩れて当たり前のことのように思えるとても初歩的なことなのですが、癖がついているのか今でもたまにやらかします。

    自分自身の覚え書きとしてブログに残しておきます。

    2

    1

    ECサイト制作事例

    ECサイト制作事例1

    企業組合 エコネットみなまた 様

    ECサイト制作事例

    ホームページ制作事例

    NPO法人 東アジア共生文化センター 様

    ホームページ制作事例

    ホームページ制作事例

    NPO法人 東アジア市民共生映画祭 様

    ブログカスタマイズ<2012年2月>

    ECサイト制作事例1

    NPO法人 東アジア共生文化センター 様

    PR

    ソーシャルメディア

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      
    << March 2024 >>

    selected entries

    archives

    recent comment

    search this site.

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM