HTML and CSS RSS HTML and CSS RSS

Problem with Nesting List

Thread Solved

•
•
Join Date: Dec 2008
Posts: 25
Reputation: Tonkz is an unknown quantity at this point 
Solved Threads: 0
Tonkz Tonkz is offline Offline
Light Poster

Problem with Nesting List

 
0
  #1
Mar 20th, 2009
Not sure whats the cause, but the list won't nest properly

/* CSS Document */
css Syntax (Toggle Plain Text) 
  1. * { 
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	}
  5.  
  6. body {
  7. 	background-color:#333333;
  8. 	font-family:Arial, Helvetica, sans-serif;
  9. 	size: 2px;
  10. 	text-align:center;
  11. 	height: 100%;
  12. 	font-size:14px;
  13. 	}
  14.  
  15. div#page-wrap{
  16. 	width: 900px; /* to be change once finish*/
  17. 	height: 650px; /* to be change once finish*/
  18. 	margin: 0 auto; /*margin top to 0 and left to auto*/
  19.  
  20. 	}	
  21.  
  22.  
  23. .Banner{
  24. 	width: 775px;
  25. 	height: 182px;
  26. 	}	
  27.  
  28. #ulcontainer {
  29. 	position:relative;
  30. 	top: 0;
  31. 	left: 62px;
  32. 	}
  33.  
  34. #navcontainer ul{
  35. 	margin: 0;
  36. 	padding: 0;
  37. 	list-style-type: none;
  38. 	}
  39. #Resume {
  40. 	background-color: #d9c3d0;
  41. 	text-align:left;
  42. 	margin-left: 63px;
  43. 	margin-right: 63px;
  44. 	border: 1;
  45. 	padding-left: 20px;
  46. 	padding-top: 30px;
  47.  
  48. }	
  49. #navcontainer li {
  50. 	display:inline;
  51. 	}
  52.  
  53. a:link, a:active, a:visited { 
  54. 	display: block;
  55. 	float:left;
  56. 	padding-bottom: 4px;
  57. 	padding-top: 4px;
  58. 	padding-right: 44px;
  59. 	padding-left: 45px;
  60. 	margin-left: 1px; /*the gap between banner and navigation menu.*/
  61. 	background-color:#000000;
  62. 	color:#FFFFFF;
  63. 	text-decoration: none;
  64. 	}
  65.  
  66. #navcontainer a:hover{
  67. 	background-color:#000000;
  68. 	text-decoration:none;
  69. 	color:#FF66FF;
  70. 	border:groove;
  71. 	border-color:#FF00FF;
  72. 	}
  73. .list {
  74. 	font-weight: bold;
  75.  
  76.  
  77. }

/* Content*/

html Syntax (Toggle Plain Text) 
  1. <body>
  2. <div id="page-wrap">
  3.   	<img src="Images/header.png" alt="Banner" class="Banner" />
  4.     	<div id="ulcontainer">  
  5.    		  <ul id="navcontainer">
  6.         		<li>
  7.             		<a href="Main Page.html">Home</a>
  8.             	</li>
  9.             		<li>
  10.             			<a href="resume.html">Resume</a>
  11.             		</li>
  12.             			<li>
  13.             				<a href="none">Pics</a>
  14.             			</li>
  15.             		<li>
  16.             			<a href="none">Gals</a>
  17.             		</li>
  18.              	<li>
  19.             		<a href="1">Contact Me</a>
  20.             	</li>
  21.        	  </ul>
  22.  		</div>
  23. 	<div id="Resume">
  24.     	     						<h3>Qualifications Summary</h3>
  25.     		<ul>
  26.         		<li>sample sampl sample sample</li>
  27.                 <li>sample sampl sample sample</li>
  28.                 <li>sample sampl sample sample </li>
  29.                 <li>sample sampl sample sample</li>
  30.                 <li>sample sampl sample sample</li>
  31.                 <li>sample sampl sample sample</li>
  32.                 <li><b>sample sampl sample sample</b>
  33.                 	<ul>
  34.                 		<li>sample sampl sample sample</li>
  35.                   		<li>sample sampl sample sample</li>
  36.                     </ul>
  37.                 </li>
  38.     	    </ul>
  39.     </div>
  40. </div>
  41.  
  42. </body>
