UL & LI Items

HTML & CSS
1

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


<!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&#8217;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>
2

Hi,

It looks fine to me and the right way to do it.:slight_smile: 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.


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 :slight_smile:

3

:lol: 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

Sorry I deleted the html thread as it was a duplicate :slight_smile:

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 :slight_smile:

Hope we answered your question anyway.