In questo topic, ne ho discusso anch'io, e nel passo della guida linkata da Gabar-el il discorso del footer posizionato in modo assoluto è molto chiaro... io personalmente sono perplesso...
In questo topic, ne ho discusso anch'io, e nel passo della guida linkata da Gabar-el il discorso del footer posizionato in modo assoluto è molto chiaro... io personalmente sono perplesso...
clear:all; ?
esiste? ...metti "both"
Fantasupermegafavolipermeramagicultra irresistibili
4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!
"... a quell'età ... bastava un dito per fare la pace ..."
fotine
e va beh... ho sbagliato...
Vediamo se riesco a risolverti il problema, il css che hai mostrato ha errori e mancanze.
La struttura della pagina sembra andar bene ma ricontrolla tutto per sicurezza:
<body>
<div id="container">
<div id="header">...</div>
<div id="visual">...</div>
<div id="wrapper">
<div id="colonna-1">...</div>
<div id="colonna-2">...</div>
<div id="colonna-3">...</div>
</div>
<div id="footer">...</div>
</div>
</body>
Il layout a tre colonne fisse è molto semplice: tramite css devi far flottare le 3 colonne a sinistra, o a destra - in basa alla successione che vuoi ottenere; ogni colonna deve avere la sua dimensione in px (width). Le tre colonne vanno inserite all'interno di un div (qui "wrapper") che deve avere width esattamente pari alla somma delle tre colonne (compresi margini e padding) altrimenti le colonne si posizionano una sotto l'altra (se width è inferiore) oppure non risultano perfettamente centrate (se width è superiore) all'interno del div che le contiene ("wrapper" appunto).
Cosa importante a questo punto è assegnare overflow: hidden a wrapper, questo farà sì che wrapper avrà sempre la lunghezza della colonna più lunga; puoi quindi dargli come background un'immagine che ripetuta verticalmente disegni letteralmente le colonne. Infine clear: left (o right, o both) al footer che serve per posizionarlo sotto gli elementi flottanti.
Togli tutti i posizionamenti assoluti e relativi che non servono per realizzare questo layout e togli anche questo: body>div#container{height:auto;min-height:100%}.
Facci sapere! Ciao
Il funzionamento è semplice... ma per me "wrapper" è inutile ...soprattutto quando c'è "container".Originariamente inviato da ambixo
Vediamo se riesco a risolverti il problema, il css che hai mostrato ha errori e mancanze.
La struttura della pagina sembra andar bene ma ricontrolla tutto per sicurezza:
<body>
<div id="container">
<div id="header">...</div>
<div id="visual">...</div>
<div id="wrapper">
<div id="colonna-1">...</div>
<div id="colonna-2">...</div>
<div id="colonna-3">...</div>
</div>
<div id="footer">...</div>
</div>
</body>
Fantasupermegafavolipermeramagicultra irresistibili
4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!
"... a quell'età ... bastava un dito per fare la pace ..."
fotine
Sì è vero, si può rinunciare a uno dei due div, poi dipende dalla grafica del sito.
Io generalmente non uso il div per centrare la pagina ma piuttosto html e body.
Permessi di invio
Rispondi quotando