Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Correct Markup For A List With Big Images, so that it validates
Lozbo
post Nov 18 2005, 12:59 AM
Post #1


Super Member
*********

Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382



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!
Go to the top of the page
 
+Quote Post
jlhaslip
post Nov 18 2005, 01:43 AM
Post #2


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,954
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol



QUOTE(Lozbo @ Nov 17 2005, 05:59 PM)
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
*


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?
Go to the top of the page
 
+Quote Post
Lozbo
post Nov 18 2005, 01:56 AM
Post #3


Super Member
*********

Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382



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.
Go to the top of the page
 
+Quote Post
jlhaslip
post Nov 18 2005, 03:24 AM
Post #4


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,954
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol



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.
Go to the top of the page
 
+Quote Post
Tyssen
post Nov 18 2005, 05:54 AM
Post #5



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818



QUOTE(Lozbo @ Nov 18 2005, 11:56 AM)
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.
Go to the top of the page
 
+Quote Post
jlhaslip
post Nov 18 2005, 09:24 PM
Post #6


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,954
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol



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"?
Go to the top of the page
 
+Quote Post
Tyssen
post Nov 19 2005, 03:16 AM
Post #7



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818



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.
Go to the top of the page
 
+Quote Post
Lozbo
post Nov 20 2005, 06:41 PM
Post #8


Super Member
*********

Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382



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://www.cucea.udg.mx/ncentro/taller_dis_cur_competencias/

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


This post has been edited by jlhaslip: Nov 20 2005, 06:56 PM
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Top 10 Geek Ways To Beat Boredom(11)
  2. List Of Free Games(4)
  3. Free Sms Site(5)
  4. How To Get High Quality Gif Images In Flash(1)
  5. Ameran Portals?(1)
  6. Database Or Pdf(3)
  7. Data Structures -- Linked List -- Reverse(4)
  8. Political Correctness Getting Ot Of Hand(12)
  9. A List Of Great Movies!(160)
  10. A List Of Animals And Their Meaning(1)
  11. Creating Links In Images(17)
  12. Please Can You Review My Blog(3)
  13. Is Eating Meat Morally Correct?(77)
  14. Scrolling Images?(5)
  15. Recommended List Of Money Making Sites(0)
  1. How To Display Images Of A Directory(4)
  2. Turning An Image Into A Cartoon Style - Photoshop(30)
  3. Arrays And List Boxes(2)
  4. 157 Of The Best Free Software On The Net(7)
  5. A List Of Awesome Free Fps'(29)
  6. Getting Flash Images On A Site(1)
  7. List GMail Giveaway(58)
  8. How To Make An Ultimate Game List.(0)
  9. List Of Free Directories To Submit Your Websites(7)
  10. Can Anyone List Some Good Urls For Photoshop Brushes?(5)
  11. Adding Shine To Text(1)
  12. Posts To Mailing List Are Blocked(1)
  13. Blank Images - (white Square W/red X)(8)
  14. <