8 replies [Last post]
jsegura
Offline
newbie
Last seen: 15 years 5 weeks ago
Timezone: GMT-5
Joined: 2004-10-16
Posts: 6
Points: 0

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>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

&lt;UL&gt; 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.

jsegura
Offline
newbie
Last seen: 15 years 5 weeks ago
Timezone: GMT-5
Joined: 2004-10-16
Posts: 6
Points: 0

&lt;UL&gt; 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.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

&lt;UL&gt; 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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

&lt;UL&gt; 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.

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

&lt;UL&gt; 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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

&lt;UL&gt; 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 Wink Laughing out loud

Life's a b*tch and then you die!

jsegura
Offline
newbie
Last seen: 15 years 5 weeks ago
Timezone: GMT-5
Joined: 2004-10-16
Posts: 6
Points: 0

&lt;UL&gt; with no gaps

Thanks guys for your valuable input. I'm going with text instead.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

&lt;UL&gt; 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.

Life's a b*tch and then you die!