PDA

Click to See Complete Forum and Search --> : Help aligning text with CSS...

cusimar9
10-11-2006, 04:16 AM
I have a bit of a problem and I really can't figure out a simple way to achieve what I want.

A client of ours has a newsletter page where they can edit the text they want to go into a newsletter. Within this newsletter, they want to include pricelists like this:

Product A .......................... 4.99
Product A White ................. 5.99
Product B .......................... 2.99
Product B Blue .................... 3.99

Except they want the prices to line up exactly.

So, to reiterate - lots of text, price list, followed by lots more text.

Now I know the easiest way to do this is to use a fixed width font, but all the ones I've tried look dreadful.

I can't really ask them to enter the prices into tables because its too fiddly.

Can anyone think of a simple solution to this?
SuPerNoVi
10-11-2006, 04:48 AM
You don't really have a choice but to use either tables or divs.

Personally the best way is to use DIVs, like so...


<div id="container">

<div id="product-column">
Product A<br>
Product A White<br>
Product B<br>
Product B Blue<br>
</div>

<div id="price-column">
4.99<br>
5.99<br>
2.99<br>
3.99<br>
</div>

</div>


Then in the CSS code do the following...

#container {
width: 400px;
}

#product-column {
width: 300px;
float: left;
}

#price-column {
width: 100px;
float: left;
}

Hope that helps, Novi :)
WebJoel
10-11-2006, 07:49 AM
I agree with S. Div or table. I lean more towards tabular, as there would be a use for a "th" (table header), which for assistive technologies (screen readers, etc) a <th> would be recognized as a classification of items that are below it. -Tabular.
You said this is for a newsletter? Printed, or online? If printed, either Div or table. If online, as I stated, I lean towards table.

Haven't done much table in the last few years, but here's a quickie rendition of how I'd try it:

<style>
td {border:1px solid gray; margin:2px; text-align: center;}
</style>
</head>
<body>
<table style="padding:4px; width:250px; margin:25px;">

<tr style="background-color: #8DCFF4;">

<th>Item</th><th>Price</th></tr>

<tr><td>Product A</td><td>$4.99</td></tr>

<tr><td>Product A (White)</td><td>$5.99</td></tr>

<tr><td>Product B</td><td>$2.99</td></tr>

<tr><td>Product C</td><td>$3.99</td></tr>

<tr><td>X</td><td>Cost</td></tr>

<tr><td>Y</td><td>Cost</td></tr>

<tr><td>Z</td><td>Cost</td></tr>

</table>
</body>
If this is an online element, some psuedo-class works would be nice, to make the rows 'light up' on-hover, and individual table-cells even brighter. This would increase the focus horizontally, tying the item with the price.
If interested, I could work more on this or at least show some examples.
Kor
10-11-2006, 10:42 AM
It is to be done with divs as well. A basic example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<style type="text/css">
#container{
width:300px;
}
#container .left{
float:left;
}
#container .right{
float:right;
}
#container .nested{
height:30px;
}
</style>
</head>
<body>
<div id="container">
<div class="nested">
<div class="left">Product A</div>
<div class="right">4.99</div>
</div>
<div class="nested">
<div class="left">Product A White</div>
<div class="right">5.99</div>
</div>
</div>
</body>
</html>
ray326
10-11-2006, 01:29 PM
What? No one's going to do lists?