Instead of using tables to display a group of images that form one image, I want to do with <ul><lI> but I can't figure out how to make it seamless, with no gaps.
Is their a better solution other than <ul>
<UL> with no gaps
Hi jsegura,
Can you just use the images without a container?
Post a link and we will be able to offer better advice.
<UL> with no gaps
I want to rebuild the index page for site: http://joellortiz.com. Instead fo using tables I would rather do with css.
<UL> with no gaps
Here is how I would approach this. Apply a class (i've chosen to call it "slice") to your <ul> tag which will then allow it to provide context for the tags nested within. Define your <li> as a block:
ul.slice li{ display:block; position:relative; /* may need to put a float here depending on remainder of your structural CSS */ margin:0; border:0; padding:0; list-style:none; } ul.slice a { text-decoration:none; } ul.slice a img { display:block; } ul.slice span { /*Hidden text for text only browsers*/ height: 0; width: 0; overflow: hidden; position: absolute; /* for the benefit of IE5 Mac */ }and then your index would be:
<ul class="slice"> <li><a href="#" title=""><img src="..." alt="" /></a> <span>Link 1</span> </li> <li><a href="#" title=""><img src="..." alt="" /></a> <span>Link 2</span> </li> <li><a href="#" title=""><img src="..." alt="" /></a> <span>Link 3</span> </li> </ul>Notice the use of <span> text to provide altenative text-only links. This is important for accessability purposes.
Note: I haven't tried out this code, but I believe it 'should' work. I'd recommend creating a page with just the sliced index for debugging purposes.
There are further alternatives. You can use :hover properties to change the background of the <a> tags to provide mouseovers. Or you could have your images as backgrounds for the <a> tags and swap images on :hover. Anyhow - if you want to give a few things a try, I know you will get help here.
DE
<UL> with no gaps
I suspect that you just need to zero your margins and padding for each of your CSS elements (Tony will advise); however, using graphic images for your text may look cool BUT it takes a relatively long time to download; the text will never be seen by search engine spiders; the text size cannot be increased for those with poor eyesight; and the blind cannot use text readers unless you use 'alt' tags. I'm sure I will not be the only person to suggest that you try and make your text look cool by styling it with CSS.
Edit: posted at the same time as the post above.
<UL> with no gaps
roytheboy makes an important point regarding seach engines. The <span> text will provide something for the spider's to index upon whereas an image alone is no use. Remember to use the title attribute on your <a ...> tags to provide hover text for your links.
DE
<UL> with no gaps
DE's <span> suggestion is a very good one (that I had not thought of), but if you like a challenge and like doing 'the right thing', you'll still go for a text solution with creative use of CSS. Go on - you know it makes sense
<UL> with no gaps
Thanks guys for your valuable input. I'm going with text instead.
<UL> with no gaps
Yo - way t' go [clap] .
Let me know when you've finished and don't expect it to be easy because you need to remember that different users have different font sets available to them. You'll learn a lot as you go though. Good luck.