Hola compañeros, tras haberme "estudiado" las dos últimas y buenísimas lecciones de jorgens (justo lo que necesitaba, el paso de generar las páginas a partir de la plantilla); continúo elaborando la plantilla para las páginas de mi web y me ha surgido un problema que yo sólo no consigo depurar.
El asunto es el siguiente: la página está divididaen capas, una capa global que engloba a todas las demás y que define una anchura de 800 px, una capa cabacera, una capa navegación, una capa contenido que a su vez alberga la capa menu lateral y la capa textoseimagenes; y la capa pie.
El problema es que la capa contenido, por su borde derecho, no queda alineada con el resto de capas y sobresale unos 2px haciendo un efecto feo.
Ya se gracias a las lecciones de jorgens que las capas para que se "vean"·han de tener algún contenido o en el caso de que sea una capa que contiene a su vez capas con "float" (mi caso) hay que definirle a la capa su altura (como hacia jorgens en sus lecciones). El problema es que a la capa contenido no puedo definirle la altura pues obviamente variará en función de cuanto texto imágenes etc. inserte luego an cada página de la web. Lo que se me ocurrió fue definirle un ancho de 800px (anchura que definí para la capa global y para las imágenes que redondean los bordes) y solusioné ese problema, cuanto mas texto escribía más larga era la capa contenido; sin embargo me surgió el problema que he comentado antes del borde derecho no alineado y no entiendo porqué si a todas las capas les he definido el mismo ancho de 800px.
Todo esto visualizando los resultados en la preview del html-kit.
Espero haberme explicado, segudamente dejo el codigo html de la plantilla y de la hoja de estilos .css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitonal//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>XXXXXXXXXXXXXXXXXXXX</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="foto-cabecera">[contenido no disponible]</div>
</div>
<div id="navegacion">
<ul>
Sección 1 Sección 2 Sección 3 Sección 4
</div>
<div id="contenido">
<div id="menu">
<ul>
<h1>Título de Sección 1</h1>
Enlace 1 Enlace 2 Enlace 3 Enlace 4
</div>
<div id="textoseimagenes">
<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 ponérsela justo aquí.
<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.
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. asod asdñlf asdñof añsld faspodifh aspodf aspdof apsodif aspodif apsodif aspodif apsodif apsodif apsodif apsodif aspdoif lkajsrf halñsdkf añsod fasdoif asodif apsodif apsodif apsoidf aposid apsouid apisud asi faspioudf aspoiduf apsodiuf apsoeuif asdpouf aspoduf aspdiouf aspdiuf aspiduf aspdiuf aspiduf pasdouf
</div>
</div>
<div id="pie">
<div id="pieuno">
<ul> Infirnación de Contacto
</div>
<div id="piedos">[correo eliminado]</div>
<div id="pietres">
<ul> Mapa de la Web
</div>
</div>
<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
ESTILOS
* {text-indent:0px ; 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}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 15px auto }
#curva-superior { background-image: url(objetos/curva-superior-naranja.jpg) ; 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:145px}
#logotipo {background-color: white ; width:260px ; float:left ; margin-top:25px}
#foto-cabecera {background-color: white ; width:529px ; float:right ; margin:5px 5px 0px 0px }
#navegacion {background-color: silver ; border: black 1px solid ; height:20px }
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
#navegacion ul { margin-left: 180px }
#contenido {background-color: #FF7F00 ; border-left: black 1px solid ; border-right: black 1px solid ; width: 800px}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: white ; width: 150px ; float:left ; text-align:left ; margin: 5px 0px 5px 5px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-repeat: no-repeat ; background-position: bottom ; padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 6px 6px}
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ;background-repeat: no-repeat ; padding-top:12px }
#textoseimagenes {background-color: white ; width: 630px ; float: right ; margin: 5px 5px 5px 0px ; background-image: url(objetos/curva-inferior-naranja-contenido.jpg) ; background-repeat: no-repeat ; background-position: bottom}
#textoseimagenes h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center ; background-image: url(objetos/curva-superior-naranja-contenido.jpg) ; background-repeat: no-repeat ; padding-top: 20px}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 30px }
#pie li {list-style: none ; font-size: 14px ; padding-top: 8px}
#pieuno {float:left ; width:249px ; }
#piedos {float:left ; width:300px }
#pietres {float:left ; width:249px }
#curva-inferior { background-image: url(objetos/curva-inferior-naranja.jpg) ;
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 {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
Gracias por vuestra colaboración de antemano!!!
El asunto es el siguiente: la página está divididaen capas, una capa global que engloba a todas las demás y que define una anchura de 800 px, una capa cabacera, una capa navegación, una capa contenido que a su vez alberga la capa menu lateral y la capa textoseimagenes; y la capa pie.
El problema es que la capa contenido, por su borde derecho, no queda alineada con el resto de capas y sobresale unos 2px haciendo un efecto feo.
Ya se gracias a las lecciones de jorgens que las capas para que se "vean"·han de tener algún contenido o en el caso de que sea una capa que contiene a su vez capas con "float" (mi caso) hay que definirle a la capa su altura (como hacia jorgens en sus lecciones). El problema es que a la capa contenido no puedo definirle la altura pues obviamente variará en función de cuanto texto imágenes etc. inserte luego an cada página de la web. Lo que se me ocurrió fue definirle un ancho de 800px (anchura que definí para la capa global y para las imágenes que redondean los bordes) y solusioné ese problema, cuanto mas texto escribía más larga era la capa contenido; sin embargo me surgió el problema que he comentado antes del borde derecho no alineado y no entiendo porqué si a todas las capas les he definido el mismo ancho de 800px.
Todo esto visualizando los resultados en la preview del html-kit.
Espero haberme explicado, segudamente dejo el codigo html de la plantilla y de la hoja de estilos .css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitonal//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>XXXXXXXXXXXXXXXXXXXX</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="foto-cabecera">[contenido no disponible]</div>
</div>
<div id="navegacion">
<ul>
</div>
<div id="contenido">
<div id="menu">
<ul>
<h1>Título de Sección 1</h1>
</div>
<div id="textoseimagenes">
<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 ponérsela justo aquí.
<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.
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. asod asdñlf asdñof añsld faspodifh aspodf aspdof apsodif aspodif apsodif aspodif apsodif apsodif apsodif apsodif aspdoif lkajsrf halñsdkf añsod fasdoif asodif apsodif apsodif apsoidf aposid apsouid apisud asi faspioudf aspoiduf apsodiuf apsoeuif asdpouf aspoduf aspdiouf aspdiuf aspiduf aspdiuf aspiduf pasdouf
</div>
</div>
<div id="pie">
<div id="pieuno">
<ul>
</div>
<div id="piedos">[correo eliminado]</div>
<div id="pietres">
<ul>
</div>
</div>
<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
ESTILOS
* {text-indent:0px ; 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}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 15px auto }
#curva-superior { background-image: url(objetos/curva-superior-naranja.jpg) ; 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:145px}
#logotipo {background-color: white ; width:260px ; float:left ; margin-top:25px}
#foto-cabecera {background-color: white ; width:529px ; float:right ; margin:5px 5px 0px 0px }
#navegacion {background-color: silver ; border: black 1px solid ; height:20px }
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
#navegacion ul { margin-left: 180px }
#contenido {background-color: #FF7F00 ; border-left: black 1px solid ; border-right: black 1px solid ; width: 800px}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: white ; width: 150px ; float:left ; text-align:left ; margin: 5px 0px 5px 5px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-repeat: no-repeat ; background-position: bottom ; padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 6px 6px}
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ;background-repeat: no-repeat ; padding-top:12px }
#textoseimagenes {background-color: white ; width: 630px ; float: right ; margin: 5px 5px 5px 0px ; background-image: url(objetos/curva-inferior-naranja-contenido.jpg) ; background-repeat: no-repeat ; background-position: bottom}
#textoseimagenes h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center ; background-image: url(objetos/curva-superior-naranja-contenido.jpg) ; background-repeat: no-repeat ; padding-top: 20px}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 30px }
#pie li {list-style: none ; font-size: 14px ; padding-top: 8px}
#pieuno {float:left ; width:249px ; }
#piedos {float:left ; width:300px }
#pietres {float:left ; width:249px }
#curva-inferior { background-image: url(objetos/curva-inferior-naranja.jpg) ;
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 {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
Gracias por vuestra colaboración de antemano!!!