Manipulating imgmap?

[ergobob]

Hello,

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 http://www.usernomics.com/user-experienceTEST.html .

The code I am using is below.

Can anyone see what I am doing wrong here?

Thanks a lot,

Bob


<a href="http://www.usernomics.com/user-experience.html" 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" class="imgmap4">

<a href="http://www.usernomics.com/mobile" title="Mobile Site"><img src="images/site/mobile.gif" alt="Mobile Site" width="110" height="30" class="imgmap4"></a>

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

<a href="http://www.usernomics.com/ergonomics-store.html" title="Ergonomic Products Store"><img src="images/site/products3.gif" alt="Ergonomic Products Store" width="173" height="30" class="imgmap5"></a>

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

<a href="http://jobs.usernomics.com/a/jbb/find-jobs" title="Usability Jobs"><img src="images/site/jobboard.gif" alt="Job Board" width="97" height="30" class="imgmap5"></a>

</div>

CSS

.imgmap4{
float: right;
margin: 0px 8px 0px 0px;
border: none;
}


.imgmap5{
float: right;
margin: 25px 8px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
}

[ergobob]

Well, I did get a solution for the problem I described above.

My test page shows the results of this solution.

The only thing I don't like about it is that when you reduce the size of the window a lot, the lines spread into the heading section below the images.

Does anyone see a way to not permit the lines to move into the lower heading section when the display is very small?

Thanks,

Bob

[KatherineJone]

<img src="images/shapes.jpg" width="375"
height="102" style="border: none;" alt="Shapes" usemap="#shapes"/>

<map name="shapes" id="shapes">

<area shape="circle"
coords="58,50,40"
href="javascript:clicked_on('circle');"
title="Circle" alt="Circle"/>

<area shape="rect"
coords="136,11,227,89"
href="javascript:clicked_on('rectangle');"
title="Rectangle" alt="Rectangle"/>

<area shape="poly"
coords="309,13,358,89,257,89"
href="javascript:clicked_on('triangle');"
title="Triangle" alt="Triangle"/>

<area shape="default"
nohref="nohref" title="Default" alt="Default"/>

</map>