List Style & Positioning Help Needed

DanDan · February 23rd, 2005, 10:36 AM

In building a gallery for a client I am required to create a thumbnail display system which displays the thumbnail on the left with the related information down the right of the image. All of this needs to be surrounded by a border.

The structure of my XHTML is as follows

Code:

<div class="imageThumb">
<img src="image.jpg" />[list]
<li>Title :</li>[list]<li>Title Goes Here</li></ul>
<li>Artist :</li>[list]<li>Name Goes Here</li></ul>
<li>Date :</li>[list]<li>##-##-####</li></ul>
</ul>
</div>

I need some way of getting the lists to display down the right of the image, and have the nested list to display on the same line as it's parent, ie.

Artist : Name

rather than

Artist :
Name

The page in question can be found at http://tfmwa.no-ip.com/sams/visual.php
There is a sample of what is currently happening, followed by an image which has been altered to better illustrate what I want to accomplish (there only wants to be the single dotted border however)

I also need the flow of this list to continue and not wrap under the image if the content of the list extends beyond the height of the image.

Any ideas would be greatly appreciated! ta!

DanDan · February 23rd, 2005, 02:56 PM

Okay I appear to have got the layout as I desired but it invloved re-organising the structure of the XHTML, so it now reads

Code:

<div class="imageThumb">
<img src="intrusion.jpg" />
<div class="details">
    <ul class="detailItem">
        <li>Title : </li>
    </ul>
    <ul class="detailValue">
        <li>Intrusion</li>
    </ul>
    <ul class="detailItem">
        <li>Artist :</li>
    </ul>
    <ul class="detailValue">
        <li>Dan Nightingale</li>
    </ul>
    <ul class="detailItem">
        <li>Date :</li>
    </ul>
    <ul class="detailValue">
        <li>16-08-2004</li>
    </ul>
    <ul class="detailItem">
        <li>Media :</li>
    </ul>
    <ul class="detailValue">
        <li>Photography</li>
    </ul>
    <ul class="detailItem">
        <li>Category :</li>
    </ul>
    <ul class="detailValue">
        <li>Sky</li>
    </ul>
    <ul class="detailItem">
        <li>Description :</li>
    </ul>
    <ul class="detailValue">
        <li>A simple, minimal photograph showing that the contrast between nature  and modern technology</li>
    </ul>
</div>
</div>

I would like to keep it with a single list, with the "detailItem" as a nested ul

If anyone knows how to create this layout whilst keeping the structure a lot cleaner please let me know, otherwise it works and I'll have to make do..

Ta.