Jump to content

How to display images in the positions images are displayed in Yahoo Images ?


jd2007

Recommended Posts

ANDY!

 

For the love of God mate - the correct markup for showing a list of images is to use a liat tag - in this case UL or even a definition list so you can associate and text with the image!

 

Floating the li (or dt/dd) left will ensure the display would be fluid - so the number of items on each line could change with screen resoultions - the ideal solution at the very least!!!

 

Why are people STILL obsessed with tables for layout.  The images (and their associated info) in that context are not even tabular data so tables are NOT the appropriate markup...

Link to comment
Share on other sites

  • 2 weeks later...

TM is right.

 

People have to start getting used to coding for the 21st Century.

 

You can do the same thing using classes for the images within multiple paragraphs instead of lists (or any block level container) - one class floats left and one floats right.

 

Example (from one of my sites showing images of guitars - note image widths vary greatly, but it still aligns as intended; it works even better with equal sized images):

<div id="content">
          
<p class="imagebox">
<img src="hag/head.jpg" alt="head stock" width="210" height="300" class="left" />
<img src="hag/perspective-a.jpg" alt="perspective a" width="225" height="300" class="right" />
</p>

<p class="imagebox">
<img src="hag/body.jpg" alt="body" width="209" height="300" class="left" />
<img src="hag/perspective-b.jpg" alt="perspective b" width="225" height="300" class="right" />
</p>

<p class="imagebox">
<img src="hag/full2.jpg" alt="full b" width="121" height="300" class="left" />
<img src="hag/kingsneck.jpg" alt="kings neck" width="300" height="184" class="left" />
<img src="hag/full1a.jpg" alt="full 1a" width="117" height="300" class="right" />
<img src="hag/serialnum.jpg" alt="serial number" width="200" height="146" class="right" />
</p>

<p class="imagebox">
<img src="hag/backfull.jpg" alt="back full view" width="500" height="179" />
</p>

</div>

 

Here is the css:

p.imagebox {
margin: 0 auto; 
padding: 5px 5px;
border: 1px solid #c9c9c9;
background-color: #000000;
text-align:center;
}
.left{ float: left; padding-left: 10px}
.right{float:right;padding-left: 10px} 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.