DUDAS LECCION 2 AQUI

**gato** · 03/05/2011, 17:21

Gracias por este fantastico curso que acabo de empezar.
Mi problema es que no logro que se coloree la capa cabecera. Cuando hago vista previa en el html kit la primera capa sale solo con el texto pero sin el subrayado color rosa y cuando la edito en el navegador "Mozilla Firefox" salen todas las capas sin color solo con el texto. Te copio lo poquisimo que tengo en "plantilla.html" y en "codigo-general.css".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Mi pagina</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global"
<div id="cabecera">Bienvenidos a mi web</div>
<div id="navegacion">Barra de navegación</div>
<div id="contenido">Esta sera la zona principal de la Web</div>
<div id="pie">Este es el pie de la pagina</div>
</div>
</body>
</html>

codigo-general.css

body{text-align:center;}
#cabecera{background-color=pink;}
#navegacion{background-color=gray;}
#contenido{background-color=orange;}
#pie{background-color=brown;}
#global{width:800px;margin:4px;auto;}

Seguro que es culpa mia pero lo he repasado 100 veces y no encuentro donde esta el error. Gracias

**Yaneth** · 03/05/2011, 22:10

tienes esto

body{text-align:center;}
#cabecera{background-color=pink;}
#navegacion{background-color=gray;}
#contenido{background-color=orange;}
#pie{background-color=brown;}
#global{width:800px;margin:4px;auto;}

para comentzar, el css está desordenado, debes acomodar las ordenes por orden de aparicion en el html

body
global
cabecera
navegacion
contenido
menu
pie

ahora mira aqui

#cabecera{background-color=pink;}

debe ser asi

#cabecera{background-color:pink;}

saludos

**lustres** · 17/05/2011, 09:05

Hola, no sé si esto que quiero preguntar debe ir aquí ó en otro lugar, pero he buscado por si estaba repetido y no lo encuentro.

Tampoco sé si realmente es un problema ó no lo es, pero paso a exponerlo.

Estoy en la lección 2 de "Ejemplos con Divs" en la Sección "Enlaces con fondos", creo que he seguido todos los pasos al pie de la letra y así me consta, ya que en mi página "Plantilla.html" he conseguido los mismos resultados que en el enlace "efectos logrados" que viene en la lección, excepto en una cosa que me llama la atención, y no sé si es un problema ó no lo es y si me he equivocado en algo.

Esto que comento es lo siguiente, cuando le doy en mi página ha cualquiera de las opciones de la lista ó menú, cuando vuelvo a mover el ratón sobre los distintos enlaces del menú, compruevo que la opción elegida con anterioridad ó sea la última que se haya elegido, queda bordeada por un rectángulo de puntitos, hasta que vuelvo a clikar otra opción, sim embargo en el ejemplo de la lección no ocurre eso, en el ejemplo, elijes alguna opción y despues no se queda como marcada por ese borde exterior hasta que elijes otra opción, como ocurre en el mío.

Es esto un problema? hay algo que haya hecho mal?

Gracias, un saludo a todos.

**Yaneth** · 17/05/2011, 15:33

hola lustres...
para ayudarte debes darnos la url de tu web para verla

saludos

**eduardoacn** · 23/07/2011, 05:22

Mira esta es mi hoja de estilos

* {margin:0px; padding:0px; border:0px;}
body {text-align:center;}
#global {width:800px; margin:4px auto;}
#cabecera {background-color:pink;}
#navegacion {background-color:gray;}
#contenido {background-color:orange; width:800px; float:left;}
#menu {background-color:yellow; width:150px; float:left; text-align:left;}
#pie {background-color:brown;}
#menu li {list-style:none; margin:4px 0px 4px 6px;}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:vision {}
a:hover {color:red ; text-decoration: underline}
a:active {}
a {color:brown; text-decoration:none; display:block;}
a:hover {color:red; text-decoration:underline; background-color: silver;}

