Menu Bar Blues

  • atlnycdude
  • Newbie
  • Newbie
  • atlnycdude
  • Posts: 6

Post 3+ Months Ago

Something is not right and it seems to cause a disaster to the rest of the website that I'm creating. I'm using ul, and li to create my menu and submenu's I have Home | About us | Our Services | Contributions | Contact Us

I would like to the following items for the submenu's

About Us -> Introduction -> Mission Statement

Our Services -> Pre School -> Teen Empowerment

Contact Us -> Newsletter

Here is the code for the site

Code: [ Select ]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Precious Jewels Learning Incorporated - Home</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
</head>

<body>
<div id="wrapper">
 <div id="header"><div id="followus">
  <div id="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" width="37" height="59" alt="contact" /></div>
  
  <div id="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" width="42" height="59" alt="home" /></div>
  
  <div id="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg" width="46" height="59" alt="twitter" /></div>
  
  <div id="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" width="56" height="57" alt="facebook" /></div></div></div>
 
 
 <div id="navigation">
 <ul id="menuOne" class="menuHoriz">
         <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="services.html">Our Services</a></li>
    <li><a href="contributions.html">Contributions</a></li>
    <li><a href="contact.html">Contact Us</a></li>
 </ul>
  <ul id="menuSubTwo" class="menuVert">
         <li><a href="intro.html">Introduction</a></li>
    <li><a href="mission.html">Mission Statement</a></li>
 </ul>
 
  <ul id="menuSubThree" class="menuVert">
         <li><a href="pre.html">Pre School</a></li>
    <li><a href="teen.html">Teen Empowerment</a></li>
 </ul>
 
  <ul id="menuSubFive" class="menuVert">
         <li><a href="newsletter.html">Newsletter</a></li>
 </ul>
 
</div>
 
 <div id="body">
 
 <div id="left" width="315" height="290"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" width="315" height="290" alt="ezekial" /></div>
 <div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" width="372" height="306" alt="pic gallery" /></div>
 <div id="footer"></div>
 </div>

</div>
</body>
</html>
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Precious Jewels Learning Incorporated - Home</title>
  4. <link href="css/layout.css" rel="stylesheet" type="text/css" />
  5. <style type="text/css">
  6. <!--
  7. -->
  8. </style>
  9. </head>
  10. <body>
  11. <div id="wrapper">
  12.  <div id="header"><div id="followus">
  13.   <div id="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" width="37" height="59" alt="contact" /></div>
  14.   
  15.   <div id="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" width="42" height="59" alt="home" /></div>
  16.   
  17.   <div id="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg" width="46" height="59" alt="twitter" /></div>
  18.   
  19.   <div id="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" width="56" height="57" alt="facebook" /></div></div></div>
  20.  
  21.  
  22.  <div id="navigation">
  23.  <ul id="menuOne" class="menuHoriz">
  24.          <li><a href="index.html">Home</a></li>
  25.     <li><a href="about.html">About Us</a></li>
  26.     <li><a href="services.html">Our Services</a></li>
  27.     <li><a href="contributions.html">Contributions</a></li>
  28.     <li><a href="contact.html">Contact Us</a></li>
  29.  </ul>
  30.   <ul id="menuSubTwo" class="menuVert">
  31.          <li><a href="intro.html">Introduction</a></li>
  32.     <li><a href="mission.html">Mission Statement</a></li>
  33.  </ul>
  34.  
  35.   <ul id="menuSubThree" class="menuVert">
  36.          <li><a href="pre.html">Pre School</a></li>
  37.     <li><a href="teen.html">Teen Empowerment</a></li>
  38.  </ul>
  39.  
  40.   <ul id="menuSubFive" class="menuVert">
  41.          <li><a href="newsletter.html">Newsletter</a></li>
  42.  </ul>
  43.  
  44. </div>
  45.  
  46.  <div id="body">
  47.  
  48.  <div id="left" width="315" height="290"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" width="315" height="290" alt="ezekial" /></div>
  49.  <div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" width="372" height="306" alt="pic gallery" /></div>
  50.  <div id="footer"></div>
  51.  </div>
  52. </div>
  53. </body>
  54. </html>


Css


Code: [ Select ]

* {
    margin: 0px;
    padding: 0px;
}
#wrapper {
    width: 814px;
    margin-right: auto;
    margin-left: auto;
}
#wrapper #header {
    background-image: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20header.jpg);
    background-repeat: no-repeat;
    height: 217px;
}

/*Navigation*/

#wrapper #navigation {
    
    position: relative;
    height: 47px;
    width: 817px;
    background-image: url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg);
    background-repeat: no-repeat;
    padding-top: 18px;
    font-size:14pt;
}

#wrapper #navigation ul, #wrapper #navigation li {
   margin: 0;
   padding: 0;
}

#wrapper #navigation ul {
    
    list-style-type: none;
}

#wrapper #navigation li {
    display: block;
    background-color: #ffcd05;
    width: 110px;
    height: 40px;
    margin: 0 3px 0 0;
    padding: 0;
}


#wrapper #navigation a:link, #navigation a:visited {
    font-family: Porky;
    color: #000;
    text-decoration:none;
    
}

#wrapper #navigation a:hover{
    color: #003cbe;
}

#wrapper #navigation a{
    display: block;
    margin: 0;
    padding: 0 3px;
}


ul.menuHoriz li {
    float: left;
}

