Results 1 to 11 of 11
  1. #1
    Join Date
    Jan 2002
    Posts
    428

    problem with buletted list (probably really simple)

    I am changing th layout on my site and am having issues getting the buletts to work how I want. Here are before and after pics. As you can see (I hope), I want the text to stay to the right of the bullett when it runs beyond the first line. Here is the raw code for that area:

    <?php
    $query = "SELECT * FROM book GROUP BY id ORDER BY id DESC LIMIT $popularamount";
    $books = mysql_query($query);
    print "<tr><td>";
    while ($line = mysql_fetch_array($books, MYSQL_ASSOC))
    print "\t\t\t\t\t\t<LI><A HREF=\"book.php?id=$line[id]\">$line[title] ($line[publish_year])</A></LI></tr>\n";
    print "\t\t\t\t\n";
    print "</td>";
    print "<br /><br />";
    ?>

    and the CSS for the colum style just in case:

    div.boxbody div.column {
    width: 30%;
    float: left;
    padding: 1.5%;
    }

  2. #2
    Join Date
    May 2003
    Location
    In a home
    Posts
    32
    Is the code the same for both pictures?
    Last edited by Misto-Roboto; 04-13-2004 at 08:05 PM.
    SquarezNet Hosting.... Coming Soon...

  3. #3
    What you want is usually called a "hanging indent"

    Try using an indent style like:
    P {text-indent: -5%}

    Here's a code snippet that plays with it:

    <html><head>
    <style type="text/css"><!--
    body{
    margin: 2em;
    text-align: justify;
    font-family: verdana;
    font-size: 1em;
    }

    .wrong { text-indent: -3em; }
    .hang { text-indent: -3em; margin-left: 3em; }
    .large { text-indent: -3em; margin-left: 6em; }
    --></style>
    </head>

    <body>
    <p class="wrong">
    wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph wrong paragraph
    </p>

    <p class="hang">
    hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph hanging paragraph
    </p>

    <p class="large">
    large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph large paragraph
    </p>
    </body></html>

  4. #4
    Join Date
    Jan 2002
    Posts
    428
    Isn't what I want the reverse of a hanging indent?

    * blah blah blah blah
    ---blah blah blah blah

    (where - is a space and it should align with the line above)

  5. #5
    Join Date
    Mar 2004
    Posts
    80

  6. #6
    Join Date
    Jan 2002
    Posts
    428
    That first bit of CSS did not seem to have any effect on IE.

    Surrounding the <li> with <ul> did sort of fix it. Is there any way that I can reduce the tab to a half tab and remove the double spacing between bulletts?
    Last edited by SarcasticDwarf; 04-13-2004 at 11:06 PM.

  7. #7
    Join Date
    Mar 2004
    Posts
    80

  8. #8
    Join Date
    Jan 2002
    Posts
    428
    Originally posted by Ziad
    Not sure if that will do it but try to set the line-height property of the list text to 0. That should get rid of the double-space. For the tab I do not know of anything that can be done.
    That seems to only effect the spacing between lines on the same bullett or something. Anything below .9 causes them to overlap.

  9. #9
    Join Date
    Mar 2004
    Posts
    80
    For my site, I noticed the double-spacing you were talking about. Here's what I have for my UL:

    ul.check {
    list-style-type:circle;
    list-style-image:url(list_item.gif);
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:10pt;
    line-height:14pt;
    }

    This reduces the spacing between each list element.

  10. #10
    Join Date
    Jan 2002
    Posts
    428
    Originally posted by Ziad
    For my site, I noticed the double-spacing you were talking about. Here's what I have for my UL:

    ul.check {
    list-style-type:circle;
    list-style-image:url(list_item.gif);
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:10pt;
    line-height:14pt;
    }

    This reduces the spacing between each list element.
    odd, I copied that exact code and used the same image and still got the spacing.

  11. #11
    Join Date
    Mar 2004
    Posts
    80
    My list_item.gif is a 15x15 pixels image of a checkmark. You can see the result on my homepage near the middle. You can try doing a list_item.gif for yourself that's just a smaller bullet, and see if it changes anything. I know for a fact that when mine was not an image, I could never get rid of the double spacing.

Posting Permissions

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