los bordes

mar33 · 8 Jul 2008, 14:37 · Solicitar retirada

ola estoi en la tercera fase y colocando los bordes e cambiao todo lo demas y no se como solucionarlo.ayuda porfavor.

------------------------------------------------------------------------------------
la plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head><link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>Page title</title>
</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>

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>

</body>
</html>

-------------------------------------------------------------------------------------
estilos general:

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

body {text-align: center}

#cabecera {background-color: pink }

#navegacion {background-color: gray }

#contenido p {background-color: orange ; padding: 5px 10px 5px 10px;text-indent: 15px}

contenido{border-left: black 1px solid ; border-right: black 1px solid }

#pie {background-color: brown}

#global {margin: 4px auto }

#menu {background-color: yellow ; width: 150px ;text-align:left ;................... margin:3px 10px 3px 3px}

#menu li {list-style:none ; margin: 4px 0px 4px 6px}

a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: blue; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:red ; texy-decoration: underline}
a:active {}

p {text-align: justify}

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center ;background-color: orange}

h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center ; background-color: orange}

-------------------------------------------------------------------------------------
necesito ayuda xfavor :oops:

Raulyure · 8 Jul 2008, 15:15 · Solicitar retirada

mar33 escribió:ola estoi en la tercera fase y colocando los bordes e cambiao todo lo demas y no se como solucionarlo.ayuda porfavor.

------------------------------------------------------------------------------------
la plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head><link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>Page title</title>
</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>
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>

</body>
</html>

-------------------------------------------------------------------------------------
estilos general:

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

body {text-align: center}

#cabecera {background-color: pink }

#navegacion {background-color: gray }

#contenido p {background-color: orange ; padding: 5px 10px 5px 10px;text-indent: 15px}

contenido{border-left: black 1px solid ; border-right: black 1px solid }

#pie {background-color: brown}

#global {margin: 4px auto }

#menu {background-color: yellow ; width: 150px ;text-align:left ;................... margin:3px 10px 3px 3px}

#menu li {list-style:none ; margin: 4px 0px 4px 6px}

a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: blue; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:red ; texy-decoration: underline}
a:active {}

p {text-align: justify}

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center ;background-color: orange}

h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center ; background-color: orange}

-------------------------------------------------------------------------------------
necesito ayuda xfavor :oops:

Hola:
Cuando usted ha puesto esto en el mensaje ¿lo copió de su hoja de estilo, o solo lo escribió en el mensaje? porque sería conveniente que copiara su hoja de estilo en el mensaje, así podríamos ver mejor si hay algún problema.
Suponiendo que lo que usted ha puesto acá es lo que tiene en su hoja de estilo, entonces parece ser que a esa capa contenido usted no le puso la almohadilla antes ( # ). Le sugiero que pegue en un mensaje o spot todo lo que tenga en su hoja de estilo.
Saludos

Novato · 8 Jul 2008, 15:21 · Solicitar retirada

Hola, lo más seguro es que no te funcione por que en la hoja de estilos tienes:

#contenido p {background-color: orange ; padding: 5px 10px 5px 10px;text-indent: 15px}

contenido{border-left: black 1px solid ; border-right: black 1px solid }

#pie {background-color: brown}

Te falta el simbolo # en la capa contenido, es decír, iria así:

#contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}

#pie {background-color: brown}

En la capa que define el menu, quitale esos puntos que no sirven de nada, te los muestro en rojo...

#menu {background-color: yellow ; width: 150px ;text-align:left ;................... margin:3px 10px 3px 3px}

Tienes la a definida dos veces...

a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: blue; text-decoration: none}

quita la de rojo, y por último ordena la hoja de estilos ya que debe seguir un orden, tu tienes:

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

body {text-align: center}

#cabecera {background-color: pink }

#navegacion {background-color: gray }

#contenido p {background-color: orange ; padding: 5px 10px 5px 10px;text-indent: 15px}

contenido{border-left: black 1px solid ; border-right: black 1px solid }

#pie {background-color: brown}

#global {margin: 4px auto }

#menu {background-color: yellow ; width: 150px ;text-align:left ;................... margin:3px 10px 3px 3px}

#menu li {list-style:none ; margin: 4px 0px 4px 6px}

a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: blue; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:red ; texy-decoration: underline}
a:active {}

p {text-align: justify}

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center ;background-color: orange}

h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center ; background-color: orange}

si te fijas tienes las propiedades de menu debajo de las del pie cuando en la plantilla no están en ese orden, tambien tienes las propiedades de global debajo de las del pie...

te deberia quedar así:

* {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 ;background-color: orange}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center ; background-color: orange}
body {text-align: center}
#global {margin: 4px auto }
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {background-color: yellow ; width: 150px ;text-align:left ; margin:3px 10px 3px 3px}
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
#pie {background-color: brown}

a {color: blue; font-size:1.3em ; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:red ; texy-decoration: underline}
a:active {}

esto último que te he marcado en negrita es porque no es texy es text, cambialo.
Un saludo.

mar33 · 8 Jul 2008, 15:45 · Solicitar retirada

