スポンサーサイト

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

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

    スポンサーサイト

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

      関連する記事
        コメント
        コメントする








           
        この記事のトラックバックURL
        トラックバック

        ECサイト制作事例

        ECサイト制作事例1

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

        ECサイト制作事例

        ホームページ制作事例

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

        ホームページ制作事例

        ホームページ制作事例

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

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

        ECサイト制作事例1

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

        PR

        ソーシャルメディア

        calendar

        S M T W T F S
              1
        2345678
        9101112131415
        16171819202122
        23242526272829
        30      
        << September 2018 >>

        selected entries

        archives

        recent comment

        search this site.

        mobile

        qrcode

        powered

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