Link bleeding outside image?
I have two problems I would greatly appreciate if someone could help me with.
I'm developing a mobile website with a column of image link elements on the page. I have some problem though, as the picture below describes in blue, the link elements surrounding the image elements bleeds outside and fills the entire div in width.
Markup:
<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>
Edit: Here's the CSS:
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;
}
I found a topic with a similar problem where the solution was to add 'vertical-align: top' to the image CSS. This however did not work for me, and I'm not sure we even had the same problem.
Another problem is the area described in red. I have an image that overlaps the white background div with z-index. Problem is it overlaps the top image link as well, even when the image link has a higher z-index, meaning it becomes unclickable in the area marked with red. Is the im开发者_StackOverflow中文版age link locked to be under every element that is above the white background which it is inside of..?
I really hope I have described my problems well enough... =) If anyone could help me it would be greatly appreciated! I will answer any questions you ask!
Thank you!
/Max
This actually turned out to be very easy. I simply set the a-element to have the same max-width as the images. Now it doesn't bleed out any more. For the overlapping I moved the div containing the buttons outside the "pageFull" div and set its position to 'absolute'. Now I could easily move the entire package of buttons back to its original position just tampering with the margins and it was now no longer overlapped by the top left image.
Hope this may help someone! =)
加载中,请稍侯......
精彩评论