Re: [css-d] 3 images in a ul, is this the best way
Scott, a UL is proper, since these are links.
Also, you don't have to use a UL or a table, put them in a div, and use the
display:inline property, as so:
div img {
display:inline;
}
They'll line up perfectly.
--
- C Montoya
rdpdesign.com http://rdpdesign.com ...
liquid.rdpdesign.comhttp://liquid.rdpdesign.com...
montoya.rdpdesign.com http://montoya.rdpdesign.com
__
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/
Re: [css-d] 3 images in a ul, is this the best way
Christian Montoya wrote: Scott, a UL is proper, since these are links. Also, you don't have to use a UL or a table, No, you don't have to put them in ul, but if they are really a list, why not put them in the correct container? Of course, I can't really tell if they are a list since I don't know what those images are -- can you send us a page to look at? If they are a list, you can make them display horizontally by either floating each li to the left or giving each li a value of display: inline. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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/
Re: [css-d] 3 images in a ul, is this the best way
on 10/12/05 7:05 AM, Zoe M. Gillenwater at [EMAIL PROTECTED] wrote: Christian Montoya wrote: Scott, a UL is proper, since these are links. Also, you don't have to use a UL or a table, No, you don't have to put them in ul, but if they are really a list, why not put them in the correct container? Of course, I can't really tell if they are a list since I don't know what those images are -- can you send us a page to look at? If they are a list, you can make them display horizontally by either floating each li to the left or giving each li a value of display: inline. I still get some margins, no matter what I try, can someone perhaps show me a example of three same sized images all sitting together to make one image? -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ 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/
Re: [css-d] 3 images in a ul, is this the best way
How about:
img {
border:none;
padding:0;
margin:0;
display:inline;
}
and if you use ul :
ul li {
padding:0;
margin:0;
display:inline;
}
li img {
padding:0;
border:none;
margin:0;
}
or better yet, start your day off right:
* {
border:none;
margin:0;
padding:0;
}
--
- C Montoya
rdpdesign.com http://rdpdesign.com ...
liquid.rdpdesign.comhttp://liquid.rdpdesign.com...
montoya.rdpdesign.com http://montoya.rdpdesign.com
__
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/
Re: [css-d] 3 images in a ul, is this the best way
At 02:37 PM 10/12/2005, Scott Haneda wrote: I still get some margins, no matter what I try, can someone perhaps show me a example of three same sized images all sitting together to make one image? Scott, Here's an example of an unordered list used with image tiling: http://alistapart.com/d/multicolumnlists/example7.html In this example, tiles (segments) of one complete image are used to highlight list items on hover, but they fit together seamlessly, no margins, padding, or borders. Paul __ 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/
Re: [css-d] 3 images in a ul, is this the best way
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=firsta href=...img src=/home/three_01.jpg.../a/li
li id=seconda href=...img src=/home/three_02.jpg.../a/li
li id=thirda 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/
