Volver al Foro de Diseño de páginas Web

Parte de la asistencia por favor

  • atlnycdude
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Dic 30, 2008
  • Mensajes: 6
  • Status: Offline

Nota Junio 16th, 2010, 11:49 am

Hey habitación. ¿Tienes un problema de rápida que me gustaría tenerlo solucionado en breve. He creado una navegación con etiquetas ul, li y css. He creado el fondo de navegación mediante el uso photoshop | ig para cada ficha. Inicio Quiénes somos etc Me gustaría que cada bloque en la línea horizontal para que quepan en cada uno de los "|" de la img. Quiero que justo en el medio incluido el texto. Aquí está el código:


Código: [ 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>


Código: [ 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 }


Captura de pantalla de la página se proporciona porque el vínculo anuncio no está permitido aquí.

Dejar simplemente que todos saben que los submenús aún no están trabajando, pero me gustaría resolver este problema primero antes de proceder al siguiente paso. Gracias de antemano.
Attachments:
screen shot.JPG
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Junio 16th, 2010, 11:49 am

  • amogs
  • Born
  • Born
  • No Avatar
  • Registrado: Oct 04, 2009
  • Mensajes: 3
  • Status: Offline

Nota Junio 28th, 2010, 5:25 pm

¿Por qué no llamar a la imagen directamente usando css?
Moderator Remark: removed spam

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 2 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 123 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC