css - CSS フロートと一般的な混乱

Question

これがあまりにも基本的な質問である場合は申し訳ありませんが、CSS が私を悩ませています。私は、CSS が簡単にできるはずのことをやっていると思いますが、ドキュメントを読んだ方法ではうまくいきません。

これが私の例です。大幅に簡素化されましたが、基本的な問題は残っています。これは私の一部の核となる誤解であると確信しています。それがどこにあるのかわかりません。

目標は次のとおりです。

それらの間に透明なセパレーターがあるタブ

これが私が今得たものです：私がいる場所

HTMLは次のとおりです。

<div id="line-wrapper">
    <div id="block-nice-menus-1">
        <ul id="nice-menu-1">
            <li><span title="Departments" class="nolink">Departments</span>

            </li>
        </ul>
    </div>
    <div id="block-imageblock-40">
        <img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
        alt="" />
    </div>
    <div id="block-imageblock-42">
        <img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
        alt="" />
    </div>
</div>

CSS は次のとおりです。

/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
    background-color: #ff0000;
}
#block-nice-menus-1 {
    position: relative;
    float: right;
    margin-right: 0px;
    height: 40px;
    border: none;
    background: #d6b982;
}
#nice-menu-1 {
    display: block;
    padding: 0px 30px;
    border-top: none;
    border-bottom: none;
    color: #000;
    background: #d6b982;
    line-height: 2.4em;
    font-weight: bold;
    font-family: Helvetica, Arial, Sans-Serif;
    text-transform:uppercase;
    text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
    border-top: none;
    border-bottom: none;
    border-color: #e11837;
}
#block-imageblock-40 {
    /* top-menu-swish */
    float: right;
    margin: 0px;
}
#block-imageblock-42 {
    /* top-menu-leading-line */
    bottom: 0px;
    height:6px;
    width:100%;
    background: #d6b982;
}

フロートを正しく取得できません (私は知っています、Yet Another Float Question)。主な問題は、これが可変数の項目を持つメニューになることです。そのため、メニューが大きくなるにつれて (現在は「部門」ですが、後で「部門」、「サービス」、「セクション」など)、左に押して、行の長さを減らします先頭行 (#block-imageblock-42) に固定長を使用できません。また、メニュー項目には区切りがあるので、全角のものだけではいけません。これは純粋な CSS で行う必要があり、jQuery やその他の JS は使用しません。

これが私のJSfiddleの問題です：http://jsfiddle.net/zjfsy/

更新: 助けようとしている人々の要求に応じて、より具体的になるように質問を修正しました。上部の「目標」画像は、問題をより正確に反映するように更新されました。明確にしたいことの 1 つは、この特定のインスタンスはそれほど重要ではないということです。私はすでにポジションを修正しました：短期的には絶対的な修正です. 私の望みは、なぜこれがそれほど難しいのかをよりよく理解することです. 私は3つのコンテナを持っています。そのうちの 2 つを右にフロートさせ、3 つ目を拡大して、最後のコンテナーからページの端までのスペースを埋めるようにします。これがフロートの本来の役割のようです。これは私の側の基本的な誤解だと思います。

ともかく。さらに制約があります:

リーディングバーは、左側とスウィッシュの間の空きスペースを埋めるために拡張する必要があります。
各タブには、背景を透過できるセパレーターが必要です。
タブの数は、クライアントの選択に基づいて可変であり、定期的に変更される可能性があります。
CSSで変更する以外に、HTMLの構造を実際に変更することはできません。

繰り返しになりますが、すべてのヘルプは非常に高く評価されています。

score 1 · Accepted Answer

ここに私の解決策があります：http://jsfiddle.net/abbood/b56Vq/（以前はjsfiddleを使用したことがありません..これが間違っていた場合、またはプロジェクトをフォークすることになっていた場合は申し訳ありません）

コードは次のとおりです。

<html>
    <head>
        <link href="betterStyle.css" rel="stylesheet">
    </head>
    <body>
        <div id="wrapper">
            <ul>
                <li><div></div><div>Departments</div></li>
                <li><div></div><div>Services</div></li>
                <li><div></div><div>Sections</div></li> 
                <li><div></div><div>stuff</div></li> 
            </ul>
        </div>
    </body>
</html>

//betterStyle.css

#wrapper {
    height: 2.5em;
    background-color: #e0203b;
    background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');            
    background-position: bottom;
    background-repeat: repeat-x;  
}

