Results 1 to 6 of 6
  1. #1
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Redefine UL tag with CSS

    How would I define a CSS that would eliminate the extra space that the UL/LI tag combo prints before the list starts? Say I have a title above the list, and then the list itself, even if there are no P or BR tags before the list, it still prints an empty line. This tells me that by definition (like the P tag) there's an empty line above the list itself. <img src=/S/chatter.gif border=0 alt=chatter width=38 height=16>
    <pre><body>
    This is a test
    <ul>[*]item 1[*]item 2[*]item 3[/list]
    </body></pre>

    This code displays with the title "this is a test" followed by a blank line.

    I have Dreamweaver MX and tried to re-define the UL tag but wasn't sure which attributes to change. Can someone clue me in on which ones are needed? <img src=/S/confused.gif border=0 alt=confused width=15 height=20>

    Deb

  2. #2
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Redefine UL tag with CSS

    Try this:
    <pre><body>
    <ul>This is a test[*]item 1[*]item 2[*]item 3[/list]
    </body></pre>

    The only difference - move text to appear between <ul> and first[*] tag.

  3. #3
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Redefine UL tag with CSS

    That 'sort of' works however, the title 'This is a test' shows up aligned to the right with the list itself. Also, the only way to get this title to be like this is to directly edit the HTML, you can't do it via design view in DW. The person who asked me to figure this out doesn't know HTML very well so they work in design view. I was going to give him a CSS to redefine the UL tag - that was the idea anyway. <img src=/S/crossfingers.gif border=0 alt=crossfingers width=17 height=16>

    <pre> This is a test
    x Item1
    x Item2
    x Item3</pre>

    This is what it looks like (with 'x' for bullets since this isn't the actual web page output) and you see that the title is in-line with the bulleted items. I'd like it over on the left margin. I'll spend some time playing around with the CSS attributes and see which one sets the padding or border or whatever it's called above a list.

    Thnx,
    Deb

  4. #4
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Redefine UL tag with CSS

    Ahh - I see.

    The only way I've been able to accomplish this (short of some fancy CSS work) is to use tables. Create two columns - one for the bullets and one for the text. Like so:
    <pre><table>
    <tr>
    <td colspan="2">This is a test</td>
    </tr>
    <tr>
    <td>*</td>
    <td>Item 1</td>
    </tr>
    <tr>
    <td>*</td>
    <td>Item 2</td>
    </tr>
    <tr>
    <td>*</td>
    <td>Item 3</td>
    </tr>
    </table></pre>

    This will produce something like:
    <table cellpadding="2" cellspacing="0" border="0">

    <td colspan="2">This is a test</td>

    <td>*</td> <td>Item 1</td>

    <td>*</td> <td>Item 2</td>

    <td>*</td> <td>Item 3</td> </table>
    Hope this helps!

  5. #5
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Redefine UL tag with CSS

    Yeh, that'll work too. Since I'm trying to learn all the CSS attributes I messed around with them in DW and stumbled on this combo that worked:
    <pre><.style type="text/css">
    <.!--
    ul {
    margin: 0px;
    padding: 0px;
    list-style-type: square;
    list-style-position: inside;
    }
    -->
    <./style>
    </head>
    <body>
    This is a test
    <ul>[*]item1[*]item2[*]item3[/list]
    </body>
    </pre>

    This shows everything lined up to the left which I wanted. I need to tweak it a bit to indent the bullets a bit but this is close enough.

    Also, for some reason when I added the [pre] tags to show this code in the post, the stuff between the two <style> tags kept getting deleted. I had to add the leading "." so that it would show up. Is this a problem with TheLounge?

    Thnx,
    Deb

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Redefine UL tag with CSS

    > I need to tweak it a bit to indent the bullets a bit but this is close enough.

    Yes, I think if you now define the li style, you can get the indents there the way you want them.

    > the stuff between the two <style> tags kept getting deleted

    The Lounge markup interpreter honors the comment tags, so since everything between the <style> and </style> tags was commented out, it was removed. You actually don't need those comment tags for any modern browser. Modern meaning post-1997. <img src=/S/smile.gif border=0 alt=smile width=15 height=15>

Posting Permissions

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