Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

With CSS image positioning and screen resolutions, how can I best position this picture?

With CSS image positioning and screen resolutions, how can I best position this picture?

Problem

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!

Problem courtesy of: Jason Weber

Solution

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

map
flag 1 flag 2 flag 3 flag 4

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; }
Solution courtesy of: Kypros

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

With CSS image positioning and screen resolutions, how can I best position this picture?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×