inline text-align right in css?

#1

dear css experts:

is it possible to define css so that it looks as if it is a table of
contents?

text . . . . . . . . . . . Page 49

from something like

<div class="tocline"> <span class="header">text</span> <span
class="page">Page 49</span> </div>

I would love the leading dots, but I would be happy just to find out
how to position all page numbers *on the right margin*. help
appreciated.

PS: one could perhaps use a table to always align the page right, but
because I have different partitions on the left-side, this would be
rather ugly rather fast.

sincerely,

/iaw

#2

Jonathan N. Little wrote:

Quote:

Data could be a table, or maybe a list. Here is a list example.

Or it could be simply <span>
Your working example uses position:absolute
This one uses position:relative

<style type="text/css">
..menuitem {
border-bottom: dotted 1px black;
text-align: right;
}
..name {
background: white;
float: left;
margin-top: 3px;
}
..price {
background: white;
position: relative;
top: 3px;
}
</style>
</head>
<body>
<h1>Using Position Relative</h1>

<div class="menuitem">
<span class="name">Steak Diane</span>
<span class="price">15.00</span>
</div>
</body>

--
Gus

#3

Gus Richter wrote:

Quote:

Jonathan N. Little wrote:

Data could be a table, or maybe a list. Here is a list example.

Or it could be simply <span
Your working example uses position:absolute
This one uses position:relative

style type="text/css"
.menuitem {
border-bottom: dotted 1px black;
text-align: right;
}
.name {
background: white;
float: left;
margin-top: 3px;
}
.price {
background: white;
position: relative;
top: 3px;
}
/style
/head
body
h1>Using Position Relative</h1

div class="menuitem"
span class="name">Steak Diane</span
span class="price">15.00</span
/div
/body

You need to add "clear: left;" to ".menuitem" if you want more than on

item. I just though it made more semantic sense being a list than divs

ul.menu {
list-style: none; margin: 0; padding: 0;
}
ul.menu il {
border-bottom: dotted 1px black;
text-align: right;
clear: left;
}
..name {
background: white;
float: left;
margin-top: 3px;
}
..price {
background: white;
position: relative;
top: 3px;
}

<ul class="menu">
<li>
<span class="name">Steak Diane</span>
<span class="price">15.00</span>
</li>
<li>
<span class="name">Steak Diane</span>
<span class="price">15.00</span>
</li>
</ul>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#4

Jonathan N. Little wrote:

Quote:

Gus Richter wrote:
Jonathan N. Little wrote:

Data could be a table, or maybe a list. Here is a list example.

Or it could be simply <span
Your working example uses position:absolute
This one uses position:relative

You need to add "clear: left;" to ".menuitem" if you want more than on
item. I just though it made more semantic sense being a list than divs

Yes. Just another way to skin a cat. Whichever way works for you.

I believe that Rijk van Geijtenbeek submitted it some time back.

--
Gus

#5

Beautiful. Thank you very much. css is an art!

regards,

/ivo

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

inline text-align right in css?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

inline text-align right in css? - 12-12-2007 , 12:58 PM

Re: inline text-align right in css? - 12-12-2007 , 03:44 PM

Re: inline text-align right in css? - 12-12-2007 , 04:29 PM

Re: inline text-align right in css? - 12-12-2007 , 07:55 PM

Re: inline text-align right in css? - 12-13-2007 , 01:35 PM