y esta es la del 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="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="menu">menu
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
</ul></div>
<div id="contenido">Esta será la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>

y yo tendria que tener esto http://www.comocreartuweb.com/objetos/plantilla-10.htm
por favor ayudame no encuentro el error para que la mia este igual a la tuya

**Yaneth** · 23/07/2011, 15:17

hola
el chiste es que... el menu, debe estar dentro de contenido, no fuera de el
tienes esto

<div id="menu">menu
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
</ul></div>
<div id="contenido">Esta será la zona principal de la web</div>

y deberias tener esto

<div id="contenido">
<div id="menu">menu
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
</ul></div>

Esta será la zona principal de la web</div>

saludos

**Pepo** · 11/08/2011, 14:34

Ola, estoy haciendo el curso paso a paso y voy por la Lección 2/Estilos para Listas.
Al cominezo de la leccion explica como arreglar el problema del menu que se descuadra, poniendo width:800px; float:left;} en la hoja de estilos. Lo pongo y al ponerlo me sale un cosa rara( se me ensancha el contenido y el pie de pagina se viene para abajo).
Dejo aqui el codigo de las plantillas.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/css"media="all">
</head>
<body>
<div id="gloval">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido"><div id="menu">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>Esta será la zona principal de la web</div>
<div id="pie">Este es el pie de página</div>
</div>

y el de estilo-general.css:
body {text-align:center;}
#cabecera {background-color:pink;}
#navegacion {background-color:gray;}
#contenido {background-color:orange;width:800px; float:left;}
#pie {background-color:brown;}
#global {width:800px; margin:4px auto;}
#menu {background-color:yellow; width:150px; float:left;}

</body>
</html>
Te dejo aqui mi correo
pepogs@hotmail.com
Gracias!!

**Yaneth** · 16/08/2011, 18:23

hola
tienes desordenada la hoja de estilos
debe estar por orden de aparicion en el html

asi
body
global
cabecera
etc etc etc
saludos

**Pepo** · 28/08/2011, 14:53

OLa, Gracias Yaneth ya he resuelto el problema del pie de pagina pero Ahora me doy cuenta de que la página esta ensanchada sin los bordes te dejo el link:
http://cligonsa.onlinewebshop.net/plantilla.html

Este es mi código 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/css"media="all">
</head>
<body>
<div id="gloval">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>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>
<p>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>
<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 página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

y el css:

* {text-indent:0px; margin:0px; padding:0px; border:0px;}
body {text-align:center;}
#global {width:800px; margin:4px auto;}
#cabecera {background-color:white; border-left: black 1px solid; border-right: black 1px solid;}
#navegacion {background-color:gray; border:black 1px solid;}
#contenido {background-color:orange;}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px; border-left:black 1px solid; border-right:black 1px solid;}
#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;}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color:silver;}
a:active {}
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;}
#curva-superior {background-image:url(objetos/curva-superior.gif);
background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
#curva-inferior {background-image:url(objetos/curva-inferior.gif);
background-repeat: no-repeat ;width:800px; height: 12px; overflow:hidden;}

Graciass Yaneth , Gracias CCTW!

**jahcarrillo** · 12/09/2011, 23:16

hola buenas tardes, ante q nada dar las gracias por semenjante curso q han elaborado si q esta bien explicadito ^^
ahora mi duda y problema es la siguiente hasta esta parte de la leccion2 Reparando el fallo del menú. iva todo bien hasta q segui lo ahi colocan. entonces el diseño me quedo asi:

y no encuentro como acomodar el pie de pagina para q quede en la parte inferior como aparece en el ejemplo final q dan, sera q me indican q anda mal ya q por mas vuelta q le doy no veo donde esta el error =S

este es el codigo de estilo q tengo en el css:

*{margin:0px; padding:0px; borde:0px;}
body {text-align:center;}
#global {width 800px; margin:4px auto;}
#cabecera {background-color:pink;}
#navegacion {background-color:gray;}
#contenido {background-color:orange; width:800px;float:left;}
#menu {background-color:yellow; width:150px;float:left;}
#menu li {...propiedades.....}
#menu li {list-style:none;}
#pie {background-color:brown;}
a {color:brown; font-size:1.3em; text-decoration:none;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color:silver;}
a:active {}
a {color:brown; text-decoration:none; display:block;}

y este es del 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="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion"> Barra de Navegacion</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="#">Elemento lista 1</a></li><li><a href="#">Elemento lista 2</a></li><li><a href="#">Elemento lista 3</a></li></ul></div>
Zona principal de la Web </div>
<div id="pie">Pie de pag</div>
</div>

</body>
</html>

agredeceria ayuda para seguir con el curso q si esta bien interesante ^^

**rogerr** · 16/09/2011, 13:38

Antes que nada saludar a los creadores de esta magnífica herramienta para crear páginas web y daros las gracias! Y aprovecho para saludar a los usuarios.

Estoy justo en el apartado " Estilos para listas " en la lección 2

Es correcto como tengo "plantilla.html" y "estilo-general.css" ? Estoy justo antes de " eliminar puntos de la lista:

" 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="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido"><div id="menu"><ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul></div>Esta será la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>

"estilo-general.css":

body {text-align:center;}
#global {width:800px; margin:4px auto;}
#cabecera {background-color:pink;}
#navegacion {background-color:gray;}
#contenido {background-color:orange; width:800px; float:left;}
#menu {background-color:yellow; width:150px; float:left;}
#pie {background-color:brown;}

Gracias y saludos!!

**Web-Freelance** · 16/09/2011, 15:34

Yo lo veo perfecto @rogerr, sigue así!

Saludos!

**brontxo** · 24/01/2012, 16:21

si hola buenas tardes y gracias a los que contestais que haceis una gran labor a los incultos como yo.

Pues mi duda es que en la leccion 2 al seguir los pasos de la lecciones, que creo que tengo todo bien, lo unico que me deja intrigado que no se porqué, a medida que avanzo en la leccion siguiendo los pasos me van desapareciendo los colores de las capas creadas, al hacer preview, creo que esta todo bien, les dejo capturas haber si ven algun fallo y me he explicado lo suficiente.

[IMG=http://img855.imageshack.us/img855/3234/captura5b.png][/IMG]

Uploaded with ImageShack.us

[IMG=http://img252.imageshack.us/img252/9034/captura6u.png][/IMG]

Uploaded with ImageShack.us

Uploaded with ImageShack.us

les he dejado capturas del css y del index, asi como la de preview, que concretamente me refiero a los colores sobre donde esta escrito,"Bienvenidos a mi Web" y "Esta será la zona principal de la web", que como vies los colores no estan.

gracias y un saludo

Uploaded with ImageShack.us

Uploaded with ImageShack.us

Las he vuelto a poner que creo que no se veian

**Yaneth** · 26/01/2012, 17:05

hola

mira en el css
tienes
# contenido
con un espacio despues de #

quitaselo y nos comentas si se soluciona con eso,
de lo contrario, pega aqui los codigos en forma de texto, para pasarlos a mi html-kit

saludos

**brontxo** · 02/02/2012, 15:10

ok lo he hecho, los he guardado, he abierto la plantilla y al darle a prewiev nada, igual. te dejo pues lo que tengo del css ok, si necesitas algo mas dimelo y te lo pongo, gracias. Un saludo

* {margin:0px; padding:0px; border:0px;}
body {text-align:center;}
#global {width:800px; margin:4px auto;}
#cabecera {background-color:pink;}
#navegacion {background-color:gray;}
#contenido {background-color:orange; width:800px; float:left;}
#menu {background-color:yellow; width:150px; float:left; text-align:left;}
#pie {background-color:brown;}
#menu li {list-style:none; margin:4px 4px 0px 6px;}
a {color: brown ; text-decoration:none ; display:block;}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:silver;}
a:active {}