Last edited by peter_budo; Mar 21st, 2009 at 3:08 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2008
Posts: 25
Reputation: Tonkz is an unknown quantity at this point 
Solved Threads: 0
Tonkz Tonkz is offline Offline
Light Poster

Re: Problem with Nesting List

 
0
  #2
Mar 20th, 2009
Nobody has an idea what the answer is?
//This code should be nested, but it doesn't work
html Syntax (Toggle Plain Text) 
  1. <ul>
  2. <li>sample sampl sample sample</li>
  3. <li>sample sampl sample sample</li>
  4. <li>sample sampl sample sample</li>
  5. <li>sample sampl sample sample</li>
  6. <li>sample sampl sample sample</li>
  7. <li>sample sampl sample sample</li>
  8. <li><b>sample sampl sample sample</b>
  9. <ul>
  10. <li>sample sampl sample sample</li>
  11. <li>sample sampl sample sample</li>
  12. </ul>
  13. </li>
  14. </ul>
//Output should be like this
  • Data Here
  • Data Here
  • Data Here
  • Data Here
  • Data Here
  • Data Here
  • Data Here
    • Indented Data
    • Indented Data

//but instead I got is like this:
  • Data Here
  • Data Here
  • Data Here
  • Data Here
  • Data Here
  • Data Here
  • Data Here
  • Indented Data
  • Indented Data

Anyone know the solution to my problem?
Last edited by peter_budo; Mar 21st, 2009 at 3:09 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 596
Reputation: buddylee17 has a spectacular aura about buddylee17 has a spectacular aura about 
Solved Threads: 125
buddylee17's Avatar
buddylee17 buddylee17 is offline Offline
Posting Pro

Re: Problem with Nesting List

 
0
  #3
Mar 21st, 2009
Your code is correct. The problem is the * in the css. Particularly the padding. With
css Syntax (Toggle Plain Text) 
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
you've reset the padding of all elements to 0. By default, the browser adds padding-left to the second list. However, you've reset the padding to 0, so the list doesn't get the padding. Delete padding:0; from the * element css and you'll see your list get padded properly.
Lost time is never found again.
- Benjamin Franklin
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2008
Posts: 25
Reputation: Tonkz is an unknown quantity at this point 
Solved Threads: 0
Tonkz Tonkz is offline Offline
Light Poster

Re: Problem with Nesting List

 
0
  #4
Mar 21st, 2009
Thanks it work ^_^ +rep
Last edited by Tonkz; Mar 21st, 2009 at 1:49 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2008
Posts: 25
Reputation: Tonkz is an unknown quantity at this point 
Solved Threads: 0
Tonkz Tonkz is offline Offline
Light Poster

Re: Problem with Nesting List

 
0
  #5
Mar 21st, 2009
errr... now my nav bar is messed up how can I work around it?
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 596
Reputation: buddylee17 has a spectacular aura about buddylee17 has a spectacular aura about 
Solved Threads: 125
buddylee17's Avatar
buddylee17 buddylee17 is offline Offline
Posting Pro

Re: Problem with Nesting List

 
0
  #6
Mar 21st, 2009
Change your css back to what you had before and then add this:
css Syntax (Toggle Plain Text) 
  1. ul ul{
  2. padding-left:20px
  3. }
Adjust the padding to your needs.
Last edited by buddylee17; Mar 21st, 2009 at 5:02 pm.
Lost time is never found again.
- Benjamin Franklin
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2008
Posts: 25
Reputation: Tonkz is an unknown quantity at this point 
Solved Threads: 0
Tonkz Tonkz is offline Offline
Light Poster

Re: Problem with Nesting List

 
0
  #7
Mar 21st, 2009
Works like a charm thanks
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC