HTML Help

jkocz9489 · Joined: 24 Sep 2008 Posts: 1

http://www.htmlcodetutorial.com/_UL_TYPE.html

Supposed to show how you can change the bullets on ul and li but the example does not match what the code says.

Is something wrong with the code, or just the page?

I am having troubles with getting a nested list to have a different bullet than the outer list, and thats why I came here for help. But I see the example doesnt even work. Any suggestions would be appreciated.

As metntioned, I need to have a nested list with the outer list using a square as the bullet and the inner list using a circle as the bullet. I can get the inner list to cooperate, but not the outer list.

I am using an internal CSS sheet.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

That's an old tutorial. List will have to have some padding applied to display the type correctly.
Code: <ul style="list-style:square; padding-left:20px;">
<li>coffee</li>
<li>tea</li>
<li>lemonade
<ul style="list-style:circle; padding-left:20px;">
<li>coffee</li>
   <li>tea</li>
   <li>lemonade</li>
</ul>
</li>
</ul>
or using an external style sheet
Code: .menu {list-style:square; padding-left:20px;}
.menu ul {list-style:circle; padding-left:20px;}
Code: <ul class="menu">
<li>coffee</li>
<li>tea</li>
<li>lemonade
<ul>
<li>coffee</li>
   <li>tea</li>
   <li>lemonade</li>
</ul>
</li>
</ul>
and if it is in a container
Code: .menu {list-style:square; padding-left:10px;}
.menu ul {list-style:circle; padding-left:20px;}
#nav {
width: 200px;
border: 1px solid #000;
padding: 10px;
}
Code: <div id="nav">
<ul class="menu">
<li>coffee</li>
<li>tea</li>
<li>lemonade
<ul>
<li>coffee</li>
   <li>tea</li>
   <li>lemonade</li>
</ul>
</li>
</ul>
</div>