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

[jd2007]

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

[Lefu]

Hi, I don't think I understand what your question is, give more details pls

 

[jd2007]

i want images positioned the way images are positioned on Yahoo Images Search. how to do that..any ideas ?

[Lefu]

sorry but how do you get to view the images on yahoo?

 

[Lefu]

have a look at the attached file, let me know it it is what you're looking for or close.

 

[attachment deleted by admin]

[jd2007]

go here http://images.search.yahoo.com/search/images;_ylt=A0geu5y.RbBGYpoAJgdXNyoA?ei=UTF-8&p=aircraft&fr2=tab-web&fr=moz2

[jd2007]

yes, that's what i want

 

[AndyB]

yes, that's what i want

 

 

Two suggestions.

 

#1 ask better questions.  If you given the URL in your first post you would have helped.

 

#2 use a table

[Lefu]

if you need the code I shall give u, when ever you want, send me and email on [email protected].

[ToonMariner]

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

[dbrimlow]

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}