Trying to Position List Over An Inline Image For A Device Friendly Page

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.

Answers


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/


Need Your Help

double scientific notation in macro

c macros double notation

I was wondering if I can create macro that creating value with custom "shift" (or other way to create it in compile time). I mean, concatenate two numbers or something...

RMI vs. Web Services. What's best for Java2Java remoting?

web-services remoting jax-ws rmi

I'm new to both Web Services and RMI and I wonder which is the better way to do remoting between different web applications, when these applications are all written in Java, that is when different

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.