menu a fondo pagina - problemi con opera e float

[awd]

Ho un layout a due colonne float. Voglio porre un menu alla fine dei contenuti, quindi la colonna principale che si trova sulla sinistra! L'unico metodo che io sappia per averlo sempre in fondo alla colonna è il posizionamento assoluto!
Dopo molta fatica ci sono riuscito, in allegato l'immagine di come appare correttamente e funziona su tutti i browser tranne opera di cui posseggo la versione 7.
In realtà ho dei problemi anche con IE, ma vediamolo dopo.

In questo menu ho un DIV con position: absolute;, un UL flottato a destra, e dei LI flottati a sinistra!
Il problema con opera è che non accetta questo doppio float e mi mette i LI uno sotto l'altro!
come posso risolvere?

Il problema con IE invece è che, il menu funziona correttamente, però mi sparisce il colore di sfondo del titolo h3 che si trova all'inizio dei contenuti!

Probabilmente sono entrambi bug, mi farò il giro di tutte le risorse di mia conoscenza, se qualcuno potesse aiutarmi ve ne sarei grato!

[andrea.paiola]

innanzitutto non usare il posizionamento assoluto... guarda questo layout a 2 colonne:
http://www.nexus6design.com/w3au/

dopo che hai fatto le modifiche poi ti aiuto sul resto

[thomas_anderson]

Puoi usare il posizionamento assoluto, a patto ovviamente di impostare con position: relative il blocco contenitore. In questo modo ottieni un posizionamento contestuale, e puoi posizionare gli elementi a partire dal blocco contenitore. un abbinata float - pos. assoluto è un pò insolita. probabilmente è questo il problema.

leggi qui:
http://nontroppo.org/wiki/Opera7CSSIssues

[awd]

Originariamente inviato da andrea.paiola
innanzitutto non usare il posizionamento assoluto... guarda questo layout a 2 colonne:
http://www.nexus6design.com/w3au/

dopo che hai fatto le modifiche poi ti aiuto sul resto

mi spiace ma del tuo metodo di scrivere i css ci capisco poco, non puoi esplicitare?

Originariamente inviato da thomas_anderson
Puoi usare il posizionamento assoluto, a patto ovviamente di impostare con position: relative il blocco contenitore. In questo modo ottieni un posizionamento contestuale, e puoi posizionare gli elementi a partire dal blocco contenitore. un abbinata float - pos. assoluto è un pò insolita. probabilmente è questo il problema.

leggi qui:
http://nontroppo.org/wiki/Opera7CSSIssues

in realtà non l'ho messo relativo al contenitore diretto ma a quello antenato, ossia il container, altrimenti non riuscivo a posizionare correttamente il menu!

Per IE ho aggiunto un position:relative al titolo H3 e sembra funzionare, anche se non sono soddisfatto di dover usare questo hack!
adesso guardo il link x opera, grazie!

[andrea.paiola]

tutto il codice CSS relativo al layout è questo:

http://www.nexus6design.com/w3au/stili/layout.css

body {margin: 0; padding: 0; width:99.8%}
#corpo {width: 100%;float: left;margin: 0 -1px;display: inline}
#menu_laterale {float: left;width: 28%}
#contenuti {margin-left: 30%;padding-left: 1px}
#intestazione {width: 100%;margin: 0 -1px}
#intestazione h1{padding-left:2em;height:2em;}
#pie-di-pagina {clear:left;width: 100%;margin: 0 -1px}
#menu_laterale, #contenuti, #pie-di-pagina {padding-top: 0.5em;padding-bottom: 0.5em;}
div p {margin: 0;padding:0.5em 1em;}

ul#menu_principale{margin: 0;padding: 0; text-align: right; padding-right: 2em}
ul#menu_principale li{display: inline}
ul#menu_principale li a{text-decoration: none;padding: 0 0.5em}
ul#menu_principale li#activelink{padding: 0;}

#briciole{height: 1.5em; width: 99%}
#briciole a{padding-left:1em}

h2{padding-left:2em}
h3{padding-left:2.2em}

div#menu_laterale h2{margin:0;padding:1em; padding-left:0; padding-top:0.2em;}
div#menu_laterale h3{margin:0;padding:0;padding-top: 0.6em}

div#menu_laterale ul{margin:0; padding:0; padding-left:2em}
div#menu_laterale li{padding:0.15em;}
div#menu_laterale a{display:block;padding-top:0.1em}

#pie-di-pagina li{display:inline}

coem vedi niente posizionamento assoluto: solo float

[awd]

il menu in questione non si trova nel footer, alal fine delle sue colonne, bensì solo sulla colonna dei contenuti e deve trovarsi sempre in fondo anche se il contenuto non riempie tutta la pagine (caso cmq difficile). Questo vorrei che sia chiaro!

per opera ho trovato questo http://www.positioniseverything.net/...pp-floats.html

[awd]

ecco due screenshot di opera, il problema non l'ho ancora risolto.

così appare se nn definisco la width del div contenente il menu
http://alexwd.altervista.org/_altervista_ht/opera1.gif

così invece definendola
http://alexwd.altervista.org/_altervista_ht/opera2.gif

i codice degli UL e LI del menu è questo:

div#menu_bottom ul {
	float: right;
	list-style: none;
	height: 42px;
	margin: 0;
	padding: 0;
}
div#menu_bottom li {
	float: left;
	margin: 4px 2px 0;
}

magari mi sfugge qualcosa!

[thomas_anderson]

hai provato ad impostare un height anche per li?

[awd]

Originariamente inviato da thomas_anderson
hai provato ad impostare un height anche per li?

peggio!

spiego un po' meglio di cosa si tratta questo menu!
Ho presentato il codice in un post sul forum diodati http://forum.diodati.org/messaggi.asp?f=1&id=10654
Il menu in questione nasce come testuale, questo il suo contenuto:

* Torna in alto (ALT+T)
* Vai alla pagina successiva (ALT+W)
* Torna alla pagina precedente (ALT+Q)
* Torna al menu della sezione (ALT+C)
* Torna al menu principale (ALT+Z)

le ultime due voci sono nascoste in visuale. per le prime 3 l'idea era di usare una image replacement in modo da avere un'immagine in visuale e il testo in versione senza css! purtroppo non so riuscito a trovare una tecnica soddisfacente, allora sono passato, ahimè, ad usare delle immagini, nascondendo il testo!

[awd]

up