ul.menuVert li {
    
    position: absolute;
    top: 30px;
}

ul#menuSubTwo ( left: 32px }
ul#menuSubThree ( left: 147px }
ul#menuSubFive ( left: 262px }
/*ul#menuSubTwo ( left: 32px } Future expansion */


/*end of navigation*/

#wrapper #body {
    background-image: url(../images/body/Precious-Jewels-Learning-Incorporated-body.jpg);
    height: 411px;
}
#wrapper #body #left {
    height: 290px;
    width: 315px;
    float: left;
    margin: 0 20px;
    padding: 28px;
}
#wrapper #body #right {
    float: right;
    height: 306px;
    width: 369px;
    margin: 15px;
}
#wrapper #body #footer {
    background-image: url(../images/footer/Precious-Jewels-Learning-Incorporated-footer.jpg);
    height: 100px;
    clear: both;
    font-family: "Arial Black", Gadget, sans-serif;
    color: #FFF;
}
#wrapper #header #followus #facebook, #wrapper #header #followus #twitter, #wrapper #header #followus #home, #wrapper #header #followus #contact {
  height: 57px;
  width: 56px;
  margin: 0 5px;
  padding: 0px;
  float: right;
}

#wrapper #header #followus #contact {
  /* background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20email.jpg) no-repeat;*/
}

#wrapper #header #followus #facebook {
/*  background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20facebook.jpg) no-repeat;*/
}

#wrapper #header #followus #twitter {
  /*background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20twitter.jpg) no-repeat;
*/}

#wrapper #header #followus #home {
  /*background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20home.jpg) no-repeat;*/
}



#wrapper #header #followus {
  margin: 0px;
  padding: 0px;
}
  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  5. #wrapper {
  6.     width: 814px;
  7.     margin-right: auto;
  8.     margin-left: auto;
  9. }
  10. #wrapper #header {
  11.     background-image: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20header.jpg);
  12.     background-repeat: no-repeat;
  13.     height: 217px;
  14. }
  15. /*Navigation*/
  16. #wrapper #navigation {
  17.     
  18.     position: relative;
  19.     height: 47px;
  20.     width: 817px;
  21.     background-image: url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg);
  22.     background-repeat: no-repeat;
  23.     padding-top: 18px;
  24.     font-size:14pt;
  25. }
  26. #wrapper #navigation ul, #wrapper #navigation li {
  27.    margin: 0;
  28.    padding: 0;
  29. }
  30. #wrapper #navigation ul {
  31.     
  32.     list-style-type: none;
  33. }
  34. #wrapper #navigation li {
  35.     display: block;
  36.     background-color: #ffcd05;
  37.     width: 110px;
  38.     height: 40px;
  39.     margin: 0 3px 0 0;
  40.     padding: 0;
  41. }
  42. #wrapper #navigation a:link, #navigation a:visited {
  43.     font-family: Porky;
  44.     color: #000;
  45.     text-decoration:none;
  46.     
  47. }
  48. #wrapper #navigation a:hover{
  49.     color: #003cbe;
  50. }
  51. #wrapper #navigation a{
  52.     display: block;
  53.     margin: 0;
  54.     padding: 0 3px;
  55. }
  56. ul.menuHoriz li {
  57.     float: left;
  58. }
  59. ul.menuVert li {
  60.     
  61.     position: absolute;
  62.     top: 30px;
  63. }
  64. ul#menuSubTwo ( left: 32px }
  65. ul#menuSubThree ( left: 147px }
  66. ul#menuSubFive ( left: 262px }
  67. /*ul#menuSubTwo ( left: 32px } Future expansion */
  68. /*end of navigation*/
  69. #wrapper #body {
  70.     background-image: url(../images/body/Precious-Jewels-Learning-Incorporated-body.jpg);
  71.     height: 411px;
  72. }
  73. #wrapper #body #left {
  74.     height: 290px;
  75.     width: 315px;
  76.     float: left;
  77.     margin: 0 20px;
  78.     padding: 28px;
  79. }
  80. #wrapper #body #right {
  81.     float: right;
  82.     height: 306px;
  83.     width: 369px;
  84.     margin: 15px;
  85. }
  86. #wrapper #body #footer {
  87.     background-image: url(../images/footer/Precious-Jewels-Learning-Incorporated-footer.jpg);
  88.     height: 100px;
  89.     clear: both;
  90.     font-family: "Arial Black", Gadget, sans-serif;
  91.     color: #FFF;
  92. }
  93. #wrapper #header #followus #facebook, #wrapper #header #followus #twitter, #wrapper #header #followus #home, #wrapper #header #followus #contact {
  94.   height: 57px;
  95.   width: 56px;
  96.   margin: 0 5px;
  97.   padding: 0px;
  98.   float: right;
  99. }
  100. #wrapper #header #followus #contact {
  101.   /* background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20email.jpg) no-repeat;*/
  102. }
  103. #wrapper #header #followus #facebook {
  104. /*  background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20facebook.jpg) no-repeat;*/
  105. }
  106. #wrapper #header #followus #twitter {
  107.   /*background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20twitter.jpg) no-repeat;
  108. */}
  109. #wrapper #header #followus #home {
  110.   /*background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20home.jpg) no-repeat;*/
  111. }
  112. #wrapper #header #followus {
  113.   margin: 0px;
  114.   padding: 0px;
  115. }


You're assistance will be greatly appreciated. Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 58 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.