SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Austin Texas
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What tags can I put in an unorded list to help style?

    I am trying to create unordered lists with different image bullets for li items. Unfortunately I don't want to put the bullet styling class in the ul element or each li. I don't want to use multiple ul's either.

    I intended on wrapping a span around several li elements that have the same bullet but I just realized span tags are not valid in a ul. What tags can go in an unordered list besides li and a.

    Here is what I mean, but it is not valid.

    <code>
    <ul class="basic_list">
    <span class="fruit_bullet">
    <li>apple</li>
    <li>orange</li>
    <li>peach</li>
    </span>
    <span class="dairy_bullet">
    <li>cheese</li>
    <li>milk</li>
    <li>cheese</li>
    </span>
    </ul>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Nothing can come between an opening ul and an opening li just as you cannot put anything between a tr and td tag in a table. Content can only come between a list pair.

    e.g.

    <ul><li> .... content is allowed here </li>... nothing allowed here <li> content here...</li></ul>

    In between the li pair you can have any tags you want (as long as they are valid ) and indeed you can even nest another ul.

    In your example you will either need to use separate (or nested) ul's for each different bullet or just add a class to the list item to indicate the bullet required.

    It seems like a nested list would be the ideal choice.

    Code:
    <ul class="basic_list">
        <li class="fruit_bullet">
            <ul>
                <li>apple</li>
                <li>orange</li>
                <li>peach</li>
            </ul>
        </li>
        <li class="dairy_bullet">
            <ul>
                <li>cheese</li>
                <li>milk</li>
                <li>cheese</li>
            </ul>
        </li>
    </ul>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Austin Texas
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling so there is no indent or margin

    I want each li item, even if nested, to have the same 0 left margin so it looks like one list.

    I am having a hard time targeting what I need to since there are so many of the same tags.

    I want the list to also work when there are no nested lists as well.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In that case, the following CSS should do the job...

    Code:
    ul, li {
      padding: 0; margin: 0;
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I want each li item, even if nested, to have the same 0 left margin so it looks like one list.
    That's just simple basic styling:

    Code:
    ul{margin:0 0 0 16px;padding:0}/* only first level lists have a margin*/
    ul ul {margin:0}/* no margin on second level so they stay in line with the first level*/
    I am having a hard time targeting what I need to since there are so many of the same tags.
    Same as above just use descendant selectors.

    ul = first level uls
    ul li = first level lis

    ul ul = second level uls
    ul ul li = second level lis

    You just have to cancel out any styling you don't want on the nested lists.

    If that's too difficult for you then simply use a class on a basic list.

    Code:
    <ul class="basic_list">
        <li>basic stuff</li>
        <li>basic stuff</li>
        <li class="fruit_bullet">apple</li>
        <li class="fruit_bullet">orange</li>
        <li class="fruit_bullet">peach</li>
        <li class="dairy_bullet">cheese</li>
        <li class="dairy_bullet">milk</li>
        <li class="dairy_bullet">cheese</li>
    </ul>
    Any of the methods will work and are really just following the basics of css but being logical also. Styling lists is no different to styling any other nested elements.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Austin Texas
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still having problems with the list being indented because of the padding left of 15px I'm assuming.

    Here's the html
    Code:
    <ul class="list_2">
    <li class="bullet_fruit">
    <ul>
    <li>apple</li>
    </ul>
    </li>
    <li class="bullet_dairy">
    <ul>
    <li>milk</li>
    </ul>
    </li>
    <li class="bullet_bread">
    <ul>
    <li>rye</li>
    </ul>
    </li>
    </ul>
    Here's the css
    Code:
    .list_2 {
    	margin: 0 0 20px 0;
    	padding: 0;
    	list-style-type:  none;
    	}
    .list_2 ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	}
    .list_2 li {
    	margin: 0 0 2px 0;
    	padding: 0 0 0 15px;
    	}
    .list_2 ul li {
    	margin: 0 0 2px 0;
    	padding: 0;
    	}
    .bullet_fruit li {
    	background:  url(../images_core/bullet/fruit.gif) no-repeat 0 3px;
    	}
    .bullet_dairy li {
    	background:  url(../images_core/bullet/dairy.gif) no-repeat 0 3px;
    	}
    .bullet_bread li {
    	background:  url(../images_core/bullet/bread.gif) no-repeat 0 3px;
    	}

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Austin Texas
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I solved the problem by adding a negative margin. I'm not sure if this is the best solution, but it works. If any of you come up with something better, please chime in.

    Code:
    .list_2 li ul li {
    	margin: 0 0 5px -15px;
    	padding: 0 0 0 15px;
    	}

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not totally sure why you're putting 15px padding on in the first place if you then need to shift it back over 15px? Do you have a working example online somewhere as we obviously can't see the images you're using from the code you provided.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by csswiz
    I'm not totally sure why you're putting 15px padding on in the first place if you then need to shift it back over 15px?
    I think that was to make room for the background image Dave. The padding keeps the text clear of the image.

    The negative margin will put things back to level and isn't a bad solution. It could have been offset by simply removing the padding from the parent list.

    Code:
    .bullet_fruit li {
        background:  url(../images_core/bullet/fruit.gif) no-repeat 0 3px;
        padding:0;
    }
    .bullet_dairy li {
        background:  url(../images_core/bullet/dairy.gif) no-repeat 0 3px;
        padding:0;
    }
    .bullet_bread li {
        background:  url(../images_core/bullet/bread.gif) no-repeat 0 3px;
        padding:0;    
    }

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah, I presumed that the padding was to pull it away from the image but hadn't spotted that the margin was being used for to force the child back into place

    I'd go with resetting the padding: 0; as well in that case.


Bookmarks

Posting Permissions

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