943,777 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Problem with Nesting List
Ad:
Permalink
Mar 20th, 2009
0

Problem with Nesting List

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
Tonkz is offline Offline
25 posts
since Dec 2008
Permalink
Mar 20th, 2009
0

Re: Problem with Nesting List

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.
Reputation Points: 10
Solved Threads: 0
Light Poster
Tonkz is offline Offline
25 posts
since Dec 2008
Permalink
Mar 21st, 2009
0

Re: Problem with Nesting List

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.
Reputation Points: 232
Solved Threads: 137
Practically a Master Poster
buddylee17 is offline Offline
665 posts
since Nov 2007
Permalink
Mar 21st, 2009
0

Re: Problem with Nesting List

Thanks it work ^_^ +rep
Last edited by Tonkz; Mar 21st, 2009 at 1:49 pm.
Reputation Points: 10
Solved Threads: 0
Light Poster
Tonkz is offline Offline
25 posts
since Dec 2008
Permalink
Mar 21st, 2009
0

Re: Problem with Nesting List

errr... now my nav bar is messed up how can I work around it?
Reputation Points: 10
Solved Threads: 0
Light Poster
Tonkz is offline Offline
25 posts
since Dec 2008
Permalink
Mar 21st, 2009
0

Re: Problem with Nesting List

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.
Reputation Points: 232
Solved Threads: 137
Practically a Master Poster
buddylee17 is offline Offline
665 posts
since Nov 2007
Permalink
Mar 21st, 2009
0

Re: Problem with Nesting List

Works like a charm thanks
Reputation Points: 10
Solved Threads: 0
Light Poster
Tonkz is offline Offline
25 posts
since Dec 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: how to get links to request save?
Next Thread in HTML and CSS Forum Timeline: A new css layout based on an image of a layout





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC