Estoy en la lección de colocar el logotico en la web.
Segui todos los pasos pero se me desconfiguro la web y nunca se me alinearon las capas logotipo y publicidad una enfrente de otra, pero aún peor, el contenido se me salió del resto de la web, ocupando un mayor espacio en términos de anchura, de las demás capas de la web. Repeti los pasos, pero creo q estan tal cual, intenté introducir la imagen desde el procedimiento en el q se insertan estas (explicado en las lecciones anteriores) pero tampoco me funciono. Me di cuenta q la imagen q guardé, tenía proporciones diferentes a las mencionadas en la lección, así q teniendo en cuenta esto, saque el valor q sería el real en mi ejemplo de la capa publicidad en terminos de anchura. Pero continuo el problema.
Así q revise todo, pero no encuentro en dónde me equivoque. Así que espero me puedan ayudar a soluciona este problema que ahora me surgio. Gracias.
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="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">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 colocarle un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponérsela justo aquí.</p>
<h2>Y este es el tercer párrafo</h2>
En pocas lecciones aprenderé a darle márgenes para separarlos unos de otros, e incluso a hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>
Anda, fíjate, salen todos centrados, que cosa. Espero que Jorgens nos enseñe a pornelos alineados a la izquierda, o justificados. Así esto será una poesía!!! jejeje.</p>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
estilo.general.css
* {text-indent:0px; margin:0px ; padding:0px ; border: 0px}
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: 76}
#logotipo {background-color: brown ; width:252 ; float: left ; float: right}
#publicidad {background-color: pink ; width: 546 ; margin-top: 25px}
#navegacion {background-color: gray ; border: black 1px solid}
#contenido {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 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 {}
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}
Segui todos los pasos pero se me desconfiguro la web y nunca se me alinearon las capas logotipo y publicidad una enfrente de otra, pero aún peor, el contenido se me salió del resto de la web, ocupando un mayor espacio en términos de anchura, de las demás capas de la web. Repeti los pasos, pero creo q estan tal cual, intenté introducir la imagen desde el procedimiento en el q se insertan estas (explicado en las lecciones anteriores) pero tampoco me funciono. Me di cuenta q la imagen q guardé, tenía proporciones diferentes a las mencionadas en la lección, así q teniendo en cuenta esto, saque el valor q sería el real en mi ejemplo de la capa publicidad en terminos de anchura. Pero continuo el problema.
Así q revise todo, pero no encuentro en dónde me equivoque. Así que espero me puedan ayudar a soluciona este problema que ahora me surgio. Gracias.
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="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">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
</div>
<h1>Esta será la zona principal de la Web</h1>
Este es mi segundo párrafo. Acabo de colocarle un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponérsela justo aquí.</p>
<h2>Y este es el tercer párrafo</h2>
En pocas lecciones aprenderé a darle márgenes para separarlos unos de otros, e incluso a hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>
Anda, fíjate, salen todos centrados, que cosa. Espero que Jorgens nos enseñe a pornelos alineados a la izquierda, o justificados. Así esto será una poesía!!! jejeje.</p>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
estilo.general.css
* {text-indent:0px; margin:0px ; padding:0px ; border: 0px}
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: 76}
#logotipo {background-color: brown ; width:252 ; float: left ; float: right}
#publicidad {background-color: pink ; width: 546 ; margin-top: 25px}
#navegacion {background-color: gray ; border: black 1px solid}
#contenido {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 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 {}
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}