Nested List. HELP!! - Webmaster Forum - Web Design, Programming and SEO forums

01-09-2009, 03:52 AM

J.M

Status: I'm new around here
Join date: Jan 2009
Location:
Expertise:
Software:

Posts: 2

iTrader: 0 / 0%

J.M is on a distinguished road

Nested List. HELP!!

Hi all,

I'm trying to accomplish the following with nested list design:

A
B
1 2 3 4
D
E

I have the following code below, but it's not working. Can anyone help? Thanks a million in advance!!

HTML Code:

<html>
<style>
#object ul  {width:100%; padding: 0 0 10px 0; border: solid 0px #000000; list-style:none; }	
#object li {border:solid 0px #000000; width:100%; padding-bottom:10px; float:left; }
#object ul ul {font-weight:bold; border: solid 1px blue; background:#CCFFFF;}
#object ul ul li {display:inline; margin-left:10px;}
</style>
<body>
<div id="object">
<ul>
	<li>A</li>
	<li>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</li>
	<li>B</li>
	<li>C</li>
</ul>
</div>
</body>
</html>

01-09-2009, 09:36 AM

J.M

Status: I'm new around here
Join date: Jan 2009
Location:
Expertise:
Software:

Posts: 2

iTrader: 0 / 0%

J.M is on a distinguished road

ok, solved it.
for those interested.

HTML Code:

<html>
<style>
#object ul  {list-style:none;}	
#object li {}
#object ul ul {}
#object ul li ul li {display:inline; }

#abc ul {}
#abc li {display:inline;}

</style>
<body>
<div id="abc">
		<u>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
</div>

<div id="object">
<ul>
	<li>A</li>
	<li>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</li>
	<li>B</li>
	<li>C</li>
</ul>
</div>
</body>
</html>

01-10-2009, 07:48 AM

Zara

Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:

Posts: 249

iTrader: 9 / 100%

Zara is on a distinguished road

You should work on your html before moving on to css... It's always best to decide which doc type your going to be using and specifying it at the top of your document.

Also, both ol and ul are block-level elements which means you do not need a div container around them unless you need it for additional positioning assistance... When coding xHTML/CSS you often get criticized if you don't do things just right and everyone has their own opinions... To minimize the threat of being criticized you need to learn good habits by coding efficiently with only the required markup, semantically, and when doing it for hire you must work swiftly.

Learn and memorize this URL by heart: http://validator.w3.org/
You'll be using that a lot until you have the routine things memorized.

Anyway, it depends how your using the code but it's probably better practice doing it like so:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #abc li {list-style:lower-alpha}    
            #object li {list-style:upper-alpha}    
            #object li li {list-style:decimal}
        </style>
    </head>
    <body>
        <ol id="abc">
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <ol id="object">
            <li></li>
            <li>
                <ol>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </li>
            <li></li>
            <li></li>
        </ol>
    </body>
</html>