I'm new to CSS, and trying to display images down the left, with the
associated text, and hyperlink to the right of the image - the text
needs to be vertically aligned on the right of the image. I can align
vertically without the float statement, but sometimes the text is too
long, and the remainder of the text appears below the image. I do not
want  to use tables, as this slows the page down too much. Couple of
extra points:

1.Text size is defined in % (not fixed size/height) as must be able to resize it.
2.Image/text column is restricted in size, and cannot be increased
suffienctly to accomodate long text descriptions onto one line.
3. To be done without hacks.
4. All images are fixed size, 32px by 32px
5. Do not want to use html tables.
6. Must comply with DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 Transitional//EN
7. I know nothing about CSS!

so basically:

Image1
Image1  Desc1
Image1  Desc1
Image1

Image2
Image2  Desc2
Image2  Desc2
Image2

etc       etc

thanks in anticipation!

Jamie

Hi solentech-ga,

Thanks for your comment, your example url seems to work fine, but I'm
having a bit of trouble putting it to use in the task I'm working on.

Here is the total problem!

We currently have a framed site, and now want to change it to a
framless site, but my total inexpericance in CSS is proving a major
stumbling block. Our current site, is of simplistic design, and the
new frameless version will be along the similar lines.

The design I'm trying to acheive, uses 2 and 3 column page layouts.
I've included sample pages using nested tables so you can see what I'm
looking for.

3 Columns:	Left 20%, Middle 60%, Right 20%.	 
http://www.weddingservices4u.co.uk/dynamicc/testindex.asp

2 Columns:	Left 20%, Right 80%.
http://www.weddingservices4u.co.uk/county_catsasp2/county_accommodation.asp

Whilse the above pages work, as they rely on nested tables to page
load times are too slow, so I'm looked into CSS as a solution, and
here is where my problems began!

My attempt as CSS from reading a couple of books and internet sites:
http://www.weddingservices4u.co.uk/dynamicc/acss/testcss.asp

The following points needed to be considered:

1. Each column must be of equal length - with each column having a
different backgound colour.

In my attempt, you can see after Wine and Champagne the column stops,
whereas the right hand column continues down to Yorkshire West
 
2. Left hand images are generated from a database, and should have the
dimensions of 32px by 32px.
3. Text size is defined in % (not fixed size/height) as must be able to resize it.
4. Text in left hand column, describing thubmnails must be vertially
aligned to image.
5.Image/text column is restricted in size, and cannot be increased
suffienctly to accomodate long text descriptions onto one line.

In my attempt, http://www.weddingservices4u.co.uk/dynamicc/acss/testcss.asp
the balloons text is at the top of the image, and when I can get it
centered, Hotels appears under the bed - and not under Accommodation!

6. Must be search engine friendly.
7. To be done without hacks.
8. Do not want to use html tables.
9. Must comply with DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 Transitional//EN
10. I know nothing about CSS!

I'm not sure if all the above is possible?

thanks

Jamie

You can start by stopping the text from wrapping below the images. 
You can accomplish this with the <nobr> tag.

<nobr>Image1</nobr>
<nobr>Image1  Desc1</nobr>
<nobr>Image1  Desc1</nobr>
<nobr>Image1</nobr>

<nobr>Image2</nobr>
<nobr>Image2  Desc2</nobr>
<nobr>Image2  Desc2</nobr>
<nobr>Image2</nobr>

Hi willcodeforfood-ga,

Thanks for that, I'd not come across that nobr before. 

It does stop the line from be split over 2 lines, and IE expands the
left hand column autocmatically to cater for the increased line length
... but unfortunately, in Firefox the text overspills into the middle
column.

http://www.weddingservices4u.co.uk/dynamicc/acss/testcss22.asp

thanks

Jamie

If you want to get your HTML looking better, you could try something
like the HTML I'm including here.  I've done the first four image/link
combinations, but you'll have to tweak the rest.  Notice I've adjusted
the "height" and "margin-top" style attributes for each item to get
them just right.  You'll need to put these atttributes into your table
of links, or hard-code them somehow.  I got this working in IE, but
have no idea how it will look in other browsers.  Floating and
positioning div tags to work cross-browser can be very tedious work,
as I'm sure you've discovered.


<html>

<body>

  <div id="leftcolumn" style="width:30%">

    <div id="accom" style="height:45px">
      <div id="accom_img" style="position:absolute"><img
src="accomodation.gif"></div>
      <div id="accom_txt" style="position:relative ; left:40px;
padding-bottom:6px; margin-top:-2px">Accomodations and Hotels</div>
    </div>

    <div id="ballons" style="height:37px">
      <div id="ballons_img" style="position:absolute"><img
src="balloons.gif"></div>
      <div id="ballons_txt" style="position:relative ; left:40px;
padding-bottom:6px; margin-top:1px">Balloons</div>
    </div>

    <div id="bath" style="height:38px">
      <div id="bath_img" style="position:absolute ;
padding-top:5px"><img src="bath.gif"></div>
      <div id="bath_txt" style="position:relative ; left:40px;
padding-bottom:6px; margin-top:5px">Beauty and Health</div>
    </div>

    <div id="books" style="height:45px">
      <div id="books_img" style="position:absolute ;
padding-top:5px"><img src="books.gif"></div>
      <div id="books_txt" style="position:relative ; left:40px;
padding-bottom:6px; margin-top:4px">Books</div>
    </div>

  </div>

</body>

</html>

Hi willcodeforfood-ga

I've tried it out, and it seems to work ok in IE, but not in Firefox -
this cross browser compatibility, is as you say driving me nuts!!!
Giving each images a difference set of spacing parameters is
complicated as it is database driven and would need a redesign. The
text still bleeds slightly into the centre column, before wrapping
around (in IE now, as well as Firefox) if resized outside the 20% left
column limit - oh for CSS to be a simple as tables!!!

http://www.weddingservices4u.co.uk/dynamicc/acss/test.asp

thanks

Jamie