Retour à Forum de site web

Une aide s'il vous plaît

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

Message Juin 16th, 2010, 11:49 am

Hey chambre. Vous avez une question rapide que je voudrais l'avoir résolu bientôt. J'ai créé une navigation à l'aide ul, li tags et css. J'ai créé l'arrière-plan de navigation à l'aide de Photoshop à l'aide | ig pour chaque onglet. Accueil, A propos de nous etc je voudrais pour chaque bloc sur la ligne horizontale pour s'adapter à chacun des "|" de l'IMG. Je veux qu'il en plein milieu, y compris le texte. Voici le code:


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" />
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <div id="followus">
                <a class="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" alt="Facebook Page" /></a>
                <a class="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg" alt="Twitter Page" /></a>
                <a class="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" alt="Home" /></a>
                <a class="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" alt="email" /></a>
            </div><!-- end "followus" DIV-->
        </div><!-- end "header" DIV-->

        <div id="navigation">
    <p id="menuHome">
    </p>
    <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="mission.html">Mission Statement</a></li>        
   </ul>
    
    <ul id="menuSubThree" class="menuVert">
        <li><a href="preschool.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><!-- end "navigation" DIV-->

     <div id="main">
            <div id="left"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" alt="ezekial" /></div>
            <div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" alt="pic gallery" />
        </div><!-- end "main" DIV-->
        <div style="clear: both;">
            &nbsp;
        </div><!-- end "clear" DIV-->
    </div><!-- end "wrapper" DIV-->
        <div id="footer">
        </div><!-- end "footer" DIV-->
</div>
</body>
</html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Precious Jewels Learning Incorporated - Home</title>
  6. <link href="css/layout.css" rel="stylesheet" type="text/css" />
  7. </head>
  9. <body>
  10.     <div id="wrapper">
  11.         <div id="header">
  12.             <div id="followus">
  13.                 <a class="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" alt="Facebook Page" /></a>
  14.                 <a class="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg" alt="Twitter Page" /></a>
  15.                 <a class="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" alt="Home" /></a>
  16.                 <a class="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" alt="email" /></a>
  17.             </div><!-- end "followus" DIV-->
  18.         </div><!-- end "header" DIV-->
  20.         <div id="navigation">
  21.     <p id="menuHome">
  22.     </p>
  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.     
  31.     <ul id="menuSubTwo" class="menuVert">
  32.         <li><a href="mission.html">Mission Statement</a></li>        
  33.    </ul>
  34.     
  35.     <ul id="menuSubThree" class="menuVert">
  36.         <li><a href="preschool.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.     
  45.     </div><!-- end "navigation" DIV-->
  47.      <div id="main">
  48.             <div id="left"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" alt="ezekial" /></div>
  49.             <div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" alt="pic gallery" />
  50.         </div><!-- end "main" DIV-->
  51.         <div style="clear: both;">
  52.             &nbsp;
  53.         </div><!-- end "clear" DIV-->
  54.     </div><!-- end "wrapper" DIV-->
  55.         <div id="footer">
  56.         </div><!-- end "footer" DIV-->
  57. </div>
  58. </body>
  59. </html>


Code: [ Select ]

p#menuHome{ float: left; } #navigation { position:relative; background-color: #333; background-image: url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg); background-repeat: no-repeat; width: 820px; height: 47px; font-size: 14pt; } #navigation a:link, #navigation a:visited { font-family: Arial, Helvetica, sans-serif; color: white; text-decoration: none; } #navigation a:hover { color: #03C; } #navigation ul, #navigation li { margin:0; padding:0; } #navigation ul { list-style-type: none; } ul.menuHoriz li { float: left; } ul.menuVert { position: absolute; top: 24px; } #navigation li { display: block; background-color:#FF0; width: 130px; height: 25px; margin: 0 3px 0 0; padding: 0; } ul#menuSubTwo { left: 133px } ul#menuSubThree { left: 266px } ul#menuSubFive { left: 532px }
  2. p#menuHome{ float: left; } #navigation { position:relative; background-color: #333; background-image: url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg); background-repeat: no-repeat; width: 820px; height: 47px; font-size: 14pt; } #navigation a:link, #navigation a:visited { font-family: Arial, Helvetica, sans-serif; color: white; text-decoration: none; } #navigation a:hover { color: #03C; } #navigation ul, #navigation li { margin:0; padding:0; } #navigation ul { list-style-type: none; } ul.menuHoriz li { float: left; } ul.menuVert { position: absolute; top: 24px; } #navigation li { display: block; background-color:#FF0; width: 130px; height: 25px; margin: 0 3px 0 0; padding: 0; } ul#menuSubTwo { left: 133px } ul#menuSubThree { left: 266px } ul#menuSubFive { left: 532px }


Capture d'écran du site est fourni depuis des liens annonce n'est pas autorisée ici.

Se contenter de laisser tout le monde sait que les sous-menus ne fonctionnent pas encore, mais je tiens à résoudre ce premier problème avant de passer à l'étape suivante. Merci d'avance.
Attachments:
screen shot.JPG
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 16th, 2010, 11:49 am

  • amogs
  • Born
  • Born
  • No Avatar
  • Inscription: Oct 04, 2009
  • Messages: 3
  • Status: Offline

Message Juin 28th, 2010, 5:25 pm

Pourquoi ne pas appeler directement l'image en utilisant le CSS?
Moderator Remark: removed spam

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 2 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 120 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