Hoi CSS fanatics,
just joined your forum. The books I have them since 2001.
But now i ran into a problem and i can not solve it. May somebody else can??
I have a textblock that i center. no problem. Some of the rules are 1-liners, others are not. Ther is a price indication and the end of the rule. I would like to align this price at the right side.
May be it’s clearer if you watch the attachment. I know that it is easier if I align one block at the left and the price-block at the end.
But i do need to center the textblock for filling space.
Is there somebody who can fixed this or am i just dreaming and is this impossible in CSS??
[font=verdana]There are a couple of easy ways to do this.
One is to use a <table>, and have the description and price in separate columns. It could legitimately be described as tabular data, so there’s no problem there. It might also lead to a neater presentation, with the text keeping separate from the price on items with more than one line of text, and the price being vertically centred on those items.
The other is to put the price before the description and set it to float:right;. The downside to this is that it will always appear alongside the first line of the description, whereas you probably want it to appear alongside the last line.
(The reason that you are not getting any joy out of span {text-align:right;} is that a <span> will by definition only be as large as is needed to enclose the text/content within it. You can see this if you put a border on it. So while the text is right-aligned within the <span>, there is nowhere for it to move to, so it looks exactly the same as any other alignment.)[/font]
Thanks Stevie,
Just tried your second tip, but i probably will be doing something wrong, cause the price was either above the first rule or under the last.
I think i better follow your first advice. You’re right concerning the presentation.
And also thanks for the explantion with span. I really did make a “thinking error”.
Learned a lot.
thnx.
I assume the attachment was not what you wanted but an example of what you had tried?
If you want the price aligned right you will probably need to move it outside so the text can wrap before.
e.g.
IE8+ only.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.menu {
margin:20px auto;
padding:0;
list-style:none;
width:50%;
background:#f5d3b0;
color:#4d1d18;
border:5px solid #300;
padding:20px 1px;
}
ul.menu li {
text-align:center;
position:relative;
zoom:1.0;
font-size:18px;
line-height:1.3;
margin:15px 6em 15px 3em;
clear:both;
}
ul.menu li strong {
float:right;
width:5em;
text-align:right;
margin-right:-3em;
margin-left:-2em;
}
</style>
</head>
<body>
<ul class="menu">
<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem <strong>£11.75</strong></li>
<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet <strong>£11.75</strong></li>
<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem dolor sit amet <strong>£11.75</strong></li>
<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametsit amet Lorem ipsum dolor sit amet <strong>£11.75</strong></li>
<li>Lorem ipsum dolor sit amet Lorem ipsum dolor <span></span> <strong>£11.75</strong></li>
<li>Lorem ipsum dolor sit <strong>£11.75</strong></li>
</ul>
</body>
</html>
Or using display:table.
IE8+ only.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.menu {
margin:20px auto;
padding:0;
list-style:none;
width:50%;
background:#f5d3b0;
color:#4d1d18;
border:5px solid #300;
padding:20px 100px;
}
ul.menu li {
text-align:center;
zoom:1.0;
font-size:18px;
line-height:1.3;
margin:15px 0;
display:table;
table-layout:fixed;
width:100%;
border-bottom:1px dotted #aaa;
padding:0 0 10px;
}
ul.menu li strong, ul.menu li span {
display:table-cell;
vertical-align:bottom
}
ul.menu li strong {
width:1px;
white-space:nowrap;
text-align:right;
padding:0 0 0 10px;
}
</style>
</head>
<body>
<ul class="menu">
<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem</span> <strong>£11.75</strong></li>
<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</span> <strong>£11.75</strong></li>
<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem dolor sit amet</span> <strong>£11.75</strong></li>
<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametsit amet Lorem ipsum dolor sit amet</span> <strong>£11.75</strong></li>
<li><span>Lorem ipsum dolor sit amet Lorem ipsum dolor</span> <strong>£11.75</strong></li>
<li><span>Lorem ipsum dolor sit </span><strong>£11.75</strong></li>
</ul>
</body>
</html>
IE8+ only
Or as Stevie said a normal table would be ok also.
thanks for helping me. I already fixed it with Stevie’s tip (tabular data).
And to be honest, is indeed a cleaner and netter result. By the end of the week, you can have a look at www.bistrolafrontiere.com
Then the site will be online.
Thank you all for lookig for a solution.