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

Tema: selección intuitiva del menú II

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    22 jul, 08
    Ubicación
    Girona
    Mensajes
    59
    Poder de Reputación
    18

    selección intuitiva del menú II

    Hola Yaneth y Raulyure!!!

    He creado un nuevo tema porque el otro quedaba ya demasiado largo...

    Os he hecho caso y sí he notado cambios que me han ilusionado y que creo comienzan a indicar cual es el problema, pero a mi la solución me queda demasiado lejos. Por ello trataré de descriviros los cambios que he comprovado y, trataré de ser claro y conciso:

    -Las opciones del menú lateral ya cambian de color y aparece el fondo gris que se alarga a lo ancho de la línea cuando el cursor se halla encima de ellas. Esto sólo ya me llena de infinitas esperanzas

    -Y (creo que esto os puede indicar por fin cual debe ser el problema de fondo) persiste el problema de que el pasar el cursor encima de la línea de la palabra del menú lateral sin tocarla -a la palabra- esta no se selecciona. Es decir: línea y palabra siguen sin estar relacionadas a fines de selección del menú lateral.
    Pero ahora, y esto es lo novedoso, cuando coloco el cursor encima del fondo amarillo del menú lateral, cambian de color (quedan marcados como "seleccionados") el logotipo, la publicidad y el menú horizontal...

    Creo que todo ello es significativo y señala qué tipo de orden debe ser erronea... Pero claro, para mi es como tocar el dedo de un paciente y que este estornude... No sé dónde está la relación :?

    En el siguiente mensaje os mando todos los códigos, y a más crítica mejor!!!!!! :P
    Un abrazo muy fuerte!

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    22 jul, 08
    Ubicación
    Girona
    Mensajes
    59
    Poder de Reputación
    18

    codigos

    CODIGOS DE LA plantilla.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">
    <a href="index.html">
    [img]objetos/logotipo.gif[/img]
    </div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>
    <div id="navegacion">
    <ul>[*]Sección 1[*]Sección 2[*]Sección 3[*]Sección 4[/list]
    </div>
    <div id="contenido">
    <div id="menu">
    <ul>[*]Enlace 1[*]Enlace 2[*]Enlace 3[/list]
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    CODIGOS DEL estilo-general.css

    * {text-indent:0 px ; margin:0px ; padding:0px ; border: 0px}
    p { text-align: justify }
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    body { text-align: center }
    #global {width:800px ; margin: 4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow : hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px}
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left}
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p{padding: 5px 10px 5px 10px ; text-indent: 15 px }
    #menu {background-color: yellow; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px }
    #menu li {list-style: none ; margin: 4px 0px 4px 6px }
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }

    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px
    overflow: hidden }

    a{color: brown ; text-decoration: none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color: red ; text-decoration: underline ; background-color: silver }
    a:active {}


    A ver si les puedo ayudar más...
    Un abrazo muy fuerte!

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicación
    Estella-Spain
    Mensajes
    2,247
    Poder de Reputación
    30

    Re: codigos

    Cita Iniciado por isalavedra
    CODIGOS DE LA plantilla.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">
    <a href="index.html">
    [img]objetos/logotipo.gif[/img]
    </div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>
    <div id="navegacion">
    <ul>[*]Sección 1[*]Sección 2[*]Sección 3[*]Sección 4[/list]
    </div>
    <div id="contenido">
    <div id="menu">
    <ul>[*]Enlace 1[*]Enlace 2[*]Enlace 3[/list]
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    CODIGOS DEL estilo-general.css

    * {text-indent:0 px ; margin:0px ; padding:0px ; border: 0px}
    p { text-align: justify }
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    body { text-align: center }
    #global {width:800px ; margin: 4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow : hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px}
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left}
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p{padding: 5px 10px 5px 10px ; text-indent: 15 px }
    #menu {background-color: yellow; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px }
    #menu li {list-style: none ; margin: 4px 0px 4px 6px }
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }

    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px
    overflow: hidden }

    a{color: brown ; text-decoration: none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color: red ; text-decoration: underline ; background-color: silver }
    a:active {}


    A ver si les puedo ayudar más...
    Hola:
    Veremos si vamos arreglando esto de a poco (con la ayuda de todos)
    Si usted ha copiado y pegado los códigos de su hoja de estilo acá en el mensaje, significa que estos son exactamente lo que tiene en su hoja de estilos, asi que partiendo de esa premisa le diré que en la capa navegación, usted tiene por ahora una lista que por el momento no son enlaces, solo es una lista. Pues las listas tienen algo que suelen llevar por defecto, que se llaman viñetas, que suelen ir a la izquierda, es como si crearan un alargamiento de la capa hacia la izquierda, entonces lo que habría que hacer por el momento sería poner donde dice en la hoja de estilo
    #navegacion li{float:left} agregarle un list_style:none, o sea que le quede así:
    #navegacion li{float:left;list-style:none}
    Con eso lo que sucede es que se le quitan los puntos que suelen llevar las listas, los que se aparecen a la izquierda.

    Luego he visto, si no me equivoco, donde usted tiene la curva inferior, (siempre en su hoja de estilo) que le falta un punto y coma para separar las propiedades del alto de la capa, o sea el height:12px de la propiedad overflow:hidden.
    Esa parte debiera de quedarle así:
    #curva-inferior{etc. etc. etc. ; height:12px;overflow:hidden }

    Luego seguiremos viendo algún detalle mas
    Saludos
    Agradecido de los que aprenden enseñando

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicación
    Estella-Spain
    Mensajes
    2,247
    Poder de Reputación
    30

    Re: codigos

    Cita Iniciado por isalavedra
    CODIGOS DE LA plantilla.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">
    <a href="index.html">
    [img]objetos/logotipo.gif[/img]
    </div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>
    <div id="navegacion">
    <ul>[*]Sección 1[*]Sección 2[*]Sección 3[*]Sección 4[/list]
    </div>
    <div id="contenido">
    <div id="menu">
    <ul>[*]Enlace 1[*]Enlace 2[*]Enlace 3[/list]
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    CODIGOS DEL estilo-general.css

    * {text-indent:0 px ; margin:0px ; padding:0px ; border: 0px}
    p { text-align: justify }
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    body { text-align: center }
    #global {width:800px ; margin: 4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow : hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px}
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left}
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p{padding: 5px 10px 5px 10px ; text-indent: 15 px }
    #menu {background-color: yellow; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px }
    #menu li {list-style: none ; margin: 4px 0px 4px 6px }
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }

    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px
    overflow: hidden }

    a{color: brown ; text-decoration: none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color: red ; text-decoration: underline ; background-color: silver }
    a:active {}


    A ver si les puedo ayudar más...
    Hola: Bueno, espero que después de esto tenga muchos menos problemas y pueda avanzar, aunque no se si ya arregló el problema, pero le daré alguna idea.
    Así mas o menos quedaría su hoja de estilo:

    * {text-indent:0px;margin:0px;padding:0px;border:0px}
    p {text-align:justify}
    h1 {font-size:1.2em;color:blue;font-weight:bold;text-decoration:underline;text-align:center;}
    h2 {font.size:1.1em;color:blue;font-weight:bold;text-decoration:none;text-align:center;}
    img{border-style:none}
    body{text-align:center;font-family:Arial, verdana, helvetica, serif, sans-serif;}
    #global{width:800px;margin:4px auto;}

    #curva-superior{background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden;}
    #cabecera{background-color:white;border-left:black 1px solid;border-right:black 1px solid;height:85px;}
    #logotipo{width:280px;float:left}
    #publicidad{width:518px;float:left;margin-top:25px;font-size:16px;}
    #navegacion{background-color:gray;border:black 1px solid;height:20px;}
    #navegacion ul{margin-left:180px;}
    #navegacion li {float:left;list-style:none;margin:0px 20px 0px 20px;}

    #contenido {width:auto;background-color:orange;border-left:black 1px solid;border-right:black 1px solid;}
    #contenido p{padding:5px 10px 5px 10px;text-indent:15px}
    #menu {background-color:yellow;width:150px;float:left;text-align:left;margin:3px 10px 3px 3px}
    #menu li {list-style:none;margin:4px 8px 4px 6px}
    #pie{background-color:white;border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;}

    #curva-inferior{background-image:url(objetos/curva-inferior.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden }

    a{color:brown;text-decoration:none;display:block}
    a:link {}
    a:visited {}
    a:hover {color:red;text-decoration:underline;background-color:silver}
    a:active {}
    #logotipo a{}
    #logotipo a:link{}
    #logotipo a:visited{}
    #logotipo a:hover{background-color:white;}
    #logotipo a:active{}

    Y su página , quedaría de esta manera:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>

    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
    </head>

    <body>
    <div id="global">
    <div id="curva-superior"></div>

    <div id="cabecera">
    <div id="logotipo">
    [img]objetos/logo.gif[/img]</div>

    <div id="publicidad">Bienvenidos a mi Web.</div>
    </div>

    <div id="navegacion">
    <ul>[*]Sección 1[*]Sección 2[*]Sección 3[*]Sección 4[/list]
    </div>

    <div id="contenido">
    <div id="menu">
    <ul>[*]Enlace 1[*]Enlace 2[*]Enlace 3[/list]</div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>

    <div id="pie">Este es el pie de pagina</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    Espero que le sirva
    Saludos
    Ah, el porqué de que se le convertía todo como si fuera un enlace general era porque a el enlace del logotipo no lo había cerrado con la </a>, solo lo había abierto.
    Saludos otra vez
    Agradecido de los que aprenden enseñando

Temas Similares

  1. Seleccion de INDEX en hosting
    Por JOSE JUAREZ DEXTRE en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 12/01/2009, 12:26
  2. seleccion intuitiva del menu
    Por isalavedra en el foro Todo sobre Estilos CSS
    Respuestas: 3
    Último Mensaje: 05/11/2008, 01:39

Permisos de Publicación

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