div sotto immagine

[barnico]

chiedo scusa per il titolo poco descrittivo, io ho un div dove all'interno ho unaltro div allineato a destra e all'interno di questo div cè una immagine poi ho unaltro div con position:absolute e top:50px e lo sfondo di questo div e colorato giusto per aver una linea orizzontale che taglia pe intero il div principale, solo che quando passa sopra l'immagine l'immagine rimane sotto io vorrei fare in modo che la parte che passa sopra l'immagine andasse sotto l'immagine cioè che l'immagine venisse sopro, (scusate se mi spiego come un papiro del 400); ho provato ad usare il z-index ma con le immagini credo non funzioni come posso fare?

[barnico]

ho risolto inserendo z-index: -1; solo che funziona con ie, mentre con firefox sparisce proprio,
qualcuno ha un'altra soluzione?

[Mich_]

Purtroppo non sono un archeologo, per cui non ho capito.

Prova a postare il codice HTML+CSS del pezzo in questione (usa il bottone "#" per inserire il codice, cosi` la formattazione viene mantenuta). Posta anche la DTD (il DOCTYPE) che usi.

[barnico]

ho un div che contiene come sfondo una immagine, poi ho un'altro div con sfondo colore di altezza 2 e che praticamente diviene una linea orizzontale che passa anche sopra il div immagine, solo che vorrei che l'immagine si trovasse sopra la linea non sotto.

[barnico]

questo è il codice

<div> <div style="margin-top:0px;margin-bottom:0px;margin-left:20px;margin-right:auto;	width:300px;height:80px;float:left;background:url("../IMG/logo.gif") no-repeat 0 0;border:0px solid #804040;"></div> <div style="clear:both;display:block;height:2px;background-color:#dbd2a4;overflow:hidden;margin-bottom:0px;margin-top:0px;position:absolute;top:65px;left:0px;width:935px;z-index: -1;"></div> </div>

[Mich_]

Quando si sviluppa, non si puo` far ricorso a codice offuscato o CSS embedded: complicano la vita al programmatore.

Quindi per prima cosa trasformo il tuo codice in un codice umano:

<div class="esterno"> 
  <div class="interno1">
    

1 ci scrivo qualcosa altrimenti il blocco sprisce</p>
  </div>
  <div class="interno2">
    

2 ci scrivo qualcosa altrimenti il blocco sprisce</p>
  </div>
</div>

CSS:
.interno1 {
  margin-top:0px;
  margin-bottom:0px;
  margin-left:20px;
  margin-right:auto;
  width:300px;
  height:80px;
  float:left;
  background:url("../IMG/logo.gif") no-repeat 0 0;
  border:0px solid #804040;
}
.interno2 {
  clear:both;
  display:block;
  height:2px;
  background-color:#dbd2a4;
  overflow:hidden;
  margin-bottom:0px;
  margin-top:0px;
  position:absolute;
  top:65px;
  left:0px;
  width:935px;
  z-index: -1;
}

A questo punto ho notato che nel tuo codice fai uso errato delle virgolette, con conseguente sintassi sbagliata (non puo` funzionare).

Altra cosa: il float e il clear sono in contasto con il position: o sono ambedue posizionati o ambedue non posizionati: se devono sovrapporsi devono essere ambedue posizionati.

Non puoi usare position:absolute in un blocco all'interno di un blocco non posizionato. Prima di usare i posizionamenti, devi conscerli meglio: come minimo studia:
I posizionamenti assoluti
Capire i posizionamenti relativi


Non tutti i i brwoser accettano z-index negativi: usa solo valori positivi, e per sicurezza mettili in ambedue i blocchi.

[barnico]

ti ringrazio proprio tanto, sei stato proprio di aiuto ho seguito quello che hai detto, e tutto funziona.