ul
{
    list-style-type: none;
    float: right;
    margin: 0;
    padding: 0;
}

ul li {
    float: right ;
    display: inline-block;        
}

/* text */
ul li div:nth-child(2) {        
    line-height: 2.5em;
    line-weight: bold;
    font-family: Helvetica, Arial, Sans-Serif;
    text-transform: uppercase;
    background-color: #d6b982;
    float: right;
    padding-right: 1em;
}

/* image */
ul li div:nth-child(1) {
    background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
    background-position: left top;
    background-repeat: no-repeat;  
    float: left;


    width: 53px;
    height: 40px;
    line-weight: bold;
    font-family: Helvetica, Arial, Sans-Serif;
    text-transform: uppercase;        
}

ノート：

独自の画像を作成し、画像ホスティングサービスを使用してリンクしました。
必要な数のタブを追加できます（各タブにはその画像が添付されていると想定していました..最終的なものをどのように見せたいのかわかりませんでした（右端が鋭すぎるように見えます）..しかし、私は好みに合わせて調整できると確信しています..余分なタブを追加すると、水平線が縮小します..メニューが大きくなるにつれて左に押し出され、線の長さが短くなると言ったのは、それがあなたの意図したことだと思います

ここに画像の説明を入力

アップデート：

HTMLの行を変更せずに更新された回答は次のとおりです。 firefox とそれらは正常に機能しました..ただし、完全に機能していない場合は知っておいてください）

html (ほぼ同じ.. 楽しみのためにいくつかのタブを追加しただけです):

    <body>
        <div id="line-wrapper">
            <div id="block-nice-menus-1">
                <ul id="nice-menu-1">
                    <li><span title="Departments" class="nolink">Departments</span>

                    </li>
                    <li><span title="Departments" class="nolink">Services</span>

                    </li>
                    <li><span title="Departments" class="nolink">Classes</span>

                    </li>

                </ul>

            </div>
            <div id="block-imageblock-40">
                <img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
                alt="" />
            </div>
            <div id="block-imageblock-42">
                <img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
                alt="" />
            </div> 
        </div>
    </body>

CSS:

/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
    background-color: #ff0000;  /* red */
    height: 40px;
    position: relative;
    z-index: -2;
}

#line-wrapper div {
    background-color: #ff0000;  /* red */
}
#block-nice-menus-1 {
    position: relative;
    float: right;
    margin-right: 0px;
    height: 40px;
    border: none;
    background: #d6b982;
}
#nice-menu-1 {
    display: block;

    border-top: none;
    border-bottom: none;
    color: #000;

    line-height: 2.4em;
    font-weight: bold;
    font-family: Helvetica, Arial, Sans-Serif;
    text-transform:uppercase;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

#nice-menu-1 ul {
    padding: 0;
        background-color: #ff0000;  /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
    border-top: none;
    border-bottom: none;
    border-color: #e11837;
}

#nice-menu-1 li{
    list-style-type: none;
    display: inline-block;
    padding: 0 2em;
    background: #d6b982;    /* bage */
    height: 40px;
}
#block-imageblock-40 {
    /* top-menu-swish */
    float: right;
    margin: 0px;
}
#block-imageblock-42 
{
    /* top-menu-leading-line */
    bottom: 0px;
    height:6px;
    width:100%;
    background-color: #d6b982 !important;
    position: absolute;
    z-index: -1;
}

score 0 · Accepted Answer

#line-wrapper の position:relative 機能を使用しない同様のことも行っています。これは、実装時に問題が発生する可能性があるためです。

http://jsfiddle.net/zjfsy/を参照

#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}

#line-wrapper {   
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}

お役に立てれば！（マジックナンバーマージンなどを使用した「ハードコーディング」を必要としないため、私の回答よりも優れているため、wxactlyの回答に投票することは間違いありません。可能であれば間違いなく彼の回答を使用してください。ただし、少なくとも2つあります違う方法。

css - CSS フロートと一般的な混乱

2 に答える 2

Related

Reference