layout elastico e z-index

[elenagb]

Ma lo z-index funziona tra due div di un layout
completamente elastico? Se non funziona come faccio a mettre un div davanti all''altro
(o dietro che è la stessa cosa)?

[emnlmn]

Lo z-index si può applicare a tutti i blocchi posizionati in modo non "static" (che per intenderci e il normale posizionamento dei blocchi nel flusso), indipendentemente dalle loro dimensioni.
La tua richiesta non può avere una sola risposta in quanto "posizionare un div davanti all'altro" può essere inteso e realizzato in varie maniere.
Ti ricordo che gli elementi scritti dopo nel codice xhtml stanno ad un "livello Z" più alto di quelli che li precedono, se lo z-index non è stato assegnato. Inoltre i blocchi position:relative e position:absolute vengono portati ad un livello più alto dei normali elementi static e quindi possono coprirli (se ovviamene ne cambi il posizionamento tramite le proprietà top right bottom left).
Ricorda inoltre che se intendi utilizzare position:absolute per portare davanti il tuo div, il suo posizionamento tramite le proprietà viste prima fà riferimento al vertice in alto a sinistra del bordo esterno del blocco genitore, posizionato relative o absolute, più vicino.

Se non sei riuscito a capire cosa fare, dammi qualche informazione in più su cosa desideri ottenere e vediamo qualè la soluzione più adatta.

[elenagb]

Credo di aver capito, ma c'è qualcosa che non va.
Volevo creare 2 colonne di foto (sostituendo una tabella). Le foto sono tante, divise per soggetto (descritto con il p) e quindi ogni paragrafo dovrebbe avere il suo gruppo di foto sotto, distribuite su due colonne

<div id="photo">
<p class="titolo"><span>girocollo con piastra d'argento</span></p>
<div id="sinistra"><a href="cerchio-con-argento-piccola.jpg"><img src=cerchio
con-argento-piccola.></a></div>
<div id="destra"><a href="cerchio-con-argento-particolare-piccola.jpg">
<img src=cerchio-con-argento-particolare-piccola.jpg></a</div>

</div>

Il css è:

#photo {
background-image: url(photo.gif);
background-repeat: repeat;
width: 25.2em;
border-right: 0.1em solid #009999;
border-left: 0.1em solid #009999;
margin-top: 0em;
font-size: 1em;
padding-bottom: 1em;
padding-top: 1em;
position: relative;
}

#photo .titolo {
color: #ffffff;
text-align: center;
padding-top: 1em;
}

#sinistra {
margin-left: 0em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}

#destra {
margin-top: 0;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}


Ogni foto di sinistra andrebbe a fianco di un'altra a destra naturalmente, ma non so come fare.
Quella di sinistra non ha problemi perchè si posiziona naturalmente a sinistra. Il problema è quella di destra.
Non sono stata a scrivere tutto il codice del sito che ha un container, un footer ecc. e che stanno al loro posto e vanno bene. Non sono del mestiere ma ci provo. Cosa posso fare? Grazie

[emnlmn]

Ciao, non ho molto tempo ma vedrò di provare a darti una soluzione utilizzabile.

A parte alcuni errori di sintassi e semantici nel codice, le immagini non si posizionano come tu desideri perchè semplicemente non è stato detto loro di farlo. I div, senza particolari proprietà css, si posizionano uno sotto l'altro nel flusso della pagina. La soluzione più semplice è usare la dichiarazione float:left; nel css associato ai contenitori da affiancare.

Ma vediamo di farti un esempio:

===================================================================
Xhtml:
<div id="photo">
  <h3>Girocollo con piastra d'argento</h3>
  [img]cerchio con-argento-piccola.jpg[/img]
  [img]cerchio-con-argento-particolare-piccola.jpg[/img]
</div>


#photo {
background-image: url(photo.gif);
background-repeat: repeat;
width: 25.2em;
border-right: 0.1em solid #009999;
border-left: 0.1em solid #009999;
margin-top: 0em;
font-size: 1em;
padding-bottom: 1em;
padding-top: 1em;
position: relative;
}

h3 {
clear:left;
color: #ffffff;
text-align: center;
padding-top: 1em;
}

#foto a {
float:left;
margin-left: 0em;
padding:1em;
}

Dovrebbe fare al caso tuo.

[elenagb]

ok, è quasi perfetto. L'unico neo è che le due foto non sono centrali e quindi sono sfalsate rispetto all' h3 che è centrale. Devo arrangiarmi mettendo un margin left oppure c'è una soluzione per mettere centrale anche photo a?

[emnlmn]

Metti entrambe le foto in un div e dagli margin:0 auto.

[elenagb]

Mi sa che ho cantato vittoria troppo presto. Quando le foto sono più di due guarda che cosa succede. Questo è il link del sito:

http://www.annodareconstile.altervista.org/

L'unica galleria attiva è La Tribu' e c'è un gruppo di 4 foto, prova a cliccare su quelle.