Maquetado de CSS

7/24/2019 Maquetado de CSS

1/17

Semana 6: Utilizacin de lenguajes de marcas en entornos web

-1-

Maquetando con hojas de estilo (CSS)

Introduccin

Hoy en da se prefiere realizar el maquetado con hojas de estilo para mantener el

objetivo de conseguir la apariencia sin usar el HTML para ello. Tambin es preferible

usar CSS cuando hay que modificar la posicin de una capa. Si maquetamos con tablas

es ms difcil realizar modificaciones.

Vamos a mostrar cmo realizar el maquetado a una, dos y tres columnas a travs de

un sencillo procedimiento probado en las ltimas versiones de los navegadores. Si

usted quiere que funcionen en Internet Explorer 5 y 6 y en las viejas versiones de

Netscape o quiere diseos complejos debe visitarhttp://www.cssplay.co.uk/layouts/o

http://www.csseasy.com/layouts/y obtendr visiones ms completas del asunto.

Diseando a una sola columnaQueremos maquetar a una columna, tal y como se observa en la figura siguiente

A continuacin presentamos una solucin sencilla:

body {

width:750px;margin:0 auto;margin-top:30px;}

/* ----- CABECERA ----- */

#cabecera {width:750px;height:150px;background-color:#333333;}
http://www.cssplay.co.uk/layouts/http://www.cssplay.co.uk/layouts/http://www.cssplay.co.uk/layouts/http://www.csseasy.com/layouts/http://www.csseasy.com/layouts/http://www.csseasy.com/layouts/http://www.cssplay.co.uk/layouts/


2/17


-2-

/* ----- MEN ----- */

#menu {width:750px;height:40px;background-color: #C0C0C0;}

/* ----- CONTENIDOS ----- */

#contenidos {width:750px;min-height:450px; /* para navegadores modernos */height:auto !important; /* para navegadores modernos */height:450px; /* para IE5.x e IE6 */background-color: #FFFF66;

overflow:hidden;}

/* ----- PIE ----- */

#pie {width:750px;height:100px;background-color: #99FF66;overflow:hidden;}

En este caso estamos diseando para un ancho fijo. El diseo fluido que ocupa todo elancho disponible lo veremos despus.

Observe como usamos height:auto !important; para navegadores modernos puesto

que los antiguos no reconocen important y por tanto ignoran la propuesta, asimismo

ocurre con min-height que es sustituido por una altura fija en IE5.x e IE6

overflow:hidden es una tcnica muy utilizada para evitar efectos colaterales en el

diseo CSS. En ocasiones puede usarse tambin overflow:auto que genera barras de

scroll en caso necesario.

El cuerpo del documento ser el que vemos debajo

Cabecera

opcion 1

contenidos

pie


3/17


-3-

Diseando a dos columnas

En este caso el aspecto es el siguiente

La propuesta la podemos ver a continuacin con los mens a la izquierda

Maquetado a dos columnasbody {width:750px;margin:0 auto;margin-top:30px;

}


4/17


-4-

/* ----- CABECERA ----- */


/* ----- MEN ----- */

#menu {width: 200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #C0C0C0;float: left;

}/* ----- CONTENIDOS ----- */

#contenidos {width: 550px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FFFF66;overflow:hidden;

}

/* ----- PIE ----- */

#pie {width: 750px;height: 100px;background-color: #99FF66;overflow:hidden;

}

Cabecera

opcion 1

Contenidos

pie de pgina


5/17


-5-

En este caso flotamos la capa #menu a la izquierda combinndola con overflow:hidden

en la capa de #contenidos. Cuando usamos esta tcnica debe sealarse un valor para

width si queremos que todo funcione correctamente.

Diseando a tres columnasEl aspecto de un diseo a tres columnas lo podemos apreciar abajo

La propuesta es una extensin de la anterior con dos columnas flotando a la izquierda

Maquetado a tres columnas

body {width:750px;

margin:0 auto;margin-top:30px;


6/17


-6-

}

/* ----- CABECERA ----- */


/* ----- MEN ----- */

#menu {width: 200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;

background-color: #C0C0C0;float: left;}

/* ----- CONTENIDOS ----- */

#contenidos1 {width: 350px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FFFF66;

float:left;}

#contenidos2 {width: 200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FF99FF;overflow:hidden;

}

/* ----- PIE ----- */

#pie {width: 750px;height: 100px;background-color: #99FF66;overflow:hidden;

}


7/17


-7-

Cabecera

opcion 1

Contenidos 1

Contenidos 2

pie de pgina

Diseos fluidosComo ya hemos dicho estos diseos ocupan todo el ancho que tienen a su disposicin.

En el primer caso (a una columna) observamos que la diferencia estriba en permitir un

ancho libre

Maquetado a una columna fluida

body {margin:0;padding:0px;}

/* ----- CABECERA ----- */

#cabecera {height:150px;background-color:#333333;

}/* ----- MEN ----- */

#menu {height:40px;background-color: #C0C0C0;}

/* ----- CONTENIDOS ----- */

#contenidos {

min-height:450px; /* para navegadores modernos */height:auto !important; /* para navegadores modernos */


8/17


-8-

height:450px; /* para IE5.x e IE6 */background-color: #FFFF66;overflow:hidden;}

/* ----- PIE ----- */

#pie {height:100px;background-color: #99FF66;overflow:hidden;}

Cabecera

opcion 1

contenidos

pie

A dos columnas dejamos libre el ancho de la capa #contenidos

Maquetado a dos columnas fluidas

body {margin:0;margin-top:30px;padding:0;

}

/* ----- CABECERA ----- */

#cabecera {height:150px;background-color:#333333;}

/* ----- MEN ----- */

#menu {width: 200px;min-height: 500px; /* para navegadores modernos */;


