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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post

    Problems With Lists

    Please can anyone please explain to me how lists work?

    I can understand why people have a style for the ul..

    I can understand what li is for...

    So why would anyone write: ul li as well?

    Whenever I do this, the whole list goes wrong. I can only seem to make it work by doing the ul and li seperately. I can't work out what attributes should go into li and which go into ul li because to me, li and ul li represent the same thing. I just don't understand this at all.

    Also - what does 'display:block' mean and why is it used in lists when making menus?

    If I can possibly get to understanding these things, then I should be able to make my own lists without blindly stabbing around in the dark.

    Can anyone please help? Thanks.
    Last edited by Daniel_A_Varney; 07-03-2011 at 06:49 AM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    "ul li" is a directing the "li" tag OF the ul. Similarly in a sequence structure:

    Code:
    <div class="wrap">
     <div id="header"></div>
    </div>
    <div class="below">
     <div id="header"></div>
    </div>
    .wrap #header { } is directed toward the "header" of the "wrap". Changes will not be made to the #header within the "below".

    ---------------

    display: block; will maintain the width of the parent tag. Additionally, you can set a width and height on a "block" tag, whereas on an "inline" tag you cannot.

    Inline tags: a, span, input, img
    Block tags: h1, p, div, fieldset, just about every tag

    Code:
    <div>
     <p></p>
    </div>
    
    <div>
     <a></a>
    </div>
    The p will fill the width of the <div>. however the "inline" "a" will not.

    The <p> tag will fill its parent (which is the body)


    The <a> tag will not.


    You use display: block; for the a tag so that you can set a height and width for it. Therefore, it fills the li. In effect, it has a width and height, http://chris.tpmo.im/miami54stinks/ Therefore, when you hover over the nav on this website, you are hovering over a width and height, not just the text.
    Last edited by Sammy12; 07-03-2011 at 07:07 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    You seem to have sorted my link hover problem out intuitively. That's brilliant - and thank you very much, Sammy!

    I'm still a bit lost on the ul li bit though... Maybe I need to read that over again. Thanks.

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Understanding

    Hello,

    I had the same problem when I first started out with CSS. I could find code to do what i wanted and had a brief knowledge about it but did not know why things worked. Hopefully this helps.

    If you styled a link (Li) in css - all further lists you use will be styled with this same style.

    If you style a link Li in a UL all links in ul's will be styled the same.

    If you style a particular div's ul li then only those links within that div are styled.

    #weblinksmainmenu ul li
    {
    font-family: georgia;
    font-size: 0.8em;
    list-style-image: url('links.png');
    margin-left: 30px;
    padding: 0px;
    text-align: left;
    }
    this styles only my links that are in the weblinksmainmenu div

    Does this help?
    Peter


  •  

    Posting Permissions

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