0

I just want to fix the min and max width of both side li Col for this and need to be dotted line between them col auto adjust i had try the below code.

for example as seen in this image. red block need to be fixed with min and max width and dotted need to be auto adjust.

but result is not near.

http://jsfiddle.net/DjzzK/ Thankyou enter image description here

<style>
       * { margin: 0; padding: 0; }
       html { color: black; padding: 2em; font: 16px/1.2 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
       html, #mainhead2 li, span {  background: #f7f7ee; }
       #main, caption { margin: 0 auto; } /* Application to lie caption element addresses Mozilla Bug 297676. */
       #main { border-collapse: collapse; }
       caption, li, li { padding: 0.1em 0; }
       caption { text-align: center; font-weight: bolder; }
       #mainhead2 ul { background: url("http://www.momsformarijuana.org/blogs/skins/mystique/images/dot.gif") 0 78% repeat-x; }
       #mainhead2 li, li + li { text-align: right; }
       #mainhead2 li { padding-right: 0.4em; font-weight: normal; }
       li + li { padding-left: 0.4em; }
       cite { font-style: normal; }
       span { padding: 0 0.2em; white-space: pre; }

      </style>  
      <div id='main'>
       <caption><cite>Dragonseye</cite> Table of Contents</caption>
       <div id='mainhead2'>
        <ul>
         <li scope="row"></li>
         <li><span>Prologue</span></li>
         <li><span>1</span></li>
        </ul>
        <ul>
         <li scope="row">1</li>
         <li><span>Early Autumn at Fort’s Galier</span></li>
         <li><span>4</span></li>
        </ul>
        <ul>
         <li scope="row">2</li>
         <li><span>Galier at Fort</span></li>
         <li><span>49</span></li>
        </ul>
        <ul>
         <li scope="row">3</li>
         <li><span>Late Fall at Telgar Weyr</span></li>
         <li><span>64</span></li>
        </ul>
        <ul>
         <li scope="row">4</li>
         <li><span>Telgar Weyr and lie College</span></li>
         <li><span>87</span></li>
        </ul>
        <ul>
         <li scope="row">5</li>
         <li><span>Weyrling Barracks and Biula Hold</span></li>
         <li><span>104</span></li>
        </ul>

       </div>
      </div>
Naresh
  • 2,761
  • 10
  • 45
  • 78
Shagun Sood
  • 153
  • 1
  • 2
  • 11
  • Are you looking for the same output as your image attached? (no negatives from me though) Also, are you looking for something similar to this? http://stackoverflow.com/questions/2508732/table-of-contents-leading-dots – Nitesh Sep 13 '13 at 09:25
  • yes same output want.. – Shagun Sood Sep 13 '13 at 09:28
  • 1
    Possible duplicate of http://stackoverflow.com/questions/4898287/how-to-display-text-a-dotted-line-then-more-text-spanning-the-width-of-the-page with the answer given by @Parm at http://jsfiddle.net/DeDRE/ – Nitesh Sep 13 '13 at 09:33
  • i think he/she want to do same after convert table elements in Ul Li.. – Naresh Sep 13 '13 at 09:43

2 Answers2

1

This should be implemented as one list instead of 17 individual ones... Just add some spans.

<ol>
 <li value="0">
  <span class="l">Prologue</span>
  <span class="r">1</span>
 </li>
 <li>
  <span class="l">Early Autumn at Fort’s Gather</span>
  <span class="r">4</span>
 </li>
 <li>
  <span class="l">Gather at Fort</span>
  <span class="r">49</span>
 </li>

and so on. See fiddle.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
0

Working DEMO

Try this

I have changed your css

css

body {
    width:100%;
}
ul {
    background: #f7f7ee;
    display:table;
    width:80%;
}
li {
    display:table-cell;
    text-align:left;
}
li:nth-last-child(1) {
    text-align:right;
}
ul:first-child li {
    padding:2px;
}
li:nth-last-child(3) {
 width:5%;
}

Hope this helps, Thank you

SarathSprakash
  • 4,614
  • 2
  • 19
  • 35