Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 7 de 7

Tema: Ayuda con Web con divs!!

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    15 ene, 13
    Mensajes
    34
    Poder de Reputación
    13

    Ayuda con Web con divs!!

    Buenas!! Comencé mi proyecto de nuevo desde cero, y quiero saber si plantee bien el código html y el css hasta el momento, sobre todo me interesa saber si el código html para el menú es el correcto o no, mas precisamente lo que me interesa saber es si los submenus están bien planteados, para que quede convertido en un menú desplegable horizontal.


    Codigo html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Arte Grafico</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all">

    </head>

    <body>

    <div id="global">
    <!--Comienzo Cabecera-->

    <div id="cabecera">

    <div id="logo"><img src="Objetos/cabecera/Logo-Arte-Grafico2.gif" width="452" height="195"/> </div>

    </div>

    <!--Fin cabecera-->

    <!--Comienzo barra menu-->
    <div id="navegacion">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Servicios</a>
    <ul>
    <li><a href="#">Diseño Gráfico</a></li>
    <li><a href="#">Desarrollo Web</a></li>
    <li><a href="#">Imprenta</a></li>
    </ul>
    </li>
    <li><a href="#">Tu Logo</a></li>
    <li><a href="#">Sublimación y Estampado</a></li>
    <li><a href="#">Ploteo en Vinilo</a></li>
    <li><a href="#">Clientes</a></li>
    <li><a href="#">Contacto</a></li>
    </ul>
    </div>

    <!--Contenido de la web-->
    <div id="contenido"> zona principal de web</div>

    <!--Comienzo pie de pagina-->
    <div id="pie"> pie de pagina</div>

    </div>
    </body>
    </html>


    Codigo CSS:

    @charset "utf-8";
    /* CSS Document */

    body{
    text-aling:center;
    background-image:url(Objetos/fondo.png);
    color:#000;
    background-repeat:no-repeat;
    margin:0px;
    height:1000px; width:900px;}

    #logo{aling: left;}

    #navegacion{
    background-color:#333;
    filter: alpha(opacity=40); opacity:0.4;
    width:1348px; height:70px; }


    #contenido{}

    #pie{}

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    15 ene, 13
    Mensajes
    34
    Poder de Reputación
    13
    Mi consulta es: como hago para que las opciones de menú queden horizontalmente y que las opciones del submenu, queden debajo de "servicios" y se desplieguen cuando pase el mouse sobre servicios?

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    15 ene, 13
    Mensajes
    34
    Poder de Reputación
    13
    Nadie puede ayudarme a saber que pasos seguir para realizar mi menu de manera horizontal?

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicación
    Austria
    Mensajes
    402
    Poder de Reputación
    18
    A ver, no has definido nada para :hover en el CSS. Sin eso, mal podrá desplegarse nada cuando pase el cursor por encima, ni aunque baile un zapateado

    La clave de los menús desplegables es sencilla, "display: none" por defecto, y cuando :hover "display: block"

    Busca menús desplegables en Google, aquí tienes un ejemplo: http://line25.com/tutorials/how-to-c...-dropdown-menu

    Un saludo.
    Última edición por Lombardo; 25/01/2013 a las 17:18

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    15 ene, 13
    Mensajes
    34
    Poder de Reputación
    13
    Gracias por la ayuda Lombardo, logre acomodar el menú y hacerlo desplegable, lo que me falta es saber como hacer para que los submenus se desplieguen en vertical y no en horizontal como me aparecen ahora! Podrían ayudarme a saber como modificarlo?

    Dejo el código CSS tal como me quedo:

    @charset "utf-8";
    /* CSS Document */

    body{
    text-aling:center;
    background-image:url(Objetos/fondo.png);
    color:#000;
    background-repeat:no-repeat;
    margin:0px;
    height:1000px; width:900px;}

    #logo{aling: left;}

    #navegacion{background-color:#333;
    filter: alpha(opacity=40); opacity:0.4;
    width:1348px; height:70px; font-family:Amethyst, Tunga, Toledo; font-size: 1.4Em; }

    #navegacion li { float: left ;
    margin: 20px 0px 0px 25px;
    border-right: solid 3px; color:white; padding-right: 30px;
    list-style:none; }

    #navegacion li ul { display: block ;
    visibility: hidden;
    position: absolute ;
    left: 8px; }

    #navegacion li:hover ul { visibility: visible;}

    a{color:#FFF;}

    a:link {color:#FFF}

    a:hover {color:#FF3; }

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    15 ene, 13
    Mensajes
    34
    Poder de Reputación
    13
    Alguien podría ayudarme a saber como hacer que los submenus al desplegarse queden en vertical y no en horizontal como me queda ahora? arriba de este mensaje esta mi hoja de estilo.
    Please ayuda!! Es lo único que me falta para dejar listo el menú!!

  7. #7
    Recien Llegado! Habitual
    Fecha de Ingreso
    08 nov, 17
    Mensajes
    14
    Poder de Reputación
    6
    Creo que si ves como se ha implementado el css en esta página te vas a hacer una idea de las opciones de diseño que tiene el html5.

Temas Similares

  1. Ayuda con los DIVs
    Por AlbertoXt en el foro Webs con Capas o DIVS
    Respuestas: 10
    Último Mensaje: 15/04/2007, 14:11
  2. Ayuda con divs
    Por seyko en el foro Webs con Capas o DIVS
    Respuestas: 4
    Último Mensaje: 02/04/2007, 14:24
  3. Ayuda con los DIVs
    Por r2d2art2000 en el foro Foro General
    Respuestas: 2
    Último Mensaje: 18/04/2006, 02:38

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •