Question

I have a mouseover effect that when a client hovers a flag, a picture above it comes with a little icon of their country and a message, “View this website in English”, or “Regardez la website en francais” or whatever.

I have tried my css position using pixels as well as percents, and still, if you’re using a 1280 or a 1900 screen resolution, the picture could be way off. Here’s what I want it to look like:

                                                 picture should be here
                                   flag 1 flag2 flag3 flag4 flag5 flag6

So when they hover over, the picture shows. Treemonkey helped me get there earlier today, and now I just have to get the CSS down. Currently, my CSS is this:

  .map{
  display:none;
  }
  a.flagbutton:hover .map{
  display:block;
  position:fixed;
  top:14%;
  right:20%;
  } 

If anybody could make any recommendations as to what I can do to remedy this issue with different screen resolutions — if it’s possible — I’d greatly appreciate it!

Answer 1

You could use a container for all the fields and another for the flag links

<div class="top_container">

    <div class='map_cont'>map</div>

    <div class='flags_cont'>
        <a href="#" class='flagbutton'>flag 1</a>
        <a href="#" class='flagbutton'>flag 2</a>
        <a href="#" class='flagbutton'>flag 3</a>
        <a href="#" class='flagbutton'>flag 4</a>
    </div>
</div>

Make the top container’s margin set to auto so it keeps a distance on each side and then float both the ‘map_cont’ and the ‘flags_cont’ containers to the right so they appear on the right side of the screen.

.top_container { width:90%; margin:auto; }
.map_cont{ float:right; }
.flags_cont { clear:both; float:right }
a.flagbutton { margin-left:5px; }