Entrar

DUDAS LECCION 2 AQUI

gato · · Solicitar retirada
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 · · Solicitar retirada
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 · · Solicitar retirada
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 · · Solicitar retirada
hola lustres...
para ayudarte debes darnos la url de tu web para verla

saludos
eduardoacn · · Solicitar retirada
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 · · Solicitar retirada
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 · · Solicitar retirada
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
[correo eliminado]
Gracias!!
Yaneth · · Solicitar retirada
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 · · Solicitar retirada
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 · · Solicitar retirada
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:

[contenido no disponible]

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 · · Solicitar retirada
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!!
brontxo · · Solicitar retirada
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.

[contenido no disponible]

Uploaded with ImageShack.us

[contenido no disponible]

Uploaded with ImageShack.us

[contenido no disponible]

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



[contenido no disponible]

Uploaded with ImageShack.us

[contenido no disponible]

Uploaded with ImageShack.us

Las he vuelto a poner que creo que no se veian
Yaneth · · Solicitar retirada
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 · · Solicitar retirada
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 {}
brontxo · · Solicitar retirada
Vale Yaneth, ya esta, ya encontre el fallo. Repasando las lecciones y comparandolo con lo que tenia, me di cuenta que me faltaba un >, al cerrer la capa de global, y ya esta el color aparecio. Si es que esto es magia, con una chorrada que te dejes ya no sale, me encanta.
Voy a seguir, y gracias otra vez
Fedi · · Solicitar retirada
Hola gente! me pasa que pongo todo lo que pide el curso para centrar el div contenedor y cuando pongo preview el div sigue firme en el lado izquierdo de la pantalla. Les copio mi plantilla y la hoja de estilos. Estoy con el Html-kit.

Ante todo, gracias!! espero puedan ayudarme.

<!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">Esta será la zona principal de la web</div>
<div id="pie">Este es el pie de la página</div>
</div>

</body>
</html>

Cabe aclarar que tampoco me aparecen los div "encerrados" con una breve sangría como aparece en el ejemplo que muestra el curso.
Hoja de estilos

#cabecera {background-color:pink;}
#navegacion {background-color:grey;}
#contenido {background-color:orange;}
#pie {background-color:brown;}
#global {width:800px; margin: 4px auto }
#body {text-align:center;}
Fedi · · Solicitar retirada
Ya lo solucioné!! no se si es del todo practico lo que hice pero al menos me funcionó:

Le agregué <center> antes del <div> de contenido. quedó así:


<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>

<center><div id="global">
<div id="cabecera">Bienvenidos a mi web</div>
<div id="navegacion">Barra de navegación</div>
<div id="contenido">Esta será la zona principal de la web</div>
<div id="pie">Este es el pie de la página</div>
</div>

</body>
</html>

Probé achicando la ventana y en diferentes navegadores y funcionó!

Diganme si tiene alguna desventaja o algo que tenga que tener en cuenta...

Saludos! gracias por tan completo curso! es muy bueno, al margen de estos pequeños detalles, por lo menos lo que vi hasta ahora.
Yaneth · · Solicitar retirada
hola
no habia visto tu mensaje, pero el error lo tienes en el css

el css, debe estar por orden de aparicion en el html
me explico
el css debe estar asi

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

mas adelante te pide pongas una linea mas o menos asi

*{padding:0px; border: 0px; etc etc etc}

eso deberás ponerlo en la primera linea del css
repito, todo por orden de aparicion en el html

saludos
lakylu · · Solicitar retirada
Hola, pues estoy en la lección dos, y al ver el preview, el margen del menu por abajo es mayor al que os sale a vosotros, y no se donde puede estar el error, o si no es un error, y se corrige luego.

Gracias de antemano.
Rosa Maria · · Solicitar retirada
tengo un problema con la parte: reparando el fallo del menú.... no se queda bien....
Rosa Maria · · Solicitar retirada
ya ya!!! jejeje copie la linea de como tenia que quedar la linea de contenido y habia un espacio entre la # y contenido... ahora si me sale bien!!! :)
syncmaster · · Solicitar retirada
hola... al juntar los <li> del menu navegacion en una sola linea se corrige en los de las lineas en explorer pero no asi en el firefox cuando abro con el firefox queda deformado monas pero cuando lo veo con el iexplorer esta todo bien... estoy en la leccion seis corregir fallos
Yaneth · · Solicitar retirada
hola
pega aqui los codigos de html y css para verlos
o danos la url de tu web

saludos
ghasafello · · Solicitar retirada
hola, tengo un problema en la leccion 2.
al crear en el menu, el texto en el contenido no me aparece centrado como los otros, me aparece desplazado a la derecha
alguien sabe como solucionarlo??
Plantilla:
<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"> Esta es mi plantilla </div>
<div id="navegacion"> Esta será la 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>
Este es el cuerpo de la web ((este es el texto que me aparece desplazado))
</div>
<div id="pie"> este es el pie de la web </div>
</div>
</body>
</html>

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:beige; width:150px; float:left;}
#pie {background-color:brown;}

tengo algo mal?