div help

[wiko]

salve a tutti,
ho un problema con le div che non riesco a risolvere.
ho una div in z-index:1 height:500px seguita da un'altra div z-index:2 top:-500px che si deve sovrapporre alla prima.
Il problema è che nel "tirare su" la seconda div mi rimane sotto di essa lo spazio che avrebbe dovuto occupare se non avessi messo top:-500px.
questa cosa è abbastanza fastidiosa soprattutto perchè le dimensioni di spostamento sono grandi e vistose.
Conoscete un modo per fare la stessa cosa senza avere questo problema?
grazie

[Jarno]

la questione dei "position" è molto caxxuta ...per questo non li uso quasi più...

se dai position:absolute ad entrambi i box?

[wiko]

lo farei... ma siccome nel sito poi ci sono immagini varie inserite in una tab (anche i 2 div sono dentro la tab) rischierei che tipo in iexplorer vedrei le div allineate in un modo e in firefox in un altro.. la cosa è fastidiosa...
però è un po assurdo che le div si comportino in questo modo.. non fanno una vera e propria traslazione!

[Jarno]

purtroppo la logica del position:relative è giusta così
l'oggetto, per l'impaginazione, è come se fosse nella sua posizione originaria
ma l'immagine viene traslata

l'unico modo è usare position:absolute almeno nel secondo box... non vedo che problema ci sia con l'eventuale table presente all'esterno..

[wiko]

il problema è che..
se metto un absolute alcuni browser mi interpretano la posizione in un modo e altri in un altro..
amenochè non ci sia un comando per metterla al center e poi abbassarla dal top; allora li cambierebbe qualcosa solo in height (la pagina è tutta centrata).. non so se mi sono spiegato

[Jarno]

facci vedere qualcosa

[wiko]

eccovi:
http://wiketto.iitalia.com/prova.htm
2 cose però:
1-l'immagine "content image" deve rimanere tale e non diventare uno sfondo perchè è mappata (nel sito completo)
2-la pag non deve contenere scrollbar verticali perciò non si può fissare l'height

[Jarno]

se l'altezza del div con il testo fosse fissa il problema è facilmente risolvibile (con l'overflow), ma presumo che tu voglia un'altezza flessibile

        <td bgcolor="#cccccc"  style="background-color:#222; position:relative;" >
    [img]pic/content.gif[/img]

<div style="background-color:#666; position:absolute; left:0px; top:0px; z-index:2;" > 

così...che è come dicevo ....funziona

[wiko]

hai provato con firefox?
con firefox non mi funziona.. con ie si.. prova

[Jarno]

beh semplice.... i box in FF hanno configurazioni più articolati, quindi per raggirare la "incompatibilità" tra TD e DIV basta modificare così:

d<td bgcolor="#cccccc"  >
<div style="background-color:#222; position:relative;">
[img]pic/content.gif[/img]
<div style="background-color:#666; position:absolute; left:0px; top:0px; z-index:2;" >

blablacontent

blablacontent

blablacontent

blablacontent

blablacontent

blablacontent

blablacontent


blablacontent

blablacontent


</div>
</div>
</td> 

va bono?