0

私の問題

2 つの ribbonpurplefade.gif を、ピンクに色付けした navmenu バー ブロックの真上に戻したい (ブロックの境界が見えるように醜いピンクにした)。

上部の ribbonpurplefade.gif は、navmenu のすぐ上に配置され、その間にギャップはありません。下部の ribbonpurplefade.gif は、navmenu の下部に隙間なく密着する必要があります。

私が何もギャップを取り除くことはありません！それは私の問題です！:)

ブロックがどこにあるか視覚的にわかるように、すべてに色を付けます。私が何を間違えたか知っているなら、教えてください :) そして、はい、色は本当に醜いです - それは私がブロックを見ることができるようにするためです :) よろしくお願いします！

どのブロックが何なのかわからない場合は、w3.org をチェックしてください。彼らは匿名ブロック<div>This is a block</div> <p>This is also a block</p>などを自由に説明する用語を使用しています...

私が試したこと

マージンとパディング、および img タグで 0px を試しました。機能しているように見える唯一のことは、負の値を使用することですが、それがなぜなのかわかりません... 背景画像として ribbonpurplefade.gif を使用してそれらを並べることができたように見えましたが、それらを引き伸ばすことができませんでしたCSS。そこで、下の画像のように背景画像の使用から画像の使用に変更し、navmenu に触れさせようとしました。

私が望むのは、2 つの ribbonpurplefade.gif を navmenu ブロックにぴったりと合わせることです。なぜこれが機能しないのかは私にはわかりません。CSSファイルのリセットも試しましたが、それでも問題ありません。多分それは不可能です。hspace と vspace も試しましたが、とにかく減価償却されています。

すべてのソリューションは、IE7 以降 (および代替ブラウザー FF、Chrome、Op) で動作する必要があります。

HTML

<div class="navribbon"><img src="graphics/common/ribbonpurplefade.gif"></div>
<!-- THIS IS WHERE THE TOP GAP IS. I CANT GET RID OF IT COMPLETELY -->
<!-- NAVIGATION BAR HERE -->
<div class="navmenu">
    <ul>
        <li>Home</li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Services & Pricing</a></li>
        <li><a href="#">Online Store</a></li>
        <li><a href="#">Support & Drivers</a></li>
        <li><a href="#">Company Information</a></li>
    </ul>
</div>
<!-- NAVIGATION ENDED -->
<!-- THIS IS WHERE THE BOTTOM GAP IS. I CANT GET RID OF IT COMPLETELY -->
<div class="navribbon"><img src="graphics/common/ribbonpurplefade.gif"></div>

CSS

/* NAVIGATION RIBBONS BELOW */
.navribbon {
    padding:0px;
    margin:0px;
    /*background-color:#129933;*/
}

.navribbon img {
    padding:2px;
    margin:0px;
    background-color:#00FF66;
}

/* NAVIGATION CSS BELOW*/
.navmenu {
    text-align:center;
    padding:9px;
    margin:0px;
    font-size:14px;
    background-color: #FF0066;
    border:dotted;
}

.navmenu ul {
    margin: 0px;
    padding: 0px;
}

.navmenu li {
    display:inline;
    font-weight:bold;
    /*background-color: #99FF99;*/
}

.navmenu ul a {
    text-decoration:none;
    /*color:#4E4E4E;*/
    /*color: #276056;*/
    color:#267CB2;
}

.navmenu a:hover {
    text-decoration:underline;
    color:black;
}

.navmenu li:after {
    content: "\\";
    padding: 0px 5px;
    color: #999;
}

.navmenu li:last-child:after {
    content: none;
}

更新: 2012 年 5 月 22 日

さて、テーブルを使用して、上の画像を下の中央に配置し、下の画像を上に中央に配置しようとしましたが、それでもギャップが生じます。私が残した唯一の解決策は、DIV ブロックを作成し、要素を div 内に完全に配置するか、Photoshop でこれらすべてのリボンをやり直し、すべてのサイズを変更して、再度保存することだと思います。うーん...とてもシンプルなもののためにたくさんの仕事。私が言うすべての要素でギャップがある理由がわかりません-マージンの場合は0px、パディング-つまり...どこに行くかを制御できないのですか？別のブロック要素に対してぴったりと並べるために、背景にする必要があるのはなぜですか? ばかげた Web デザインには本当にうんざりします。ほぼすべてを絶対的なものにするような気がします。ぐっ！

4

3 に答える 3

1

レンガの壁に頭をぶつけて1時間経った後、これを理解したと思います。imgタグはデフォルトで要素であるため、配置される場所に関係なく一般的なものinlineによって決定される最小の高さがあります。font-sizeこれは、最小値より下の高さに関係なく、それを囲む可能性のあるテキスト用のスペースを常に確保する必要があることを意味します。そのため、上下に余白やパディングがあるように見えます。

問題の解決策は、imgタグを作成することdisplay:blockです。

于 2012-05-22T23:56:02.653 に答える
0

私の理解では、リボンの画像幅の両方に問題があります

<img src="graphics/common/ribbonpurplefade.gif" alt="ribbon" width="100%" border="1">

これを使用して、2 番目の画像に変更があります width="100%" 他に問題がある場合は、 http://jsfiddle.net/を使用してください

ありがとう。

于 2012-05-22T07:58:14.267 に答える
0

2 つの紫色のフェード バーが正しいということですか? その場合: 下のバーに width="100%" を追加するのを忘れました。

したがって、css で次のことを行う方がはるかに優れています。

.navribbon
{
background-image: url('../graphics/common/ribbonpurplefade.gif'); <-- Check path to be sure
background-repeat: repeat-x;
height: 11px;
width: 100%;
}

CSS ソリューションを選択した場合は<img>、div 内を削除します。

于 2012-05-22T07:20:16.957 に答える