Setting up imgmaps?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I am trying to manipulate two lines of images such that they are both
right justified. The images are actually text with links attached to
each one.

I have it working fine when I have only one line of images but the
second line of images refuses to right justify.

You can see my tryout at .

The code I am using is below.

Can anyone see what I am doing wrong here?

Thanks a lot,


<a href=" " title="User
Experience"><img src="images/site/ux.gif" alt="User Experience"
width="150" height="30" class="imgmap4">

</a><img src="images/site/dash.gif" alt="Dash" width="23" height="30"

<a href=" " title="Mobile Site"><img
src="images/site/mobile.gif" alt="Mobile Site" width="110" height="30"

<img src="images/site/new3.gif" alt="Dash" width="54" height="30"

<a href=" "
title="Ergonomic Products Store"><img src="images/site/products3.gif"
alt="Ergonomic Products Store" width="173" height="30"

<img src="images/site/dash.gif" alt="Dash" width="23" height="30"

<a href=" " title="Usability
Jobs"><img src="images/site/jobboard.gif" alt="Job Board" width="97"
height="30" class="imgmap5"></a>



  float: right;
  margin: 0px 8px 0px 0px;
 border: none;

  float: right;
  margin: 25px 8px 0px 0px;
 padding: 0px 0px 0px 0px;
  border: none;

Re: Setting up imgmaps?

Quoted text here. Click to load it

You seem to be putting a 25px top margin on "Ergonomics Store" hoping
that that will make it go all the way to the right and underneath the
other right floats (User Experience, Mobile Site, etc.)

But it's always the "outer edge" or "margin edge"-- i.e. the box outside
all the margins-- that's used for floats, so that won't work. All you're
doing is making Ergonomics Store's outer box an extra 25px high. It
won't start going under the floats that are already there until there's
no more horizontal space available. Note that the presence of the
absolutely positioned USERNOMICS image on the left doesn't in any way
affect the space available-- it's absolutely positioned and "out of the

Now you _could_ put clear: right on Ergonomics Store (instead of the top
margin), but that's not a good solution. It's a bit like manually
inserting a carriage return-- but you don't know that the series of
images will naturally want to "break" onto two lines at that point in
all viewport widths.

Better is to make the big USERNOMICS thing on the left float: left
instead of position: absolute. Then just lose the extra top margin on
Ergonomics Store-- the right floats should now flow into the space to
the right of the left float, instead of slipping underneath the

Re: Setting up imgmaps?

Quoted text here. Click to load it

Hi Ben,

I tried your last suggestion but was not sure how to handle making the
Usernomics image float left. There was no image map on it so I added
one (imgmap6) and floated it left. But that did not work. You can see
this version at .
As you can see, I don't really know what I am doing here.

Note that I removed the 25px from the top by making all of the images
imgmap4. Can you see how I should handle the Usernomics image?

Thanks a lot Ben,


Re: Setting up imgmaps?

Quoted text here. Click to load it

You're almost there! Just delete position: absolute from your #usernomic
selector (main.css line 117).

Position: absolute trumps float (see , in particular 9.2
item 2).

In other words if you set both position: absolute and float, you just
get position: absolute, amd might as well have not set float.

Re: Setting up imgmaps?

Quoted text here. Click to load it

Thanks Ben. That worked very well. Much appreciated.


Re: Setting up imgmaps?

Hymer wrote:
Quoted text here. Click to load it

1. See your first paragraph above. ;-)

2. You are trying to anaylze a problem without simplifying it. A URL
with TEST in it should be the simplest, most minimalist code that still
exhibits the problem behavior. This is especially silly when you post to
a NG hoping for help, but the main thing is that you might well find the
problem yourself when you simplify it.

3. You posted a URL to Usenet without validating the markup first. Most
of the problems are warnings, mostly about <br /> in HTML, but there are
so many of them, it should be a call to action for you. (And don't just
convert <br /> to <br>; markup the code properly, then style in the
spacing you want. Never use sequences like <br /><br /><br />. Take your
URL to < .

4. You posted a URL to CSS-aware code with what you know are styling
problems, although you haven't validated the CSS. Take your URL to
< .

5. You are assuming you've got "two lines of images". Why do do think
that? Just because your .imgmap5 has a top margin of 25px? You really
have only one "line" of links and images (although this depends on
viewport width), with two links and a "dash" image offset downwards.

6. You posted code, even after you (quite correctly) provided the URL.

[superfluous code snipped]

7. You are doing all these things on a site called "Usernomics". ;-)

Site Timeline