Correct Markup For A List With Big Images so that it validates

How will the correct markup be for a list that has big images (different images each) next to it? Like a list of places you can go and each one with a picture of the destination (but not just a bullet, and aligned to the right, AND IE compatible)....So that i can use a heading, a little description and a floated img to the right, and avoid pasting the img itself in the document, but through a css background rule in the given div or whatever...Thanks in advance!

a list that has big images (different images each) next to it? Like a list of places you can go and each one with a picture of the destination

205993[/snapback]

I think the background can only have one image, and the rest of the images will have to be included in the html page. Maybe a border-less table? Or spans floated in the direction you want?

 

How many to a page? Is the size or speed of download a concern?

Im actually trying to develop two different things about this same issue. One of them can actually have the same background, but for the other I was thinking more like an individual ID for each div that will have a different image, but i wanted to avoid that.As this is the only content of the page (except for the heading and a 15k background image) i think i can afford a little bit of extra size if you have a solution.

Did you look at the link I pm'd to you? It has img's floated inside a div with text beside it. The Images could be links. or the text. or both. Only thing that doesn't have is a background Image,,, *wait*,,, yes it does.I guess maybe I am not understanding what you want.

but for the other I was thinking more like an individual ID for each div that will have a different image, but i wanted to avoid that.

The only way you'll be able to target different background images for each <li> will be to give each an ID.
The question you need to ask yourself though is: are the images just decoration or are they actual content?
If they're decoration and don't actually say anything about the content of the page, use background images, but if they're a graphic representation of places that you can go, I'd recommend putting them in your HTML as images, because they are content.

tyssen, do the images get picked up by the spiders? or the Image file names? I guess what I am asking is: does it matter if the image is named "image001" or "picture_of_hawaii"?

Filenames definitely are taken into consideration by search engine spiders. That's why a lot of sites use mod rewrite to change database entries into more meaningful file names.

Hi, yes i guess the images are more content than decorative, they are suposed to be a glimpse of what the link offers, thanks for that tip (to consider if the image is decorative or actual content) ill think in this in other stuff where i had doubts about css, its a really good question you must ask your self.

Yes jlhaslip i got the link on the pm but i already know how to float things, but just what i wanted is to know how to structure a markup and css layout that will of course validate and be the most logical and well formed, for a list of links that include an image on the li itself. But the image is different for each.

The other project i was doing i completed what i wanted, the same but in this case the image is the same, you can give this thing a look here:

http://forums.xisto.com/no_longer_exists/

The background image for the thing itself i put it inside the anchor, so it was like this: a {display:block;background-image:url(bg.jpg)} which at the beggining was more kind of thinking that the background will be more logically but in the LI not the link, but i got it like that, i dunno hehe...

cheers

Edited November 20, 2005 by jlhaslip (see edit history)