- From: James Craig <work@cookiecrook.com>
- Date: Mon, 14 Jul 2003 13:50:51 -0500
- To: "Peter Foti (PeterF)" <PeterF@SystolicNetworks.com>
- CC: "'www-style@w3.org'" <www-style@w3.org>
Peter Foti (PeterF) wrote:
> Example:
> Chapter 1............................. Page 5
It seems to me that you could do this (visually at least) with currently
available CSS techniques. Perhaps you want a more semantic method, but I
would try something like this for the visual effect:
<div class="row">
<span class="title">Chapter 1</span>
<span class="page">Page 5</span>
</div>
Then in the CSS, align the div text right and give it a background-image
(dot repeat-x), float the 'title' span left, and give both of the spans
solid background-colors (to cover up the div's dotted background-image).
Something like:
.row {
text-align: right;
background: #fff url(dot.gif) top left repeat-x;
/*
or perhaps a relative height from top
background-position: 1em left;
*/
}
.title {
float: left;
background-color: #fff;
}
.page {
background-color: #fff;
}
Cheers,
James Craig
--
http://www.cookiecrook.com/
Received on Monday, 14 July 2003 15:21:03 UTC