html - スライスから作成されたナビゲーションアイテムの背景色を追加する

Question

私はカスタムナビゲーションメニューを設計しています。これは、現在の状態でここに表示されます。個々のナビゲーション項目は次のようになります。

ナビゲーションアイテム

したがって、基本的に各ナビゲーションアイテムは水平バーから「ぶら下がっています」。画像の主要部分は、画像の3つのスライスで構成されています。

左：ここに画像の説明を入力してください右：そして真ん中：

中央のDIVの背景にはrepeat-xが適用されているため、ナビゲーションアイテムのコンテンツ、つまりテキストに合わせて大きくなります。

これは、現在、左、右、および中央のDIV用に持っているCSSです。

.left {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_01.png);
    background-repeat: no-repeat;
    height:46px;
    margin-left:2%;
}

.middle {
    width:auto;
    float:left;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat-x;
    font-size:20px;
    font-family: Typewriter;
    color:#393526;
    height:46px;
    padding-left:1px;
}

.right {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_03.png);
    background-repeat: no-repeat;
    height:46px;
}

これまでのところ良好ですが、メインの水平バーをナビゲーションアイテム用に作成された画像に結合する垂直バーを含める方法を検討する必要がありました。これにより、常に中央に配置されます。私がそれをした方法は、次のように中央のdiv内にそれのdivを含めることでした：

<li>
<div class="nav_image">
<div class="left"></div>
<div class="middle"><div class="top"></div>home</div>
<div class="right"></div>
</div>
</li>

次に、負のマージントップを「トップ」DIVに適用します。

.top {
    height:27px;
    background-image: url(nav/images/top.png);
    background-repeat: no-repeat;
    background-position-x: center;
    margin-top:-24px;
}

そして正のマージン-'nav_image'DIVへのトップ：

.nav_image {
    margin-top:27px;
}

これが私が探しているものを達成するための最良の方法であるかどうかはわかりませんが、これまでのところ機能しています。

私が抱えている問題は、「nav_image」DIVの背景色を設定することです。これに色を設定し、ホバーに別の色を設定したいと思います。このDIVに丸みを帯びた角を追加し、背景画像の背後に表示される背景色を設定できることを期待していました。

現時点では、DIV'nav_image'は幅1200px、高さ0pxを示しています。3つの子DIVSの合計幅、つまり左、中央、右を継承していると思いましたが、明らかにこれは起こっていることではありません。そのため、背景色を適用するDIVがないようです。

これが明確であることを願っています。読んでくれてありがとう。これについてアドバイスをいただければ幸いです。

ニック。

score 1 · Accepted Answer

1）これらをcssに追加します。

ul#list-nav li {
    float:left;
    display:inline;
}

.clear {
    clear:both;
}

2）<div class="clear"></div>それぞれの後に追加します<div class="right"></div>

.left3） 'sを削除しますmargin-left: 2%;（代わりにマージンを追加しul#list-nav liます）

正しい幅と高さになるnav_imageはずです

score 0 · Accepted Answer

マークアップを単純化して開始することができます。

<li>
    <a>
         Home
    </a>
</li>

次に、単純な HTML マークアップではなく疑似要素を使用して、「サイドイメージ」を実現します。私はこれをテストしていませんが、正しい方向に向けるはずです:

ここでの重要な追加は次のとおりです。1) :before および :after 疑似で絶対配置を使用し、2) 要素に 13px の左右のパディングを追加し<a>ます。それ以外は、あなたのコードはほぼ正しいように見えます.3）display:ブロックは、<a>これを正しく機能させるためにおそらく重要だと思います

li a {
    padding: 0 13px;
    width:auto;
    float:left;
    display: block;
    position: relative;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat-x;
    font-size:20px;
    font-family: Typewriter;
    color:#393526;
    height:46px;
    padding-left:1px;
}

li a:before,
li a:after {
    content: ' ';
    width: 13px;
    height:46px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat
}

li a:before {
    left: 0;
    background-image: url(nav/images/nav_03.png);
}

li a:after {
    right: 0;
    background-image: url(nav/images/nav_01.png);
}

score 0 · Accepted Answer

こんにちは、あなたはこれを気に入ると思います。あなたのコードを確認し、いくつかの変更を加えて、ナビとロゴのコードを簡単に作成しました。チェックしてください」

CSS

.header, .navi, ul, li, a, span{
    margin:0;
    padding:0;
}
    .header{
        overflow:hidden;
        z-index:5;    }


        .logo{
            position:relative;
            z-index:1;
    height:188px;
    width:100%;
        }


        .navi{
            position:absolute;
            left:40%;
            right:0;
            z-index:2;
            top:148px;
            list-style:none;
        }


        li{
            float:left;
            background:url('http://soteriabrighton.co.uk/test2/nav/images/top.png') no-repeat 10% 0;
            margin-left:2%;
        }
        .navi a{
            background:url('http://s16.postimage.org/yqxo6bq6p/navi_left.png') no-repeat left top;
            padding-left:9px;
            color:#000;
            margin-top:27px;
            text-decoration:none;
            font-size:22px;
            float:left;
                border-radius:5px 0 0 5px;
        }
        .navi a span{
            background:url('http://s17.postimage.org/ukpot5zcb/navi_right.png') no-repeat right top;
            padding-right:9px;
            float:left;
            line-height:38px;
            border-radius:0 5px 5px 0;
        }
        .navi a:hover span, .navi a:hover{
            background:green;
            color:#fff;
            border-radius:5px;
        }

HTML

<div class="header">
        <img src="http://soteriabrighton.co.uk/test2/logo.png" alt="" class="logo" />
        <ul class="navi">
            <li><a href="#"><span>home</span></a></li>
            <li><a href="#"><span>news</span></a></li>
            <li><a href="#"><span>forums</span></a></li>
            <li><a href="#"><span>articles</span></a></li>
            <li><a href="#"><span>contact</span></a></li>
        </ul>
    </div>

ライブデモはこちら http://jsfiddle.net/Kj2e9/

html - スライスから作成されたナビゲーションアイテムの背景色を追加する

3 に答える 3

Related

Reference