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

[Lozbo 0]

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!

[jlhaslip 4]

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?

[Lozbo 0]

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.

[jlhaslip 4]

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.

[Tyssen 0]

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.

[jlhaslip 4]

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"?

[Tyssen 0]

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.

[Lozbo 0]

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

Notice from jlhaslip:

Edit as per report

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