Avrei preferito colori diversi per blocchi diversi, comunque provo ad iniziare la marcatura.
E la cosa non e` "una cavolata"; e` una delle cose piu` complesse da realizzare con i CSS.
Ti sei gia` guardato in giro? Hai cercato tra i layout pronti? Alcune raccolte sono citate tra i "link utili", ma ne puoi trovare altre in giro per la rete.
Se trovi qualcosa di pronto e` sicuramente piu` semplice (anche se si dovesse adattare)
In casi cosi` complessi e` importantissimo iniziare con una marcatura corretta anche dal punto di vista semantico.
HTML:
codice:
<body>
<div id="wrapper">
<div id="colsin">
<div id="sinsup">
colonna sinistra - pezzo superiore</p>
</div>
colonna sinistra - pezzo centrale</p>
<div id="sininf">
colonna sinistra - pezzo inferiore</p>
</div>
</div>
<div id="main">
principale</p>
</div>
<div id="coldes">
<div id="dessup">
colonna destra - pezzo superiore</p>
</div>
colonna destra - pezzo centrale</p>
<div id="desinf">
colonna destra - pezzo inferiore</p>
</div>
</div>
</div>
</body>
nota che il pezzo centrale delle colonne non e` contenuto in un blocco separato. Si puo` fare, ma potrebbe essere piu` complicato del necessario
CSS:
codice:
/* Anzitutto i blocchi contenitori: */
body {
width: 100%; /* necessario se si vuole centrare il wrapper */
}
#wrapper {
width: ...; /* larghezza fissa oppure larghezza 100%, oppure max-width */
/* non definire height, altrimenti la cosa diventa troppo complessa */
background: grey; /* tutti i colori di prova - servono per capire come si espandono gli oggetti */
margin: 0 auto; /* per centrare dentro body, se si vuole */
}
#wrapper:after {
clear: both; /* necessario se deve starci qualcosa dopo; consigliabile comunque */
/* per renderlo cross-browser vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
}
/* Secondo: le divisioni principali */
#colsin, #coldes {
width: ...; /* va definita - puo` essere espressa in px o in em */
background: red;
position: relative;
}
colsin {
float: left;
}
coldes {
float: right;
}
main {
margin: 0 ???; /* misura uguale o poco superiore a width di coldes e colsin - stessa unita` di misura */
/* width e height non vanno definite */
background: yellow;
}
/* ora i blocchi interni */
#dessup, #desinf, #sinsup, #sininf {
width: 100%; /* tutta la larghezza della colonna */
height: ...; /* va definita (in px o em; anche in %, ma diventa piu` complicato) - oppure min-height */
position: absolute;
color: green;
}
#dessup, #sinsup {
top: 0;
left: 0;
}
#desinf, #sininf {
bottom: 0;
left: 0;
}
Naturalmente e` una bozza, che deve esere ancora rivista e corretta.
E magari occorre usare i posizionamenti anche per i blocchi principlai e non solo per i blocchetti agli angoli
Rispondi quotando
