2011-03-01 6 views
1

誰かが私を助けることができたら、私は大いに感謝する2つの問題があります。画像の外に出血しますか?

私はページ上に画像リンク要素の列を含むモバイルウェブサイトを開発しています。私はいくつかの問題がありますが、下の画像は青で説明されているように、画像要素を囲むリンク要素は外側にブリードし、divの全体を幅で塗りつぶします。

enter image description here

マークアップ:

<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

+0

CSSを提供できますか? – thirtydot

+0

ああ、あなたのコメントに気付かなかった。 CSSが追加されました。 – AndroidHustle

答えて

3

これは実際には非常に簡単であることが判明しました。私は単純にa要素を画像と同じ最大幅に設定しました。今はもう出血しません。オーバーラップについては、 "pageFull" divの外にあるボタンを含むdivを移動し、その位置を 'absolute'に設定しました。今度は、ボタンのパッケージ全体を元の位置に簡単に戻すことができました。余白を改ざんするだけで、もはや左上の画像と重複しなくなりました。

これは誰かを助けることでしょう! =)

関連する問題