Images ad Text on same line item

Forum Moderators: not2easy

Message Too Old, No Replies

Images ad Text on same line item

terrybarnes

11:54 am on May 28, 2009 (gmt 0)

I have a number of line items where I'd like to have a text link (aligned left) to one thing and an image (aligned right) to link to another thing. The images and text are different for each line item.

Is this possible to do within a li tag or should I just create a load of div elements on the page?

Here's what I have so far - I know this isn't correct but I'm just really unsure as to what to do to get everything to align correctly.

.details ul
{
margin: 20px 0 0;
padding: 0;
list-style-type: none;
}
.details ul li
{
width: 443px;
padding-top: 3px;
padding-bottom: 3px;
border-bottom: 1px dotted #979797;
}

enigma1

11:12 am on May 29, 2009 (gmt 0)

Here is a possible code for it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test</title>
<style type="text/css">

.details ul {
width: 540px;
margin: 20px 0 0;
padding: 0;
list-style-type: none;
}

.details ul li
{
float: left;
width: 200px;
padding-top: 3px;
padding-bottom: 3px;
border-bottom: 1px dotted #979797;
}

.details ul li p
{
text-align: right;
margin: 0;
padding: 0;

}

</style>
</head>
<body>
<div class="details">
<ul>
<li><a href="#">Line Item 1</a></li>
<li><p><a href="#"><img src="image1.jpg" alt="" /></a></p></li>
<li><a href="#">Line Item 2</a></li>
<li><p><a href="#"><img src="image2.jpg" alt="" /></a></p></li>

I specified the width for the ul element long enough to accommodate one text and one image link. Then I setup a paragraph tag as a driver for the right alignment. The li's have a width of 200px but you should be able to change it if you need different spacing.

terrybarnes

8:43 pm on May 29, 2009 (gmt 0)

Thanks for this - really great stuff.

There's another thing that I'm not sure of though and that's how to vertically align the text on the left to the middle of the image contained on the right. At the moment it sits at the top.

enigma1

7:08 am on May 30, 2009 (gmt 0)

You can use the height and line-height in the li tag so:

.details ul li
{
float: left;
width: 200px;
padding-top: 3px;
padding-bottom: 3px;
border-bottom: 1px dotted #979797;
height: 34px;
line-height: 34px;
}

this affects both the text and image.

terrybarnes

8:22 am on May 30, 2009 (gmt 0)

Thank you, thank you, thank you. That's absolutely perfect.

terrybarnes

10:45 am on May 30, 2009 (gmt 0)

Just to let everyone know that I had to give the text and the images different classes so I could then specify the individual widths of each. Otherwise the li is the same width for both.