Vous êtes sur la page 1sur 5

.:: Sinapsis :: Maquetacin CSS ::.

http://blog.eldelweb.com/vp-16-302-0/Maquetacion-CSS.html (1 of 5)6/5/2008 12:04:45 PM


Sinapsis

Portada del Blog
Comunidad
Noticias
Registro
Login
RSS
Mas ledos
ltimos publicados
Temas
Escrito por Yosi_ el sbado, 16 de febrero de 2008
En esta ocasin voy a plantear lo que podramos llamar el esqueleto de una pgina web, mostrando varias opciones
a partir de las cuales se puede construir prcticamente cualquier otra estructura. Por supuesto voy a dar los mtodos
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.

1 Estructura: titulo, bloque central y men a la derecha

Es la estructura ms caracterstica de los blogs, y no resulta especialmente complicada. El cdigo HTML y CSS
(cada uno en su hoja correspondiente) asociado a ella sera:
G Uso prctico de AJAX y...
G Instalacin de Ubuntu...
G Entrevista a Linus T...
G Aire fresco en el sector...
G CSS: Algunos conceptos...
G Maquetacin CSS
G Poniendo nmeros a la...
G Linutop, miniPC con...
G Proceso de diseo de una...
G Acabemos con Internet...
G Big Buck Bunny, proyecto...
G Cmo integrar Google Maps...
G OLPC y Microsoft: Li...
G Emesene, claridad y...
G Uso prctico de AJAX y...
G Acabemos con Internet...
G Proceso de diseo de una...
G Informtica (12)
G Linux (9)
G Internet (8)
G GIMP (6)
G Programacin (5)
G Web (5)
G CSS (3)
G JavaScript (3)
G Microsoft (2)
G PHP (2)
G Derecho (1)
G Juegos (1)
G Cultura (1)
G Copyleft (1)
Maquetacin CSS

// 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>

.:: Sinapsis :: Maquetacin CSS ::.
http://blog.eldelweb.com/vp-16-302-0/Maquetacion-CSS.html (2 of 5)6/5/2008 12:04:45 PM
Blogs
Archivo
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 pgina, al estar todos los dems bloques
contenidos dentro de l. Se han establecido los mrgenes izquierdo y derecho como "auto", lo cual se emplea como
mtodo bastante eficaz para centrar un elemento, aunque cabe sealar 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 pgina, 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 debern guardar una distancia definida en 20px con respecto al ttulo.

Siguiendo con "menu", este ser el contenedor que haga las veces de men situndose 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 segn el orden del HTML es "main", el bloque central. De no haber definido ningn atributo, este
"div" se ubicara ocupando el ancho total del bloque "center", mientras que "menu" flotara a la derecha pero
superponindose a l. Como queremos que se vean como contenedores independientes, en ningn 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 adems 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 mayora 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 an as
deberemos respetar el espacio que ocupara si llegara a alcanzarlo. Recordemos que estamos tratando de elaborar
una estructura vlida para un contenido potencialmente dinmico que no podremos prever con exactitud en ningn
momento, as que hay que ceirse 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 da personalmente me dieron algn que otro problema. El cdigo HTML ser
exactamente igual al caso anterior (una clara muestra de la flexibilidad que permiten las hojas de estilos), asi que
sera absurdo volver a reproducirlo. En el caso del CSS la variacin sera pequea, tal y como sigue:
G Antisocial
G Archipelagica
G Bajo Cuerda
G Balas Blancas
G De tanta rabia
G EscaladAstur
G Habitacion101
G La Palabra Crea
G Nenyure
G Noticias
G Observatoriu
G Sinapsis
G Teoricum
G junio
G mayo
G abril
G marzo
G febrero
G enero
G 2007

// 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;
}

// CSS

#center {
width:900px;
margin:0 auto 0 auto;
.:: Sinapsis :: Maquetacin CSS ::.
http://blog.eldelweb.com/vp-16-302-0/Maquetacion-CSS.html (3 of 5)6/5/2008 12:04:45 PM

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 definicin antes mencionada),
como corresponte al cambio de posicin del men, y una cuestin importante: si prestamos atencin al dibujo de
arriba veremos que a diferencia del anterior, el segundo caso se ha planteado con una firma que se site por debajo
de todos los elementos que la preceden ocupando el ancho total de la pgina. 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 contina normalmente, como si todo lo que hubiera por encima
fuese un bloque homogneo con la altura del mayor de sus componentes.

3 Estructura: titulo, bloque central y men a la derecha

En este caso la variacin respecto al caso anterior consiste en aadir un elemento HTML y hacer una pequea
variacin en el CSS para ajustar los cambios:
}

#title {
margin:0 0 20px 0;
}

#menu {
float:left;
width:230px;
}

#main {
margin:0 0 20px 250px;
}

#footer{
clear:left;
}

// 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 {
.:: Sinapsis :: Maquetacin CSS ::.
http://blog.eldelweb.com/vp-16-302-0/Maquetacion-CSS.html (4 of 5)6/5/2008 12:04:46 PM

Temas relacionados: Programacin CSS
Imprimir Comprtelo



Como se puede ver, se ha aadido el div "menu2" como menu flotante a la izquierda, se ha ajustado el tamao 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
da, cuando todo eran dudas, s que me habra ayudado bastante encontrar un resumen de este tipo. Se que podra
ser ms 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 rpidamente 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.
Entradas relacionadas:
Escribe tu comentario:
float:right;
width:200px;
}

#menu2 {
float:left;
width:200px;
}

#main {
margin:0 220px 20px 220px;
}

#footer{
clear:both;
}
Negrita Cursiva Subrayado URL+ URL
Nombre:
Web personal (opcional):
G Cheat Sheets para desarrollo web (PHP, MySQL, CSS...)
G Proceso de diseo de una web
G Un vistazo a C Plus Plus 0x
Enviar
http://
.:: Sinapsis :: Maquetacin CSS ::.
http://blog.eldelweb.com/vp-16-302-0/Maquetacion-CSS.html (5 of 5)6/5/2008 12:04:46 PM

El contenido de esta comunidad se publica bajo licencia Creative Commons
Este proyecto ha sido llevado a cabo utilizando exclusivamente Software Libre
Puedes ponerte en contacto con la administracin del sitio escribiendo a eldelweb@gmail.com
Comunidad de Blogs EldelWeb.com, 2008

Vous aimerez peut-être aussi