13 replies [Last post]
F*SH
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

Hello

I'm trying to create a list of things, with each row having an image on the left and text to its right. I didn't think it would be so hard to do in CSS, I must be overlooking something!

The best way to explain what I'm hoping for is with a table that does it:

<table>
<tr>
<td>Image 1</td>
<td>Text 1</td>
</tr>
<tr>
<td>Image 2</td>
<td>Text 2</td>
</tr>
<tr>
<td>Image 3</td>
<td>Text 3</td>
</tr>
</table>

Simple no? What have I missed? Thanks!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 22 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

[RESOLVED] Supposedly simple image/text alignment

This doesn't even sound like a CSS question, more like an html question. Of course you could style to your liking

<ul>
  <li><img src="img1.jpg" />This is text 1.</li>
  <li><img src="img2.jpg" />This is text 2.</li>
  <li><img src="img3.jpg" />This is text 3.</li>
</ul>

F*SH
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

[RESOLVED] Supposedly simple image/text alignment

A step closer.

I didn't explain the big issue too well. I'm trying to get the top of the text aligned with the top of the image (the list idea aligns to bottoms). I figured, no problem, I'll just use vertical-align:text-top. But that didn't do anything at all..

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 27 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

[RESOLVED] Supposedly simple image/text alignment

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/xhtml; charset=us-ascii" />
  <title>
  </title>
  <style type="text/css">
.floatcontainer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility:hidden;
}
.floatcontainer {
  display: inline-table;
}

/* Mark Hadley's fix for IE Mac */
/* Hides from IE Mac \*/ * html

.floatcontainer {height: 1%;}
.floatcontainer{display:block;}

/* End Hack */
  </style>
</head>
  <body>
    <div class="floatcontainer">
      <img style="float: left;" src="image_1.jpg" alt="image 1" />
      <p>text 1</p>
    </div>
    <div class="floatcontainer">
      <img style="float: left;" src="image_2.jpg" alt="image 2"/>
      <p>text 2</p>
    </div>
    <div class="floatcontainer">
      <img style="float: left;" src="image_3.jpg" alt="image 3" />
      <p>text 3</p>
    </div>
  </body>
</html>

This is one of the float methods explained on this site.
http://www.csscreator.com/attributes/containedfloat.php

There probably is an easier way :roll:

This is my big chance . . . yep, I blew it . . .

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 22 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

[RESOLVED] Supposedly simple image/text alignment

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

ul img {
    vertical-align: text-top;
    }

Works fine for me...

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 27 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

[RESOLVED] Supposedly simple image/text alignment

wolfcry911 wrote:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

ul img {
    vertical-align: text-top;
    }

Works fine for me...

Yeah, this way is much better. :oops:

This is my big chance . . . yep, I blew it . . .

F*SH
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

[RESOLVED] Supposedly simple image/text alignment

Again, good in theory, but my browser (FF) renders only the first line next to the image. When it word-wraps, it continues beneath the image..

Like this

------------ Text Text Text Text Text Text Text Text Text Text
------------
---IMG----
------------
------------
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.

Actually, it not the first time it's done this, I've tried several layouts with a similar result. Ideas?

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 27 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

[RESOLVED] Supposedly simple image/text alignment

We will be guessing without a link.

This is my big chance . . . yep, I blew it . . .

F*SH
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

[RESOLVED] Supposedly simple image/text alignment

Did I not provide one? Ah. This makes it a little more difficult.. oops.

Anyway:
http://fencing.warwickcompsoc.co.uk/demo.html

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 41 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[RESOLVED] Supposedly simple image/text alignment

I'd put your text inside an element (probably <p></p>) and give that a left-margin wider than the width of your image.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

F*SH
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

[RESOLVED] Supposedly simple image/text alignment

Gave it a shot (third image/text) but now the whole text is below the image.

I wish I had a clearer understanding of the DOM and css layouts. It's a good system, but some things just seem so vague and complex..

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 41 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[RESOLVED] Supposedly simple image/text alignment

Sorry, gave you a bum steer on that one. Should be:

ul
{
margin: 0;
padding: 0;
list-style: none;
}
			
li { clear: left;  }

li img	{ float: left; }

Keep in mind though that as the user increases their text size, the text will wrap around to the left. You might want it this way or maybe the pics will always be big enough to prevent the wrap.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

[RESOLVED] Supposedly simple image/text alignment

From your link, may we assume same width images? If so, a little expansion on Tyssen's theme;

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

li {
    clear: left;
    }

li img {
    float: left;
    margin: 5px 0; /*float margins don't collapse, so this make   
                     10px between images*/
    width: 200px;
    }

li p {
    margin-left: 250px;
    }
See li #3.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

F*SH
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

[RESOLVED] Supposedly simple image/text alignment

Perfect, just what I was hoping for. Cheers Tyssen. I'm going to have to look up what the clear does more, I've used it a few times but I never really /got/ it.

Oh an Gary, can't quite see what your code does. I'm guessing that it keeps all the text to the right, yes? It's not a big issue if it wraps, but I'll keep it in mind!

Thanks guys.