Jul 6, 2008

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

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

free web hosting

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

Lozbo
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!

Reply

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

Reply

Lozbo
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.

Reply

jlhaslip
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.

Reply

Tyssen
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.

Reply

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

Reply

Tyssen
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.

Reply

Lozbo
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

 

 

 


Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : markup images validates

  1. Double Combo Box Produces Images? - (1)
  2. Substitute Form Button For An Image - homemade images in forms buttons (3)
    Hi, I have the next formular : CODE  <form method='post'
    action='index.php?mode=2&id=1'>                <input type='hidden'
    name='name' value='Canon Digital Ixus 700'/>                <input
    type='hidden' name='id' value='1'/>                <input
    type='hidden' name='qty' value='1'>                <input
    type='hidden' name='cost' value='40'>                <input
    type='submit' value='Add to ca...
  3. Opening Images In Pictureviewer Instead Of Browser - Locally (7)
    What I am trying to do is make up a small HTML site which will be based localy on my computer and
    basicly show all of the images I have taken on different holidays. What I want though is when I
    click on an image for it to be opened up in Windows Picture Viewer. As the web site will all be
    saved locally on my computer and not be going on the internet is there any way of achiving this? I
    am running Windows XP Professional if it makes any difference Thank you in advance,kvarnerexpress...
  4. Viewing Images - Thumbnails to full size (10)
    Hi, Need help designing a thumbnail page in frontpage. Need to have about six thumbnails aligned on
    the right hand side, and when you put the mouse over the thumbnail you can preview the image on the
    same page (as opposed to previewing it in a new window). Does anyone know a good way to do this?
    ...
  5. Web Images Optimizer? Is There Any? - (5)
    can any1 tell me where can i find a imge optimizer for web... so.. i have a lot of jpg images w 300
    dpi inside a folder named IMG... i want convert all images to 72 dpi and 75 quality the fastest
    possible... can any software do that? thanks /laugh.gif" style="vertical-align:middle"
    emoid=":lol:" border="0" alt="laugh.gif" />...



Looking for correct, markup, list, big, images, validates

Searching Video's for correct, markup, list, big, images, validates
advertisement



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



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE