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 9 of 9

Thread: Unordered list

  1. #1
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts

    Unordered list

    I have an unordered list as with my links in it how do i make the line spacing for each link to have a little more

    this is what i have at the moment

    Code:
    #nav li 		{			list-style: none;
    						display: inline;
    				}
    				
    #nav ul li		{			line-height: 100em;
    				}
    #nav being the div that the list is in.

    Thanks
    .pLeAd InSaNiTy.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    If I understand you, add padding to the a tag.
    Teed

  • #3
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    i want to add some space between each link.

    Link1
    Link2
    Link3
    Link4

    I want more spacing between each of the links as they look really cramped
    .pLeAd InSaNiTy.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Then add some padding to the <li> tag.
    Teed

  • #5
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    #nav li { list-style: none;
    display: inline;
    padding-top:10px;
    }

    doesn't do anything
    .pLeAd InSaNiTy.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Do you want vertical or horizontal navigation???

  • #7
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    vertical.
    .pLeAd InSaNiTy.

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #nav ul li {
    	padding-bottom: 25px;
    }
    </style>
    </head>
    
    <body>
    <div id="nav">
                <ul>
                  <li><a href="index.html" target="_blank" title="Chieftain Clothimg Home" ></a>Home</li>
                  <li><a href="inspiration.html" title="Chieftain Clothing Inspiration page" target="_blank"></a>Inspiration</li>
                  <li><a href="shop.html" title="Chieftain Clothing Shop page" target="_blank"></a>Shop</li>
                  <li><a href="contact.html" title="Chieftain Clothimg contact page" target="_blank"></a>Contact</li>
                  <li><a href="team.html" title="Chieftain Clothimg Team page" target="_blank"></a>Out Team</li>
                  <li><a href="http://chieftainclothing.com/blog" title="Chieftain Clothimg Blog page" target="_blank"></a>Blog</li>
                </ul>
    </div>
    </body>
    </html>
    Again, very simple. Add padding to the list tag.
    Teed

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You can use line-height property also..


  •  

    Posting Permissions

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