gracias por lo de antes.
aora loq me pasa es q el menu me sale centrado y detras del fondo amarillo del menu tengo un fondo blanco en vez de naranja. te pongo todos los codigos de todo(la plantilla, el archibo index, el archibo estilos y el archibo estilos-general).
-------------------------------------------------------------------------------------
el archibo plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head><link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>Page title</title>
</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>

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>

</body>
</html>

-------------------------------------------------------------------------------------

archibo estilos-general:

* {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 ;background-color: orange}

h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center ; background-color: orange}

body {text-align: center}

#global {margin: 4px auto }

#cabecera {background-color: pink }

#navegacion {background-color: gray }

#contenido{border-left: black 1px solid ; border-right: black 1px solid }

#contenido p {background-color: orange ; padding: 5px 10px 5px 10px;text-indent: 15px}

#menu {background-color: yellow ; width: 150px ;text-align:left ;margin:3px 10px 3px 3px}

#menu li {list-style:none ; margin: 4px 0px 4px 6px}

#pie {background-color: brown}

a {color: blue; font-size:1.3em ; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration: underline}
a:active {}
-------------------------------------------------------------------------------------
archibo index:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Pagina principal del ejemplo cctw</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<p class="centrado"> Bienvenidos a mi página web. Muy pronto estará lista!</p>

[contenido no disponible]</p>

Página creada gracias a CCTW</p>

[correo eliminado]</p>
</body>
</html>
-------------------------------------------------------------------------------------

archibo estilos:

body {background-color: #CD00CD ;
background-image: url(objetos/fondo1.png) ;
background-repeat: no-repeat ;
background-position: center center}

img {border-style: none}

.centrado {text-align:center}

-------------------------------------------------------------------------------------
esto es todo espero q me ayudeis. :D

Yo · 20 Jul 2008, 17:22 · Solicitar retirada

Hola,

Tan sólo os escribo para daros las gracias, pues tenía un problema con los margenes y leyendo este post, lo he solucinado.

Gracias Raulyure y Novato

criss · 21 Jul 2008, 04:18 · Solicitar retirada

Se que e suna pavada y hasta ahora vine haciendo todo perfecto pero aplico el html para sacar los puntos y no los quita aparte de que en mi vista previa el primer elemento de la lista aparece mas a la derecha que los demas (que aun asi segui un poko mas y los alinee todos a la izquiera pero solo cambio el menu)
plantilla:
<!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">menu</div>
<ul>

Enlace 1Elemento de lista 1

Enlace 1Elemento de lista 2

Enlace 1Elemento de lista 3
</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}
#contenido {background-color: orange ; width: 800px ; float:left}
#menu {background-color: yellow; width: 150px ; float:left ; text-align: left }
#pie {background-color: green}
#menu li { ...propiedades..... }
#menu li { list-style:none }
* {margin:0px ; padding:0px ; border: 0px}
muchas gracias y muy bueno el tutorial :D

Raulyure · 21 Jul 2008, 08:04 · Solicitar retirada

criss escribió:Se que e suna pavada y hasta ahora vine haciendo todo perfecto pero aplico el html para sacar los puntos y no los quita aparte de que en mi vista previa el primer elemento de la lista aparece mas a la derecha que los demas (que aun asi segui un poko mas y los alinee todos a la izquiera pero solo cambio el menu)
plantilla:
<!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">menu</div>
<ul>
Enlace 1Elemento de lista 1
Enlace 1Elemento de lista 2
Enlace 1Elemento de lista 3
</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}
#contenido {background-color: orange ; width: 800px ; float:left}
#menu {background-color: yellow; width: 150px ; float:left ; text-align: left }
#pie {background-color: green}
#menu li { ...propiedades..... }
#menu li { list-style:none }
* {margin:0px ; padding:0px ; border: 0px}
muchas gracias y muy bueno el tutorial :D

Hola:
Parece ser que usted ha puesto el cierre de los enlaces antes de lo previsto (</a>) y cerró el menu tambien antes de lo previsto, esto es lo que usted tiene:
<div id="menu">menu</div>
<ul>

Enlace 1Elemento de lista 1

Enlace 1Elemento de lista 2

Enlace 1Elemento de lista 3
</div>

Y esto seguramente es como debiera de tenerlo:
<div id="menu">
<ul>

Enlace 1

Enlace 1

</div>
Le sugiero que lo ponga así y veremos si se han quitado los puntos.
como dato informativo:
El div id="menu"> es una capa, y dentro de esa capa va la lista que abre con <ul> y cierra al final de la lista con , y después se cierra esa capa menu con </div>
También le recomiendo que sería bueno que cuando tenga algún problema no escriba los códigos en el mensaje sino cópielos de su página y de su hoja de estilo y péguelos en el mensaje, ya que así podremos ver realmente con mas propiedad el problema que pueda haber en los en los códigos
Saludos

criss · 25 Jul 2008, 19:35 · Solicitar retirada

buenoo al parecer funciono muchisimas gracias ahora voy aseguir hasta ver cuando tendre que volver a molestarlos onb algun problema mio :P

saludos