SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: UL & LI Items

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    UL & LI Items

    Would someone please look at my CSS code for the list items? Do I really need all the UL & LI selectors. Did I code it with a bit of overkill? It was the only way to get the size right. HELP!
    Thanks in advance
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Karen's Delectable Desserts</title>
    
    <style type="text/css">
    
    #container {
        font-family:Georgia, "Times New Roman", Times, serif;
        background-color: #FFC;
        width: 760px;
        font-size: 0.85em;
        border: thin solid; 
        color: #630;
        margin: auto;
        padding: 20px;
    }
    
    h1 {
        text-align: center;
        }
    
    h2 {
        font-size: 0.85em;    
    }
    
    h1, h2 {
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size: 1.5em;
        font-weight: bold;
        color: #fff;
        background-color:#630;
        padding: 10px;
    }
    
    h2, h3  {
        text-indent: 2em;
        }
        
    p {
    text-align: center;
    }
    
    ul li {
            font-size: 1.25em;
            line-height: 1.5em;
            color:#600;
            }
    ul li ul li{
        font-size: 1em;
    }
    
    ul li ul li ul li {
        font-size: 1em;
        margin-left: 20px;
    }
    
    body {
        background-color:#FFF;
        background-image: url(/images/background.jpg);
        background-repeat:repeat-x;
        }
    
    p {
        font-size: 1.25em;
        line-height: 1.25em;
        color:#630;
        padding: 10px;
        word-spacing: 1em;
    }
    
    
    </style>
    </head>
    
    <body> 
    
    <div id="container">
    
    <h1>Karen's Sweet Table Menu</h1>
    
      
    <p>Karen <em>sweet table menu</em> is a chocolate extravaganza and wonderful dessert display all in one! It's an upscale version of a traditional sweet table, but with a slightly different twist. Karen provides a beautiful and interesting live presentation and prides herself on having a professional service and a product that is unique, aesthetically appealing and, of course, delicious! All Karen’s creations are made using only the finest quality ingredients and premium Belgian chocolate.</p>
       
    <h2>Chocolate Menu</h2>
     
    <h3>We dip the following in milk, dark or white chocolate:</h3>
    
    <ul>
    
    <li>Fresh Seasonal Fruit
        <ul>
               <li>Strawberry</li>
              <li>Banana</li>
               <li>Orange</li>
               <li>Grapes</li>
               <li>Kiwi    </li>
        </ul>
    
            </li>
    <li>Truffles
        <ul>
               <li>Tiramisu</li>
              <li>Bananas Foster</li>
               <li>Black Forest</li>
               <li>Malted Milk</li>
               <li>Lemon Creme    </li>
        </ul> 
              </li>
     </ul>
      
      <h2>Dessert Menu</h2>
    
    <ul>
    <li>Cheesecake
    <ul>
               <li>White Chocolate Oreo </li>
              <li>Caramel Fudge </li>
    
            <li>Fresh Fruits
        <ul>
          <li>Strawberry</li>
          <li>Cherry</li>
          <li>Blueberry</li>
        </ul>
    </li>
          </ul>
    
    </li>
    </ul>
      
    </div>
    
    </body>
    
    </html>
    Last edited by Paul O'B; Apr 3, 2010 at 09:56. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Karen615 View Post
    Would someone please look at my CSS code for the list items? Do I really need all the UL & LI selectors. Did I code it with a bit of overkill? It was the only way to get the size right. HELP!
    Thanks in advance
    Hi,

    It looks fine to me and the right way to do it. If you have nested lists then they must be constructed as you have done so there is no overkill but just the right way to do it.

    You have missed a closing bracket on the h3 but apart from that it looks ok.

    Also you have styled a lot of elements globally:

    e.g.
    Code:
    ul li ul li ....
    That means that all those elements on your site will have to obey that rule which may or may not be what you want but something to be aware of. Usually you would isolate the rules with a class unless it is something you are using everywhere.

    The only other thing I notice is that you don't explicitly set the indent for the bullet and have left it up to the browsers to apply their defaults (which will either be left margin or left padding). If for example you were using a reset then your bullets may not show or would be misplaced because you haven't set them explicitly.

    otherwise looks fine

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Paul, you beat me to it, I was in the midst of a (less helpful) reply when you moved this thread (or deleted the old one in the HTML forum). Great minds think alike, and apparently in the same time frame.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Black Max View Post
    Paul, you beat me to it, I was in the midst of a (less helpful) reply when you moved this thread (or deleted the old one in the HTML forum). Great minds think alike, and apparently in the same time frame.
    Sorry I deleted the html thread as it was a duplicate

    Karen615 - next time just ask an advisor to move the thread (or simply use the report button and ask for it to be moved to the appropriate forum) rather than post duplicate threads otherwise we get the confusion as noted above

    Hope we answered your question anyway.


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
  •