Retour à Forum de site web

Menu Bar Blues

  • atlnycdude
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Déc 30, 2008
  • Messages: 6
  • Status: Offline

Message Juin 7th, 2010, 12:05 pm

Quelque chose n'est pas juste et il semble provoquer une catastrophe pour le reste du site Web qui Im création. Im en utilisant ul et li pour créer mon menu et sous-menus J'ai Accueil | A propos de nous | Nos services Contributions | | Contactez-nous

Je tiens à les items suivants pour les sous-menus

A propos de nous -> Introduction - Énoncé de mission>

Nos Services -> pré-scolaire -> Empowerment Teen

Contactez-nous -> Lettre d'information

Voici le code pour le 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. }


Youre assistance sera grandement appréciée. Merci!
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 7th, 2010, 12:05 pm

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 1 message
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 66 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC