Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > HTML / XHTML
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 05-23-2008, 09:21 AM
  #1
404notfound
Soldier (Level 11)
 
Join Date: Jan 2006
Posts: 112
iTrader: (0)
404notfound is an unknown quantity at this point
Question TOC Style Dotted Line (tab fill) in Html?

I'm trying to come up with a way to mimic a "tab fill" in html:

Like this only the page numbers would be justified to the same line, and the ... is "auto generated" to fill the empty space:

1. The First Line ................................... 25
2. Below The First ................................. 32
3. After That ..........................................47

The "titles" would be in column 'a', and the numbers would be in column 'b'
The space after the "titles" would be filled with ...

I have come close using 'bottom border' but that puts the ... under the text as well.

I tried using span and div, but that will either putt the ... on a new line below the text, or if i use 'display:inline;' it puts it on the same, but it no longer fills the empty space to the edge, and only displays the ... when there is text inside. I tried stretching it out with a clear image but it didn't work either.

Also tried using a 'highlight' (background color) on the text to cover the bottom border but that didn't really work. (the closest i got was using this method with a background image of a dot. but that wasn't much better...)

Any thoughts? Thanks.
404notfound is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-23-2008, 10:36 AM
  #2
ringsoft
Super Deity (Level 18)
 
ringsoft's Avatar
 
Join Date: Oct 2007
Posts: 1,158
iTrader: (0)
ringsoft has a spectacular aura aboutringsoft has a spectacular aura aboutringsoft has a spectacular aura about
I don't know of a way to do that just using HTML... there might be a serverside method.

More generally, aren't you overcomplicating by including the dots? This might be suited to a two column table, with the page number in the RH column, which would then be guaranteed to align consistently...?
__________________

www.websitetoolshed.com
ringsoft is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-23-2008, 10:37 AM
  #3
404notfound
Soldier (Level 11)
 
Join Date: Jan 2006
Posts: 112
iTrader: (0)
404notfound is an unknown quantity at this point
Thumbs up Background Image

I think a background image and text highlight (bg color) is the way to go...


HTML Code:
<html>
<head>
<style type="text/css">body {background-color: #FFFFFF;}</style>
</head>
<body>
<div align="left" style="background-image:url(dot.gif); background-repeat:repeat-x; background-position:100% 90%;">
<span style="background-color:#FFFFFF;">Title</span>
</div>
</body>
</html>
Attached Images
 
404notfound is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-23-2008, 10:40 AM
  #4
404notfound
Soldier (Level 11)
 
Join Date: Jan 2006
Posts: 112
iTrader: (0)
404notfound is an unknown quantity at this point
Quote:
Originally Posted by ringsoft View Post
I don't know of a way to do that just using HTML... there might be a serverside method.

More generally, aren't you overcomplicating by including the dots? This might be suited to a two column table, with the page number in the RH column, which would then be guaranteed to align consistently...?
...........yeah.
404notfound is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-23-2008, 10:41 AM
  #5
ringsoft
Super Deity (Level 18)
 
ringsoft's Avatar
 
Join Date: Oct 2007
Posts: 1,158
iTrader: (0)
ringsoft has a spectacular aura aboutringsoft has a spectacular aura aboutringsoft has a spectacular aura about
It just occured to me that using <pre> might be an HTML only solution, as it used a fixed-width font. Not very attractive, though.

I'd be interested to hear if you get the background image approach to work consistently...
__________________

www.websitetoolshed.com
ringsoft is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-23-2008, 11:26 AM
  #6
404notfound
Soldier (Level 11)
 
Join Date: Jan 2006
Posts: 112
iTrader: (0)
404notfound is an unknown quantity at this point
Quote:
Originally Posted by ringsoft View Post
It just occured to me that using <pre> might be an HTML only solution, as it used a fixed-width font. Not very attractive, though.

I'd be interested to hear if you get the background image approach to work consistently...
I see how that could work, thats a cool tag. Good for coding ascii art perhaps.

Last edited by 404notfound : 05-23-2008 at 12:09 PM. Reason: eye kant spl
404notfound is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-23-2008, 12:00 PM
  #7
404notfound
Soldier (Level 11)
 
Join Date: Jan 2006
Posts: 112
iTrader: (0)
404notfound is an unknown quantity at this point
Smile Not half bad...

It would be nice if the dots didn't have to come from an image, but I think I can live with this for now. Seems to work in FF, IE and Safari. W3C Valid Html and CSS. Minimal amount of code... resizes well (not the dots unless in IE7 which zooms the whole page not just the text) ... and totally pointless.



Text must be on a solid bg color for this method to work effectively.

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TOC</title>
<style type="text/css">
body {background-color: #FFFFFF;}
.dots {background-image:url(dot.gif); background-repeat:repeat-x; background-position:100% 95%; margin-bottom:8px;}
.left {font-family: "Times New Roman", Times, serif; font-size:14px; background-color:#FFFFFF; float:left;}
.right {font-family: "Times New Roman", Times, serif; font-size:14px; background-color:#FFFFFF; float:right;}
</style>
</head>
<body>

<div class="dots"><div class="left">Chapter 1</div><div class="right">9</div> <div style="clear:both;"></div></div>
<div class="dots"><div class="left">Chapter 2</div><div class="right">14</div> <div style="clear:both;"></div></div>
<div class="dots"><div class="left">Chapter 3</div><div class="right">27</div> <div style="clear:both;"></div></div>
<div></div>
</body>
</html>
Could add &nbsp; to: </div><div class="right"> = &nbsp;</div><div class="right">&nbsp; to put a space between the text and the dots...


The last "empty div" seems important for some cases in IE where the last dotted line drops down, the "empty div" seems to keep it in place. not sure why it happens to begin with however...
404notfound is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 02:32 PM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.