Clase 2 Estilos para listas

Rafael Fernandez · 1 Jun 2008, 21:54 · Solicitar retirada

Buenas tardes: Siguiendo lo pasos estricamente al pie de la clase en la parte "reparando el fallo del menu" coloque 800px como se indica pero la zona naranja no me llega al final del margen derecho de la pagina. Probando medidas de pixeles tuve que poner 1050px para que coincidiera perfectamente hasta el final. Solo lo menciono porque solicitan si se ven fallos los comuniquemos, espero seguir correctamente.
Me parece genial los comentarios adicionales que agregan, lo hacen muy ameno, gracias

Raulyure · 2 Jun 2008, 01:17 · Solicitar retirada

Rafael Fernandez escribió:Buenas tardes: Siguiendo lo pasos estricamente al pie de la clase en la parte "reparando el fallo del menu" coloque 800px como se indica pero la zona naranja no me llega al final del margen derecho de la pagina. Probando medidas de pixeles tuve que poner 1050px para que coincidiera perfectamente hasta el final. Solo lo menciono porque solicitan si se ven fallos los comuniquemos, espero seguir correctamente.
Me parece genial los comentarios adicionales que agregan, lo hacen muy ameno, gracias

Hola:
Podría probar quitándo ese ancho que le ha puesto y dejarlo así por mientras "width:auto;float:left;. O poner ese width en 800 y quitar el float left, pero sería estar adivinándo
Así que lo mas recomendable si usted pudiese pegar en su mensaje lo que lleva hasta ahora, tanto en la página como en la hoja de estilo, para que lo veamos mejor. y así arreglarlo.
Saludos

Rafael Fernandez · 2 Jun 2008, 02:37 · Solicitar retirada

Hola:
Mejor me dejo guiar por uds. y aqui les mando lo que he hecho hasta ahora incluyendo la variacion que hice, de la ultima respuesta no he intentado nada puesto que es cierto que debi antes mandar el desarrollo de lo que hice, pero aqui va:
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 ="global">
<div id="cabecera">Bienvenidos a mi pagina Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido"><div id="menu">
<ul>

<a href="#">Enlace 1

<a href="#">Enlace 2

<a href="#">Enlace 3

</div>Esta sera la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
</div>

</body>
</html>

y la hoja de estilo-general css:

* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: brown; text-decoration: none; display: block }
a: link {}
a: visited {}
a: hover {color: red; text-decorate: underline}
a: active {}
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange; width: 1080px ; float:left }

#menu {background-color: yellow; width: 150px ; float:left ; text-align:left }
#menu li { list-style:none; margin: 4px 0px 4px 6px}

#pie {background-color: brown}

Estoy muy agradecido por la ayuda y la paciencia que tienen, saludos :wink:

Raulyure · 2 Jun 2008, 04:23 · Solicitar retirada

Rafael Fernandez escribió:Hola:
Mejor me dejo guiar por uds. y aqui les mando lo que he hecho hasta ahora incluyendo la variacion que hice, de la ultima respuesta no he intentado nada puesto que es cierto que debi antes mandar el desarrollo de lo que hice, pero aqui va:
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 ="global">
<div id="cabecera">Bienvenidos a mi pagina Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido"><div id="menu">
<ul>
<a href="#">Enlace 1
<a href="#">Enlace 2
<a href="#">Enlace 3

</div>Esta sera la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
</div>

</body>
</html>

y la hoja de estilo-general css:

* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: brown; text-decoration: none; display: block }
a: link {}
a: visited {}
a: hover {color: red; text-decorate: underline}
a: active {}
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange; width: 1080px ; float:left }

#menu {background-color: yellow; width: 150px ; float:left ; text-align:left }
#menu li { list-style:none; margin: 4px 0px 4px 6px}

#pie {background-color: brown}

Estoy muy agradecido por la ayuda y la paciencia que tienen, saludos :wink:

Hola:
En la lista del menu usted tiene puesto los enlaces de esta manera:

<a href="#">Enlace 1
Creo que debiera de tenerlos así:

Enlace 1
A los tres les falta ese cierre de </a>
Después que arregle eso veremos como queda
Saludos
Y le sugiero que vuelva a poner las medidad como dice el curso , con el width 800 y en la hoja de estilo donde tiene el hover debe decir decoration, creo que usted tiene puesto decorate

Rafael Fernandez · 2 Jun 2008, 05:01 · Solicitar retirada

Hola saludos: Es cierto ya se ve como en el ejemplo, gracias.
En la misma leccion 2 en la parte enlaces con fondo tengo una dificultad y es que la parte donde explica "aplicando un fondo a los enlaces activos"
el codigo :
a:hover {color:red ; text-decoration:underline ;background-color: silver}

la parte donde dice background-color: silver esta subrayada y no logro transcribir eso para que me quede subrayado pues voy a la funcion y me aparece escrito sin subrayar y entre el comando u encerrado en corchetes. Por lo que no me funciona al colocar el mouse sobre los enlaces del menu que se vean plateados mi codigo de hoja d estilo-general es como sigue:
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: brown; text-decoration: none; display: block }
a: link {}
a: visited {}
a: hover {color: red; text-decoration:underline; background-color:silver}

a: active {}
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange; width: 1079px ; float:left }

#menu {background-color: yellow; width: 150px ; float:left ; text-align:left }
#menu li { list-style:none; margin: 4px 0px 4px 6px}

#pie {background-color: brown}

y mi 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 ="global">
<div id="cabecera">Bienvenidos a mi pagina Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido"><div id="menu">
<ul>

Enlace 1

Enlace 2

Enlace 3
</div>Esta sera la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
</div>

</body>
</html>

Gracias y saludos
Pd.: en otras palabras no se como subrayar background-color: silver