Costruire div singoli e multipli con i CSS da inserire nel documento web. Gruppi di gabbie con i CSS

Potrebbe non esserci la stessa visualizzazione tra i differenti browser. Per tentare di risolvere questi problemi, sarà dedicata una parte, ma più avanti.

Box centrati

La gabbia centrata nella pagina, non presenta nessuna particolarità; vediamo il codice per fare in modo che essa sia posizionata al centro sia con IE che con altri browser, quali Mozilla ecc... Ecco il file di esempio e si provi a visualizzarlo con i vari browser.

body {
margin: 0px;
padding: 0px;
font-family: Verdana, sans-serif;
font-size: 12px;
background-color: #e6e6e6;
text-align:center;
}
#content {
padding: 10px;
margin:10px auto 10px auto;
background-color: #fff;
border: 1px solid #000;
width: 70%;
text-align:left;
line-height:20px;
}

#content è il nome che ho dato al box e che deve avere un nome univoco, quando nella pagina ce ne sono altri. In pratica nel <body> viene assegnato un id che si riferisce solo a quel box. Analizzando il codice, comunque, si deve porre l' attenzione sulla dichiarazione fatta per il body dove è scritto: text-align:center; questo serve a posizionare al centro tutti gli elementi nella pagina. Questo non è sufficente a mettere al centro della pagina il box visualizzandolo con altri browser; infatti nel #content ho scritto, per il margin: margin:10px auto 10px auto, che sta per: 10 pixel dall'alto, auto per i lati destro e sinistro, e 10 pixel dal basso. Avendo dato una misura in %, come larghezza, la gabbia si adatta per le misure orizzontali.

Gabbie centrate

Anche il layout con due gabbie centrate non presenta nessuna particolarità; una gabbia si trova sull' altra a causa del flusso. Entrambe hanno lo stesso stile (ma diverso nome del #div). Ecco il file di esempio.

Layout a 2 colonne

Questo tipo di layout potrebbe essere usato per presentare del contenuto utilizzando un menu laterale posto sulla destra. Il contenuto della gabbia centrale ha una larghezza "fluida" ed un abbondante margine destro, mentre la gabbia per il menu, posizionata in maniera assoluta, è posizionata in quel margine. Siccome una gabbia posizionata in maniera assoluta sta fuori del flusso, le informazioni del menu possono essere specificate prima nell' XHTML; ciò migliorerebbe la funzionalità nei browser a riproduzione sonora o testuale. Ecco il codice delle 2 gabbie:

<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: Verdana,sans-serif;
font-size: 12px;
color: #000;
background-color: #e6e6e6;
}
#content {
padding: 10px;
margin: 5px 122px 5px 5px;
background-color: #fff;
border: 1px solid #000;
line-height:20px;
}
#menu {
position: absolute;
top: 0px;
right: 0px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width:90px;
}
</style>

e questo è il codice usato nel <body>:

<div id="menu">
Lorem ipsum dolor.........
</div>
<div id="content">
Lorem ipsum dolor sit amet,
</div>

E questo è il file di esempio.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati