Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dot Leaders Used with Multi-line List for Index

    I'm in the midst of creating an index page which lists keywords/terms which are justified left, with a dot leader and the issue link to PDF downloads justified right.

    I used the dot leader list coding found at w3.org to build from...

    CSS:
    Code:
    /* Leaders */
    ul.leaders {
        max-width: 40em;
        padding: 0;
        overflow-x: hidden;
        list-style: none}
    ul.leaders li:before {
        float: left;
        width: 0;
        white-space: nowrap;
        content:
        ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "}
    ul.leaders span:first-child {
        padding-right: 0.33em;
        background: white}
    ul.leaders span + span {
        float: right;
        padding-left: 0.33em;
        background: white}
    For single line keywords/terms, the list works great. Unfortunately, there are a few terms that have quite a few issue references, which in turn flow onto subsequent lines and cause issues with the listing below it.

    Specifically, in section "C" of the index, where the first instance occurs:

    "Zr in Nitric Acid.......V4N3, V5N3, V6N4, V7N1, V9N1, V10N1, V10N2, V10N3, V12N1, V13N2, V15N1, V15N3, V16N1, V17N2, V18N4, V18N1"

    To view the index page, go to: http://atioutlook.com/issue-index

    username: test
    password: test

    I know enough html to be dangerous, but am not fluent. Trouble-shooting this myself has gotten me nowhere for the last two days. So, I'm hoping an expert can help me figure out how to make the lines not overlap or break the subsequent line's dot leader, and keep the list bullet aligned with the first line in the listing.

    If there's a better solution to the list configuration from what I'm using, by all means, let me know.

    Would really appreciate any help.

    Thanks!

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    By adding the property "clear" on the "ul.leaders li" selector, you could prevent the overlapping issue. You could also add a "text-align:right" on " ul.leaders span + span" in order to maintain the text to the right on the second line.

    If you'd like the terms coming on the right of the first line then going under when it's too long, you'll have to reverse the floating element. The keyword should float to the left and the terms must stay in the flow with a text-align:right.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •