selección intuitiva del menú II

isalavedra · 4 Nov 2008, 18:42 · Solicitar retirada

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 :lol:

-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

isalavedra · 4 Nov 2008, 18:45 · Solicitar retirada

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">
[contenido no disponible]
</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

</div>
<div id="contenido">
<div id="menu">
<ul>

Enlace 1

Enlace 2

Enlace 3
</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...

Raulyure · 4 Nov 2008, 21:53 · Solicitar retirada

isalavedra escribió: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">
[contenido no disponible]
</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

</div>
<div id="contenido">
<div id="menu">
<ul>
Enlace 1
Enlace 2
Enlace 3
</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

Raulyure · 5 Nov 2008, 02:33 · Solicitar retirada

isalavedra escribió: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">
[contenido no disponible]
</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

</div>
<div id="contenido">
<div id="menu">
<ul>
Enlace 1
Enlace 2
Enlace 3
</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">
[contenido no disponible]</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

</div>

<div id="contenido">
<div id="menu">
<ul>

Enlace 1

Enlace 2