On 10/12/05, Scott Haneda <[EMAIL PROTECTED]> wrote:
> I have three images, they are each 189 by 146 and all sit inline, so that's
> 566 wide. No spaces, no padding, just three images, I could make it one,
> and use a image map, but they get swapped out so I ca not.
>
> Right now, this is suiting me pretty well:
> <table width="566" height="146">
> <tr>
> <td>
> <img src="/home/three_01.jpg" width="189" height="146"></td>
> <td>
> <img src="/home/three_02.jpg" width="187" height="146"></td>
> <td>
> <img src="/home/three_03.jpg" width="190" height="146"></td>
> </tr>
> </table>
>
> However, I don't want to use a table, and thought, this is a pretty good
> case for a <ul>, or it is not proper to put images in the ul?
As Zoe mentioned, turning this into a list works if indeed this is a
list. If it isn't (for example, if it were simply three pieces of a
header graphic) then it probably isn't a list after all, but perhaps
more like a set of header tags.
Either way, there are going to be difficulties in either scenario. If
you were to make the image-wrapping elements inline (the LI tags for a
list, for example), you'll have to worry about the spaces between the
wrappers. Inline elements act just like text, so the spaces between
them act just like spaces between words.
If you were to make the image-wrapping elements float, you won't have
to worry about the space between the wrappers, but you may have to
worry about things such as Mac IE's insistence on having the wrappers'
widths defined, and PC IE's addition of an unremovable 3px margin on
the edge opposite the direction of the float.
Your mention of mouse-over behavior suggests that we're actually
talking about a table whose cells contain links with image contents,
versus the example you've provided where the images are not wrapped by
links. If that's true, a list may make more sense. In terms of
float-versus-inline, I'd probably choose a float method, because I
don't want to have to mash all of my code together to remove the white
space between the links.
Since each image is a different size, you'll need a different ID to
explicitly define the widths. Once you've done that, you can remove
the 3px provided by IE by sucking in the margins on the side opposite
of the direction you're floating the elements. You would only want to
do this for IE PC, however -- no other browser needs this.
I'd probably do something like this (assuming that "navigation"
properly describes this element):
<ul id="navigation">
<li id="first"><a href="..."><img src="/home/three_01.jpg"...></a></li>
<li id="second"><a href="..."><img src="/home/three_02.jpg"...></a></li>
<li id="third"><a href="..."><img src="/home/three_03.jpg"...></a></li>
</ul>
#navigation {
width: 566px; /* in an attempt to keep the floats in a fixed area,
so they don't wrap */
}
#navigation li {
float: left;
}
/* hide from Mac IE \*/
* html #navigation li { /* "star html" hack only recognized by IE */
margin-right: -3px;
}
/* stop hiding */
#first {
width: 189px;
}
#second {
width: 187px;
}
#third {
width: 190px;
}
Another alternative is provided by Dave Shea's image sprites
concept[1]. This is pretty consistent cross-browser, and lets you do
away with image slicing, even including rollovers. This might be
simpler to deal with from a maintenance perspective.
HTH,
Michael
[1] http://www.alistapart.com/articles/sprites
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
