Question

What I am trying to do is position a list element over an inline image rather than a background image.

I found that by trying to use a background image it wouldn’t scale on a desktop browser like the other images and it made it very hard to test.

The image itself is a white box which will contain some flag buttons in it and at the moment the list is appearing underneath the image, not inside it.

Before, I did almost have it but I was using absolute positioning on the list and percentages for top and left values and on some devices it looked ok whereas on others it was a mess so I am just looking for a method that should be consistent in appearance across mobile devices.

HTML

<div id="wrapper"> 
    <div id="top_header"><img alt="top banner" src="/img/banner_home_page.png" /></div>
    <div id="international">
        <span id="flag-container">
        <img src="../img/flag-home.png" />
            <span class="flag_buttons_container">
            <ul class="flag_buttons">
                <li><a href="www.uk-site.co.uk"><img src='./img/buttons/flag_uk.png'/></a></li>
                <li><a href="http://www.ie-site.ie"><img src='./img/buttons/flag_ie.png' /></a></li>
                <li><a href="http://www.us-site.us" ><img src='./img/buttons/flag_us.png' /></a></li>
                <li><a href="http://www.german-site.de" ><img src='./img/buttons/flag_de.png' /> </a></li>
            </ul>
            </span>
        </span>   
    </div>
</div>

CSS

#international{float: left; width: 100%; height: auto; margin: 0px; padding: 10px 5px 10px 5px;}
#international img{width: 92%;}


#flag-container {
     position: relative;
     top: 5px;
     left: 5px;
}

.flag_button_span {
position: absolute;
    margin:0;
    padding: 0px 0;
}

.flag_buttons li {
    list-style-type: none;
    position: relative;
    display: block;
    margin-left: 12%;
    width: 85%; 
    overflow:auto;
}

.flag_buttons img {
    float: left;
}

Image Dimensions

The banner image is 480 px x 108px

The ‘background’ image is 400px x 456px

Each flag button is 164px x 30 px and there are 7 of them, I have only shown a few in the markup above.

I was reading online that to have an element on top of an image it had to be in a span which is why the markup is the way it is but feel free to change it to whatever works.

Any help appreciated.

Thanks.

Answer 1

Using CSS3 for your background image should work as you want with scaling without this hassle of hovering over an inline image. Check out these links:

http://www.css3.info/preview/background-size/

http://css-tricks.com/perfect-full-page-background-image/