Click here to get back home

Setting up imgmaps?

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Setting up imgmaps? Hymer 02-09-2008
Get Chitika Premium
Posted by Hymer on February 9, 2008, 9:22 am
Please log in for more thread options
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;
}



Posted by Ben C on February 9, 2008, 12:06 pm
Please log in for more thread options
> 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?

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
flow".

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
USERNOMICS image.

Posted by Hymer on February 9, 2008, 12:50 pm
Please log in for more thread options
> 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
> flow".
>
> 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
> USERNOMICS image.

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

Bob



Posted by Ben C on February 9, 2008, 12:55 pm
Please log in for more thread options
[...]
>> 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
>> USERNOMICS image.
>
> 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 http://www.usernomics.com/user-experienceTEST.html .
> As you can see, I don't really know what I am doing here.

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

Position: absolute trumps float (see
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo, 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.

Posted by Hymer on February 9, 2008, 4:25 pm
Please log in for more thread options
> You're almost there! Just delete position: absolute from your
> #usernomic
> selector (main.css line 117).
>
> Position: absolute trumps float (see
> http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo, 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.


Thanks Ben. That worked very well. Much appreciated.

Bob



Similar ThreadsPosted
Setting Row heights January 11, 2005, 8:35 am
setting up a store - looking for help August 25, 2005, 7:31 pm
Setting a Cell Image October 1, 2004, 3:01 am
Subect setting in Mailto: June 22, 2005, 8:35 pm
About charset setting and replacing July 14, 2006, 6:29 am
after setting 's margin to 0 it is still non zero! (IE only) January 18, 2007, 12:54 pm
Setting Correct Charset? June 29, 2007, 10:24 am
Setting an image as background to a table cell. September 27, 2005, 5:54 pm
Setting up a molecular Chemistry Search tool May 26, 2005, 2:03 am
Problems with images setting cookies in a different domain November 7, 2007, 3:44 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap