Sent by Adam Kuehn on 14 February 2005 22:10
Pam Sexton wrote:
>What I'm attempting to do is create a recipe where the ingredients
>will line up vertically. I'm reworking a table layout, where I had
>three td cells in a tr, and the alignment is perfect. I would
>prefer to use an ul, much simpler. I can achieve everything I want
>in the recipe, except for the alignment problem.
This is very difficult to do in a non-table layout. Others have
suggested that you stick with the table. However, if you think it is
important to place this in a list - and I can see some good arguments
for doing just that - to get the alignment you want, you'll have to
use spans and floats with defined widths. Inside the floated spans,
you'll have to work out the exact margining you'd like.
Something like this:
<ul>
<li><span class="qty">8</span> <span class="unit">tbsp</span> <span
class="ingredient">butter, without salt</span></li>
<li><span class="qty">4</span> <span class="unit">large</span> <span
class="ingredient">egg, whole, raw, fresh</span></li>
....
</ul>
ul {width: 32em; }
..qty { float: left; width: 3em; text-align: center; }
..unit {float: left; width: 8em; text-align: left; /* or center*/ }
..ingredients { float: left; width: 20em; text-align: left; }
The widths are picked more or less randomly. You need to assign them
values you think are appropriate. I have chosen em as the unit, so
that the columns make visual sense at various text sizes. The
disadvantage of doing that is that the page width will rise with text
size, as well. You could also add padding and/or margins to taste.
>Also, the text-transform: capitalize isn't working on the
>description field for the ingredients, in any browser. Does anyone
>have any idea why?
By not working, I am assuming you are expecting "BUTTER,WITHOUT SALT"
to become "Butter, Without Salt". This is not what text-transform:
capitalize does. It will turn "bUtteR" into "BUtteR", but will turn
"SALt" into "SALt". I.e. it acts only on the first character of each
word, and only works to make it upper case. Note also that you
cannot apply the property twice. So even though you might think you
could first use text-transform: lowercase and then apply
text-transform: capitalize, in fact, because of how the cascade
works, in CSS you may only act on the text once.
I would suggest using a pre-processor to turn all your text into the
casing you want as a default (all lower case often works well and is
easy to implement), and then at the browser level you can use
text-transform to change the default to something else.
Good luck,
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/