Escrito por Yosi_ el sábado, 16 de febrero de 2008
En esta ocasión voy a plantear lo que podríamos llamar el esqueleto de una página web, mostrando varias opciones a partir de las cuales se puede construir prácticamente cualquier otra estructura. Por supuesto voy a dar los métodos que a mi juicio son los mejores siempre teniendo en cuenta por encima de todo la compatibilidad con cualquier navegador (lo cual para nuestra desgracia incluye a IE6), aunque hay que dejar claro que el hecho de que muestre una forma no implica que no haya otras muchas de obtener un resultado similar, ni que sea la mejor. Sencillamente es a lo que yo he llegado a base de experimentar tratando de hacer las cosas lo mejor posible.
Es la estructura más característica de los blogs, y no resulta especialmente complicada. El código HTML y CSS (cada uno en su hoja correspondiente) asociado a ella sería:
En este primer caso seria interesante en primer lugar resaltar la sintaxis de la propiedad "margin", que define los margenes exteriores de un bloque siguiendo el orden "margin: arriba derecha abajo izquierda". A partir de esto podemos empezar a analizar lo expuesto anteriormente con el elemento "center". En este caso se le ha asignado una anchura (width) de 900px, que determinará el ancho total de la página, al estar todos los demás bloques contenidos dentro de él. Se han establecido los márgenes izquierdo y derecho como "auto", lo cual se emplea como método bastante eficaz para centrar un elemento, aunque cabe señalar que solamente funciona con los bloques no flotantes para los que no se ha establecido ningun tipo de posicionamiento absoluto.
En el caso del bloque "title" no hay nada que destacar, sencillamente se ha colocado en el interior de "center" siguiendo el flujo normal de la página, por lo que se extenderá hasta ocupar la anchura total de éste, y su altura vendrá determinada por su contenido. El margen establecido en este caso afectará a la parte inferior, de forma que los siguientes bloques deberán guardar una distancia definida en 20px con respecto al título.
Siguiendo con "menu", este será el contenedor que haga las veces de menú situándose a la derecha de los que se definan posteriormente. Para eso la se ha especificado el atributo "float:right" y un ancho de 250px.
El siguiente según el orden del HTML es "main", el bloque central. De no haber definido ningún atributo, este "div" se ubicaría ocupando el ancho total del bloque "center", mientras que "menu" flotaría a la derecha pero superponiéndose a él. Como queremos que se vean como contenedores independientes, en ningún caso solapados, deberemos definir un margen derecho, en este caso de 250px, que asegure que "main" nunca va a ocupar el espacio de "right" (que corresponde a 230px) y además respete un margen visual entre ambos bloques de 20px, tal y como está representado en el esquema superior.
Por último "footer" es el bloque que contiene la firma, y es definido exactamente igual que main, ya que debe cumplir las mismas condiciones frente al menú derecho. Es posible que en la mayoría de los casos el contenido del bloque central exceda con mucho el del menú, y por ello la firma no se vea afectada por éste último, pero aún así deberemos respetar el espacio que ocuparía si llegara a alcanzarlo. Recordemos que estamos tratando de elaborar una estructura válida para un contenido potencialmente dinámico que no podremos prever con exactitud en ningún momento, así que hay que ceñirse siempre al peor caso.
Es bastante evidente que el cambio respecto al caso anterior es insignificante, pero que merece la pena comentarlo por un par de cuestiones que en su día personalmente me dieron algún que otro problema. El código HTML será exactamente igual al caso anterior (una clara muestra de la flexibilidad que permiten las hojas de estilos), asi que sería absurdo volver a reproducirlo. En el caso del CSS la variación sería pequeña, tal y como sigue:
Fundamentalmente podemos destacar los cambios en "menu", cuyo atributo float está definido en este caso como "float:left", el ajuste del margen del lado derecho al lado izquierdo (recordemos la definición antes mencionada), como corresponte al cambio de posición del menú, y una cuestión importante: si prestamos atención al dibujo de arriba veremos que a diferencia del anterior, el segundo caso se ha planteado con una firma que se sitúe por debajo de todos los elementos que la preceden ocupando el ancho total de la página. Para conseguir que un elemento flotanto deje de afectar a otro definido posteriormente, este último debe contener el atributo "clear" definido como left (para los elementos flotantes a la izquierda), right (a la derecha), o "both" (ambos). De este modo se establece una linea divisoria imaginaria y el flujo de la web continúa normalmente, como si todo lo que hubiera por encima fuese un bloque homogéneo con la altura del mayor de sus componentes.
En este caso la variación respecto al caso anterior consiste en añadir un elemento HTML y hacer una pequeña variación en el CSS para ajustar los cambios:
Como se puede ver, se ha añadido el div "menu2" como menu flotante a la izquierda, se ha ajustado el tamaño a 200px cada menu para dejar un poco de espacio en el centro, y se han cambiado los margenes de "main" para que respete ambos lados. Ademas se ha introducido un atributo "clear:both" en la firma para asegurarnos de que se va a colocar bajo cualquiera de los tres bloques que la preceden.
Y creo que esto es todo respecto a este tema. Espero y deseo que resulte de utilidad, porque creo que a mi en su día, cuando todo eran dudas, sí que me habría ayudado bastante encontrar un resumen de este tipo. Se que podría ser más completo, pero no he querido recargarlo demasiado con cuestiones subyacentes teniendo en cuenta a quienes afrontan esto por primera vez, ya que entiendo que puede parecer algo apabullante. Con esta base, si bien muchas cuestiones quedan en el aire (es inevitable), creo que se puede disponer de algo sobre lo que probar y obtener resultados rápidamente evitando situaciones excesivamente frustrantes. No obstante para cualquier duda al respecto, no teneis mas que preguntar y se intentará resolver lo mejor posible dentro de mis posibilidades.
1º Estructura: titulo, bloque central y menú a la derecha
Es la estructura más característica de los blogs, y no resulta especialmente complicada. El código HTML y CSS (cada uno en su hoja correspondiente) asociado a ella sería:
// HTML
<div id='center'>
<div id='title'>
Titulo
</div>
<div id='menu'>
Contenido del menu derecho
</div>
<div id='main'>
Contenido principal
</div>
<div id='footer'>
Firma
</div>
</div>
// CSS
#center {
width:900px;
margin:0 auto 0 auto;
}
#title {
margin:0 0 20px 0;
}
#menu {
float:right;
width:230px;
}
#main {
margin:0 250px 20px 0;
}
#footer{
margin:0 0 0 250px;
}
En este primer caso seria interesante en primer lugar resaltar la sintaxis de la propiedad "margin", que define los margenes exteriores de un bloque siguiendo el orden "margin: arriba derecha abajo izquierda". A partir de esto podemos empezar a analizar lo expuesto anteriormente con el elemento "center". En este caso se le ha asignado una anchura (width) de 900px, que determinará el ancho total de la página, al estar todos los demás bloques contenidos dentro de él. Se han establecido los márgenes izquierdo y derecho como "auto", lo cual se emplea como método bastante eficaz para centrar un elemento, aunque cabe señalar que solamente funciona con los bloques no flotantes para los que no se ha establecido ningun tipo de posicionamiento absoluto.
En el caso del bloque "title" no hay nada que destacar, sencillamente se ha colocado en el interior de "center" siguiendo el flujo normal de la página, por lo que se extenderá hasta ocupar la anchura total de éste, y su altura vendrá determinada por su contenido. El margen establecido en este caso afectará a la parte inferior, de forma que los siguientes bloques deberán guardar una distancia definida en 20px con respecto al título.
Siguiendo con "menu", este será el contenedor que haga las veces de menú situándose a la derecha de los que se definan posteriormente. Para eso la se ha especificado el atributo "float:right" y un ancho de 250px.
El siguiente según el orden del HTML es "main", el bloque central. De no haber definido ningún atributo, este "div" se ubicaría ocupando el ancho total del bloque "center", mientras que "menu" flotaría a la derecha pero superponiéndose a él. Como queremos que se vean como contenedores independientes, en ningún caso solapados, deberemos definir un margen derecho, en este caso de 250px, que asegure que "main" nunca va a ocupar el espacio de "right" (que corresponde a 230px) y además respete un margen visual entre ambos bloques de 20px, tal y como está representado en el esquema superior.
Por último "footer" es el bloque que contiene la firma, y es definido exactamente igual que main, ya que debe cumplir las mismas condiciones frente al menú derecho. Es posible que en la mayoría de los casos el contenido del bloque central exceda con mucho el del menú, y por ello la firma no se vea afectada por éste último, pero aún así deberemos respetar el espacio que ocuparía si llegara a alcanzarlo. Recordemos que estamos tratando de elaborar una estructura válida para un contenido potencialmente dinámico que no podremos prever con exactitud en ningún momento, así que hay que ceñirse siempre al peor caso.
2º Estructura: titulo, bloque central y menú a la izquierda
Es bastante evidente que el cambio respecto al caso anterior es insignificante, pero que merece la pena comentarlo por un par de cuestiones que en su día personalmente me dieron algún que otro problema. El código HTML será exactamente igual al caso anterior (una clara muestra de la flexibilidad que permiten las hojas de estilos), asi que sería absurdo volver a reproducirlo. En el caso del CSS la variación sería pequeña, tal y como sigue:
// CSS
#center {
width:900px;
margin:0 auto 0 auto;
}
#title {
margin:0 0 20px 0;
}
#menu {
float:left;
width:230px;
}
#main {
margin:0 0 20px 250px;
}
#footer{
clear:left;
}
Fundamentalmente podemos destacar los cambios en "menu", cuyo atributo float está definido en este caso como "float:left", el ajuste del margen del lado derecho al lado izquierdo (recordemos la definición antes mencionada), como corresponte al cambio de posición del menú, y una cuestión importante: si prestamos atención al dibujo de arriba veremos que a diferencia del anterior, el segundo caso se ha planteado con una firma que se sitúe por debajo de todos los elementos que la preceden ocupando el ancho total de la página. Para conseguir que un elemento flotanto deje de afectar a otro definido posteriormente, este último debe contener el atributo "clear" definido como left (para los elementos flotantes a la izquierda), right (a la derecha), o "both" (ambos). De este modo se establece una linea divisoria imaginaria y el flujo de la web continúa normalmente, como si todo lo que hubiera por encima fuese un bloque homogéneo con la altura del mayor de sus componentes.
3º Estructura: titulo, bloque central y menú a la derecha
En este caso la variación respecto al caso anterior consiste en añadir un elemento HTML y hacer una pequeña variación en el CSS para ajustar los cambios:
// HTML
<div id='center'>
<div id='title'>
Titulo
</div>
<div id='menu'>
Contenido del menu derecho
</div>
<div id='menu2'>
Contenido del menu izquierdo
</div>
<div id='main'>
Contenido principal
</div>
<div id='footer'>
Firma
</div>
</div>
// CSS
#center {
width:900px;
margin:0 auto 0 auto;
}
#title {
margin:0 0 20px 0;
}
#menu {
float:right;
width:200px;
}
#menu2 {
float:left;
width:200px;
}
#main {
margin:0 220px 20px 220px;
}
#footer{
clear:both;
}
Como se puede ver, se ha añadido el div "menu2" como menu flotante a la izquierda, se ha ajustado el tamaño a 200px cada menu para dejar un poco de espacio en el centro, y se han cambiado los margenes de "main" para que respete ambos lados. Ademas se ha introducido un atributo "clear:both" en la firma para asegurarnos de que se va a colocar bajo cualquiera de los tres bloques que la preceden.
Y creo que esto es todo respecto a este tema. Espero y deseo que resulte de utilidad, porque creo que a mi en su día, cuando todo eran dudas, sí que me habría ayudado bastante encontrar un resumen de este tipo. Se que podría ser más completo, pero no he querido recargarlo demasiado con cuestiones subyacentes teniendo en cuenta a quienes afrontan esto por primera vez, ya que entiendo que puede parecer algo apabullante. Con esta base, si bien muchas cuestiones quedan en el aire (es inevitable), creo que se puede disponer de algo sobre lo que probar y obtener resultados rápidamente evitando situaciones excesivamente frustrantes. No obstante para cualquier duda al respecto, no teneis mas que preguntar y se intentará resolver lo mejor posible dentro de mis posibilidades.
162 Comentarios
Temas relacionados:
Programación
CSS