Buongiorno a tutti!
E' la prima volta che tento di fare un'impaginazione con div e css... so che l'argomento è stato trattato e ho letto a destra e a manca ma il mio cervellino non ci arriva!
non capisco come costringere gli elementi della pagina ad allungarsi in altezza in base alla quantità di testo o di link inseriti in una fascia laterale. Sto' sicuramente sbagliando la struttura...
qui ho messo un'esempio con solo gli elementi principali per chiarezza:
qui
Se qualcuno sa suggerirmi...
Penso che dovresti dimenticare l'attributo position. Si puo` fare senza, ed eviti molti problemi.
Poi i vari blocchi che vanno allineati, devono avere tutti un
float: left;
(oppure right, ma inizia con il dare left a tutti).
Il footer, dovra` invece avere
clear: both;
per "chiudere" il float precedente.
Ci sono anche problemi di semantica: il menu` e` una lista, e come tale va realizzato tramite <ul> e[*]
Tra i "link utili", nella sezione layout, ci sono vari esempi di layout, fissi o fluidi, che ti possono servire come guida.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Intanto grazie mille.
Ma usando il float posso mettere i vari blocchi "flottanti" uno di fianco all'altro e poi sotto e così via? Cioè se metto un primo float left il successivo si andrà ad appoggiare sul primo e via così?
Vado a leggermi i link utili
No, i float non COPRONO altri elementi float. Eventualmente elementi NON FLOAT messi DOPO elementi float possono "sovrapporsi" se non si usano le regole corrette (margin o clear)
Ad esempio questo
Da il risultato mostrato in figura, poichè:Codice PHP:<html>
<head>
<style>
div#colonna1{float: left; width: 150px; background-color: #ccc}
div#colonna2{float: left; width: 250px; background-color: #99f}
div#colonna3{float: right; width: 100px; background-color: #ff9}
div#centro{margin-left:400px; background-color: #9f9; margin-right: 100px;}
div#sotto{clear: both; background-color: #f99}
</style>
</head>
<body>
<div id="colonna1">Colonna 1</div>
<div id="colonna2">Colonna 1</div>
<div id="colonna3">Colonna 3</div>
<div id="centro">Centro</div>
<div id="sotto">Sotto</div>
</body>
</html>
1) Colonna 1 è floattato e va a sinistra
2) Colonna 2 è floattato e si attacca a colonna 1 (tra floattati non si coprono)
3) Colonna 3 è flottato a destra
4) Colonna 4 non è floattato ma ha i margini a sinistra e destra sufficienti larghi proprio quanto la somma delle relative colonne (400px a sinistra e 100 a destra) evitando quindi sovrapposizioni
5) Sotto non è floattato ma ha "clear:both" che impedisce comunque qualsiasi sovrapposizione con elementi floattati sia a destra che a sinistra
P.S.
Ricorda, gli elementi float devono SEMPRE avere una larghezza DEFINITA (width). Per l'altezza non c'è problema poichè basta mettere sotto di loro un elemento con clear: both e sei a posto
scusa, dimenticavo l'immagine
Permessi di invio
Rispondi quotando