9/17


-9-

height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #C0C0C0;float: left;

}

/* ----- CONTENIDOS ----- */

#contenidos {min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FFFF66;overflow:hidden;

}

/* ----- PIE ----- */

#pie {height: 100px;background-color: #99FF66;overflow:hidden;

}

Cabecera

opcion 1

Contenidos

pie de pgina

Finalmente a 3 columnas vamos a estudiar el caso en el que es la columna central(#contenidos1) la que ocupa todo el espacio restante

Maquetado a tres columnas fluidas

body {margin:0;

margin-top:30px;padding:0;}


10/17


-10-

/* ----- CABECERA ----- */

#cabecera {height:150px;background-color:#333333;}

/* ----- MEN ----- */

#menu {width: 200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #C0C0C0;float: left;

}/* ----- CONTENIDOS ----- */

#contenidos1 {min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FFFF66;overflow:hidden;

}

#contenidos2 {width:200px;min-height: 500px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 500px; /* para IE5.x e IE6 */;background-color: #FF99FF;float:right;

}

/* ----- PIE ----- */

#pie {

height: 100px;background-color: #99FF66;overflow:hidden;

}

Cabecera

opcion 1


11/17


-11-

Contenidos 2

Contenidos 1

pie de pgina

Ahora ponemos a flotar a izquierda y derecha las reas laterales y es la central la que

ocupa el espacio restante

Ejemplo de maquetado

Para practicar los diseos anteriores vamos a realizar un ejemplo cuya estructura

bsica vemos a continuacin

Hemos usado el ejemplo de 3 columnas fluidas realizando los siguientes cambios:

/* ----- CABECERA ----- */

#cabecera {height: 150px;background-color: #8B9CC7;background-image: url('Imagenes/fondo.jpg');

}


12/17


-12-

En la zona de cabecera colocamos una altura de 150 pxeles que es la altura de las

imgenes de cabecera y colocamos de fondo la imagen de un degradado denominado

fondo.jpg. No obstante ponemos un color de fondo parecido, al efecto de que rellene

el espacio mientras se cargan las imgenes.

El men y el rea de la derecha #contenidos2 toman un color de fondo similar al colorfinal del degradado para permitir continuidad. Ambas se disean con un ancho de 200

pxeles.

/* ----- MEN ----- */

#menu {width: 200px;min-height: 642px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 642px; /* para IE5.x e IE6 */;

background-color: #B6BAC5;float: left;}

/* ----- CONTENIDOS ----- */

#contenidos1 {min-height: 642px; /* para navegadores modernos */;height: 642px; /* para IE5.x e IE6 */;background-color: #FFFFFF;overflow: auto;background-image: url('Imagenes/lorem_ipsum.jpg');

color: #800000;}

#contenidos2 {width: 200px;min-height: 642px; /* para navegadores modernos */;height: auto !important; /* para navegadores modernos */;height: 642px; /* para IE5.x e IE6 */;float: right;background-color: #B6BAC5;

}

Como altura se ha considerado la de 642 pxeles que es la necesaria para las imgenesdel rea derecha

En la cabecera colocamos las imgenes que la completan incluso la parte inferior del

logo que va en la zona de mens


13/17


-13-

...

A la imagen de la derecha se le obliga a flotar en dicha posicin

#logoGobierno{float: right;

}

Podemos observar que en el rea central #contenidos1 se ha fijado la altura y se ha

puesto el overflow a auto con el fin de que aparezcan barras de desbordamiento

cuando sea necesario. Esto suele hacerse cuando se quiere limitar la altura de la

pgina con objeto de que se visualice fcilmente el pi de pgina.

El pi de pgina tiene las siguientes caractersticas

/* ----- PIE ----- */

#pie {height: 30px;background-color: #333333;overflow: hidden;color: #FFFFFF;font-weight: bold;font-family: verdana;font-size: 8pt;

text-align: center;vertical-align: middle;}

Observe un fondo oscuro, un color claro y una alineacin vertical y horizontal centrada

Los contenidos del #pie

Gobierno de Canarias


14/17


-14-

Comenzamos por decorar el men con una zona de bsquedas que incorpora una

edicin de texto y un botn

#busqueda {width: 200px;text-align: center;

}

#inputBusqueda {font-family: verdana;font-size: 8pt;width: 170px;

margin-top: 30px;}

#buttonBusqueda {color: #FFFFFF;border: 2px solid #FFFFFF;background-color: transparent;font-family: verdana;font-size: 8pt;font-weight: bold;width: 180px;margin-bottom: 30px;

margin-top: 10px;}

Completamos el rea con unos botones que incorporan un efecto rollover hecho en

javascript


15/17


-15-

style="border-width:0px;" />

Se elimina el borde para evitar que aparezcan los colores tpicos de los hiperenlaces

En el rea derecha vamos a colocar

imgenes centradas horizontal y

verticalmente en sendos div. Como hemos

estudiado en el curso el centrado vertical de

una imagen se consigue convirtiendo el rea

en una celda y aplicando vertical-

align:middle

Adems la imagen debe tomar display:block

.imagen {display:table-cell;width: 200px;height: 150px;

border: 2px solid #000000;vertical-align:middle;


16/17


-16-

background-color:white;}

.img {display:block;margin: auto auto;

}

.contenedor{margin-top: 5px;margin-bottom: 5px;

}

Puede observarse que el centrado horizontal se hace con margin: auto auto y que se

usa un div #contenedor para situar los mgenes entre imgenes

Completamos el diseo aadiendo relleno a la parte de los contenidos principales a fin

de observar las barras de scroll


17/17


-17-

En los recursos que puedes encontrar en la moodle estn las imgenes necesarias para

recrear el ejercicio

Documents

Maquetado de CSS