Ciao a tutti,
Non vorrei essere pesante ma il problema dell'altezza con i css e' un problema che mi tormenta da circa due settimane. Ho scritto molto ma vi prego di leggerlo con attenzione.
Ho un sito fatto a frames e dopo circa due anni e' arrivato il momento di ristrutturarlo. Ho pensato di buttarmi sul xhtml css e asp.
All'inizio ho pensato di strutturarlo secondo quando spiegato su questo articolo: http://pro.html.it/esempio/css/13/layout_pro.html.
Il quale prevede un box contenitore centrale,contenente due barre laterali ed un corpo centrale posizionati tramite il float: left. Tutti i box contenitori (html body box left middle right) hanno l'height settato al 100%. Le barre laterali hanno come immagine di sfondo la stessa del box contenitore.
Con explorer 6.0 e 5.5 per window per pc il tutto funziona bene le barre laterali arrivano a toccare la fine della pagina. Questi due browser non rispettano l'height del 100 % e se il contentuto del box centrale supera l'altezza prevista, il box contenitore si estende creando l'illusione che le barre laterali si allunghino.
Con Opera con Netscape, Mozilla e Explorer per Mac questo non avviene. L'oro rispettano l'altezza.
Ho pensato quindi di mettere la classica formulina min-height: 100%, height: auto !important, heghit: 100%.
Opera a questo punto funziona, se il conteuto del corpo centrale si estende oltre al 100%, il box contenitore si estende e crea l'illusione dell'allungamento delle barre laterali.
Mozilla e Netscape no, il box contenitore non si estnde e rimane al 100%.
Ho quindi pensato che essendo i div interni fissati con un float uscissero fuori da flusso e che quindi il box contenitore non li riconoscesse all'interno di se.
Ho quindi fatto la stessa cosa che si fa con i div posizionati in maniera assoluta, ho settato la pisizione del box contenitore con relative.
Netscape funziona ma Mozilla no!! Mozilla non considera i div con float left, all'interno del box contenitore.
Ho cambito a questo punto strategia
Ho messo un div contenitore centrato, ho posizionato la barra laterale con absolute e ho messo un div come corpo, avente come larghezza la differenza tra l'ampiezza del box contenitore e l'ampiezza della barra laterale. Esempio: box conenitore: 791px, barra laterale: 130px, box con i conenuti: 661px.
Ho anche aggiunto un margine-left: di 130px.
L'altezza del box del corpo centrale l'ho fissato min-height: 750px, height: auto !important, 750 height: 750px;
Al box contenitore non ho fissato nessuna altezza, il div del corpo centrale e' agganciato al div contenitore e quando il contenuto eccede i 750px tira il tutto e la barra laterale che ha lo stesso sfondo del conteniore arriva fino a dove finisce il contenuto.
Tutti browser funzionano explore 5.2 per mac no. Explore per mac e' differente da explorer per pc.
Non riconosce il min-height ma riconosce height: auto !important.
Puo darsi che abbia scritto delle cavolate ma mi piacerebbe avere una vostra oppinione in proposito.
Rispondi quotando
