 |
HTML Help Please Search for the answer to your question before asking it! Thanks.
|
| View previous topic :: View next topic |
| Author |
Message |
jkocz9489
Joined: 24 Sep 2008
Posts: 1
|
| Posted: Wed Sep 24, 2008 12:16 pm CSS list type |
|
|
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
|
| Posted: Wed Sep 24, 2008 1:24 pm |
|
|
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> |
|
|
| |
|
|
|
Powered by phpBB Search Engine Indexer
Powered by phpBB 2.0.19 © 2001, 2002 phpBB Group
|