SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help creating bullet list

    I am trying to create a simple bulleted list but every time I use <ul> and <li> it messes the whole page up. How can I make this list bulleted?
    Did you know that a single horse... <br />
    Has a yearly farrier bill of $350<br />
    Needs worming 4 times a year at $30<br />
    Eats more than $100 in hay and $85 in grain<br />
    Has a yearly vet fee of $300<br />
    Plus other expenses at over $200/year<br />
    Also can be found at:
    http://www.influencealife.org/adopt.html

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The first thing you need to do is get it set up as list items in a UL and then it will get bullets by default unless you reset the list-style.

    HTML Code:
    <ul>
        <li>Did you know that a single horse...</li>
        <li>Has a yearly farrier bill of $350</li>
        <li>Needs worming 4 times a year at $30</li>
        <li>Eats more than $100 in hay and $85 in grain</li>
        <li>Has a yearly vet fee of $300</li>
        <li>Plus other expenses at over $200/year</li>
    </ul>

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    K now when I do that it loses the <p> properties which I want it to keep
    check it out
    http://www.influencealife.org/adopt.html

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    change

    div#body_text p {
    clear: left;
    color: #123250;
    font-family: Verdana, Geneva;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
    }

    to

    div#body_text p, div#body_text ul {
    clear: left;
    color: #123250;
    font-family: Verdana, Geneva;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
    }

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Well you just need to style the UL now. You got to have the proper markup first and go from there.

    Give me a minute and I'll knock something together for you (if needed)

  6. #6
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    K got that now how do I tell it to indent?
    http://www.influencealife.org/adopt.html

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    That's why I would not group them with the p styles noonope did.

    Style the UL by itself and you will get full control of it alone.

    Add left padding to the UL for an indent. You should also zero out the margins on the UL for browser consistency.

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add this:

    div#body_text ul {
    list-style-type:none;
    margin-left: 60px;
    }


    @Rayzur: no need to write separate selector declarations with the same redundant rules. you just change the rules you want

  9. #9
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys I got it. All the coding I've done and I never really had to do a list. Thanks for all the help.
    Sean

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're welcome it was not a big deal, was it

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    add this:

    div#body_text ul {
    list-style-type:none;
    margin-left: 60px;
    }
    @Rayzur: no need to write separate selector declarations with the same redundant rules. you just change the rules you want
    Exactly, I can do the same with less code. And still have full control over the UL without having to add another selector.

    I would clean some of the longhand css out of there and let the font style cascade from the parent
    Code:
    div#body_text {
        float: right;
        width: 1000px;
        background: url(images/bodybackground.png) repeat-y;
        font:16px/22px Verdana, Geneva;
        color: #123250;
    }
    
    div#body_text p {
        margin:0 20px 30px 20px;
    }
    div#body_text ul {
        margin:0;
        padding:0 0 0 40px;
    }

  12. #12
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's a different story all together

    if you put it like that you are right, of course!

    but that would mean you would have to go and redo all the style sheet, not just these selectors. i just wanted to give the solution to the OP that he would understand. optimization was his homework after, if he wanted

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    that's a different story all together
    Yep, that's my story.

    ... focus on logical lightweight code!

  14. #14
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good to know somebody else here raises the bar for us all!

    well, if instead giving the solution he would understand, i would've started with changes in OP's style sheet page, i'm sure he would've developed a "cloud computing" of it.

    i've opted for the short and clear way out. his job later is to improve.

    i gave the OP what he wanted and by doing that i ensured he at least understood a few things. css cascading brought to discussion would've make for a good reason for him to lost any interest and become frustrated.

    and surely doing all the work for him is not a good thing. i don't condone offering complex professional solutions OPs don't understand, but use them anyway. that is making sure of causing a disaster for him later, when facing changes in a code he cannot handle

    if he has the ability to wonder he'll go further without me pushing him. otherwise, it's like casting pearls before swine (no personal reference or attack here, just a saying).

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I think the most important concepts anyone new to CSS needs to learn is The Cascade, Specificity, and Inheritance.

    When they come to terms with those concepts it will reduce a large amount of redundant code and hopefully eliminate any confusion as to why their elements are picking up styles and where those styles are coming from.

    Yes, it will take a while to learn CSS but lets start with the "C" in CSS.

    if he has the ability to wonder he'll go further without me pushing him. otherwise, it's like casting pearls before swine (no personal reference or attack here, just a saying)
    I learned to swim by being thrown in the water, not by reading about it. Of course there was someone standing there to pull me out if I didn't come up.

    If the OP starts drowning I'll pull them out, but they need to get wet with some cascade and inheritance though. No better time than now to start learning about it. The link above will break the ice.

  16. #16
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is a SP member in Java forum. he has a signature: baby steps... baby steps...
    my point.

    otherwise, you are right. but if you throw at him many new things it will be useless. but if you manage to teach him at least one, you have succeeded.

  17. #17
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ^ I agree that it must be taken in steps.

    I need to correct one of my comments also -
    I would clean some of the longhand css out of there and let the font style cascade inherit from the parent


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
  •