誰かが私を助けることができたら、私は大いに感謝する2つの問題があります。画像の外に出血しますか?
私はページ上に画像リンク要素の列を含むモバイルウェブサイトを開発しています。私はいくつかの問題がありますが、下の画像は青で説明されているように、画像要素を囲むリンク要素は外側にブリードし、divの全体を幅で塗りつぶします。
マークアップ:
<body>
<div id="vinranka">
<img id="vinrankaIMG" src="img/vinrankaCrop.png">
<img id="vinkattenText" src="img/vinkattenText.png">
</div>
<div id="pageFull">
<div id="searchBox">
<form id="searchForm" method="post" action="">
<div id="searchFieldBg">
<input id="searchField" type="text" value="Sök dryck.." name="query">
<input id="searchButton" type="submit" value="Sök" />
</div>
</form>
</div>
<div id="btContainer">
<a class="imgLink" href="redWhine.html"> <img class="buttons" src="img/redWhineBt.png"></a>
<a class="imgLink" href="whiteWhine.html"> <img class="buttons" src="img/whiteWhineBt.png"></a>
<a class="imgLink" href="sparkelingWhine.html"> <img class="buttons" src="img/sparkelingWhineBt.png"></a>
<a class="imgLink" href="champagne.html"> <img class="buttons" src="img/champagneBt.png"></a>
<a class="imgLink" href="roseWhine.html"> <img class="buttons" src="img/rosevinBt.png"></a>
<a class="imgLink" href="glogg.html"> <img class="buttons" src="img/gloggBt.png"></a>
</div>
</div>
</body>
編集:私は解決策を追加した同様の問題のあるトピックを見つけ
html, body {
margin: 0px;
padding: 0px;
background-color: #aed604;
}
#vinrankaIMG {
position: absolute;
z-index: 2;
}
#vinkattenText {
margin-left: 220px;
margin-top: 10px;
}
#pageFull {
position: absolute;
margin-left: 20px;
width: 454px;
height: 889px;
background-image: url('../img/pageFull.png');
z-index: 1;
}
#btContainer {
display: block;
z-index: 10;
}
img.buttons {
display: block;
vertical-align: top;
border: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
a.imgLink {
margin: 0px;
padding: 0px;
}
「垂直-ALIGN: はここにCSSです:top 'を画像CSSに追加します。しかし、これは私のためにはうまくいかず、同じ問題があったのかどうかはわかりません。
もう1つの問題は、赤で記載された領域です。私はz-indexで白い背景divと重なるイメージを持っています。問題は、たとえ画像リンクが高いz-インデックスを持っていても、トップの画像リンクにも重なってしまいます。つまり、赤でマークされた領域では解除できなくなります。画像リンクは、内部にある白い背景の上にあるすべての要素の下にロックされていますか?
私は本当に私の問題を十分に説明してくれることを願っています。=) 誰かが私を助けることができたら、大いに感謝します!あなたが聞いた質問に私は答えます!
ありがとうございました!
/max
CSSを提供できますか? – thirtydot
ああ、あなたのコメントに気付かなかった。 CSSが追加されました。 – AndroidHustle