W3C home > Mailing lists > Public > www-style@w3.org > July 2003

Re: Leader Character

From: James Craig <work@cookiecrook.com>
Date: Mon, 14 Jul 2003 13:50:51 -0500
Message-ID: <3F12FB8B.9040904@cookiecrook.com>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:22 GMT