Home/ Questions/Q 4038424
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T12:28:16+00:00

I have two problems I would greatly appreciate if someone could help me with.

  • 0

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.

enter image description here

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 image 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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! =)

    • 0