Back To Website Design Forum

Menu Bar Blues

  • atlnycdude
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 30, 2008
  • Posts: 6
  • Status: Offline

Post June 7th, 2010, 12:05 pm

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>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Precious Jewels Learning Incorporated - Home</title>
  5. <link href="css/layout.css" rel="stylesheet" type="text/css" />
  6. <style type="text/css">
  7. <!--
  8. -->
  9. </style>
  10. </head>
  12. <body>
  13. <div id="wrapper">
  14.  <div id="header"><div id="followus">
  15.   <div id="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" width="37" height="59" alt="contact" /></div>
  16.   
  17.   <div id="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" width="42" height="59" alt="home" /></div>
  18.   
  19.   <div id="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg" width="46" height="59" alt="twitter" /></div>
  20.   
  21.   <div id="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" width="56" height="57" alt="facebook" /></div></div></div>
  22.  
  23.  
  24.  <div id="navigation">
  25.  <ul id="menuOne" class="menuHoriz">
  26.          <li><a href="index.html">Home</a></li>
  27.     <li><a href="about.html">About Us</a></li>
  28.     <li><a href="services.html">Our Services</a></li>
  29.     <li><a href="contributions.html">Contributions</a></li>
  30.     <li><a href="contact.html">Contact Us</a></li>
  31.  </ul>
  32.   <ul id="menuSubTwo" class="menuVert">
  33.          <li><a href="intro.html">Introduction</a></li>
  34.     <li><a href="mission.html">Mission Statement</a></li>
  35.  </ul>
  36.  
  37.   <ul id="menuSubThree" class="menuVert">
  38.          <li><a href="pre.html">Pre School</a></li>
  39.     <li><a href="teen.html">Teen Empowerment</a></li>
  40.  </ul>
  41.  
  42.   <ul id="menuSubFive" class="menuVert">
  43.          <li><a href="newsletter.html">Newsletter</a></li>
  44.  </ul>
  45.  
  46. </div>
  47.  
  48.  <div id="body">
  49.  
  50.  <div id="left" width="315" height="290"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" width="315" height="290" alt="ezekial" /></div>
  51.  <div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" width="372" height="306" alt="pic gallery" /></div>
  52.  <div id="footer"></div>
  53.  </div>
  55. </div>
  56. </body>
  57. </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;
}
  2. * {
  3.     margin: 0px;
  4.     padding: 0px;
  5. }
  6. #wrapper {
  7.     width: 814px;
  8.     margin-right: auto;
  9.     margin-left: auto;
  10. }
  11. #wrapper #header {
  12.     background-image: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20header.jpg);
  13.     background-repeat: no-repeat;
  14.     height: 217px;
  15. }
  17. /*Navigation*/
  19. #wrapper #navigation {
  20.     
  21.     position: relative;
  22.     height: 47px;
  23.     width: 817px;
  24.     background-image: url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg);
  25.     background-repeat: no-repeat;
  26.     padding-top: 18px;
  27.     font-size:14pt;
  28. }
  30. #wrapper #navigation ul, #wrapper #navigation li {
  31.    margin: 0;
  32.    padding: 0;
  33. }
  35. #wrapper #navigation ul {
  36.     
  37.     list-style-type: none;
  38. }
  40. #wrapper #navigation li {
  41.     display: block;
  42.     background-color: #ffcd05;
  43.     width: 110px;
  44.     height: 40px;
  45.     margin: 0 3px 0 0;
  46.     padding: 0;
  47. }
  50. #wrapper #navigation a:link, #navigation a:visited {
  51.     font-family: Porky;
  52.     color: #000;
  53.     text-decoration:none;
  54.     
  55. }
  57. #wrapper #navigation a:hover{
  58.     color: #003cbe;
  59. }
  61. #wrapper #navigation a{
  62.     display: block;
  63.     margin: 0;
  64.     padding: 0 3px;
  65. }
  68. ul.menuHoriz li {
  69.     float: left;
  70. }
  72. ul.menuVert li {
  73.     
  74.     position: absolute;
  75.     top: 30px;
  76. }
  78. ul#menuSubTwo ( left: 32px }
  79. ul#menuSubThree ( left: 147px }
  80. ul#menuSubFive ( left: 262px }
  81. /*ul#menuSubTwo ( left: 32px } Future expansion */
  84. /*end of navigation*/
  86. #wrapper #body {
  87.     background-image: url(../images/body/Precious-Jewels-Learning-Incorporated-body.jpg);
  88.     height: 411px;
  89. }
  90. #wrapper #body #left {
  91.     height: 290px;
  92.     width: 315px;
  93.     float: left;
  94.     margin: 0 20px;
  95.     padding: 28px;
  96. }
  97. #wrapper #body #right {
  98.     float: right;
  99.     height: 306px;
  100.     width: 369px;
  101.     margin: 15px;
  102. }
  103. #wrapper #body #footer {
  104.     background-image: url(../images/footer/Precious-Jewels-Learning-Incorporated-footer.jpg);
  105.     height: 100px;
  106.     clear: both;
  107.     font-family: "Arial Black", Gadget, sans-serif;
  108.     color: #FFF;
  109. }
  110. #wrapper #header #followus #facebook, #wrapper #header #followus #twitter, #wrapper #header #followus #home, #wrapper #header #followus #contact {
  111.   height: 57px;
  112.   width: 56px;
  113.   margin: 0 5px;
  114.   padding: 0px;
  115.   float: right;
  116. }
  118. #wrapper #header #followus #contact {
  119.   /* background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20email.jpg) no-repeat;*/
  120. }
  122. #wrapper #header #followus #facebook {
  123. /*  background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20facebook.jpg) no-repeat;*/
  124. }
  126. #wrapper #header #followus #twitter {
  127.   /*background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20twitter.jpg) no-repeat;
  128. */}
  130. #wrapper #header #followus #home {
  131.   /*background: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20home.jpg) no-repeat;*/
  132. }
  136. #wrapper #header #followus {
  137.   margin: 0px;
  138.   padding: 0px;
  139. }


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

Post June 7th, 2010, 12:05 pm

Page 1 of 1

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 106 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.