Salve a tutti,
Ho un problemone enorme generato da un sito creato con Wordpress. So che questo � un forum legato ad html e css [e altri linguaggi] e che i cms non vengono qui trattati, ma questo problema � inerente proprio il CSS.

Sto tentando di modificare un template in maniera tale da adattarlo alle mie esigenze. Pur sapendo costruire siti in html e css non sono ancora molto pratico di siti dinamici costruiti partendo da zero [questo � ahim� il motivo per il quale utilizzo Wordpress].

Il sito in questione � quello del mio portfolio personale [sono un motion graphics designer]. Nella home mi ritrovo con una griglia di immagini e testi, in cui ciascun elemento porta alla pagina inerente quel particolare progetto.
Il template fa esattamente quello che voglio, solo che la griglia sulla home fa troppo "ragioniere" e poco "creativo". Vorrei utilizzare quella figata di script che si chiama "Masonry" che permette di creare un pattern di immagini pi� o meno grandi riempiendo tutto lo spazio. I miei amici pi� esperti la fanno abbastanza facile, dicendo che basta modificare qua e la... in realt� prendo questo problema come un modo per imparare qualcosa di nuovo. Senza addentrarmi nel "Masonry" script, cosa alla quale arriver� con moltissima calma forse in un'altra vita, quello che sto cercando di fare � porre i testi di descrizione delle immagini al di sopra delle stesse. Una volta fatto questo, con l'aiuto di qualche divinit� dell'informatica riuscir� a far apparire i testi con qualche bell'effetto solo quando ci si passa sopra col mouse. Html e css sono per� gli stessi sia in Wordpress che al di fuori di esso e quindi porgo a voi il quesito... Come faccio a portare il div contenente il testo al di sopra delle immagini?

Il sistema nel sito � abbastanza semplice... ho un <div> che contiene tutto il resto e che � allineato al centro della pagina. All'interno di esso una serie di <div>, uno per ogni progetto. Ogniuno di questi div interni � a sua volta composto da due <div>... uno contente l'immagine e uno il testo.
Voi mi direte... allora basta utilizzare il parametro z-index, il quale permette di specificare su quale "livello" piazzare ogni elemento. In realt� non � cos� semplice, in quanto questo parametro funziona [da quanto ho capito] solo se il parametro "position" del div contenente l'immagine � settato su "absolute". Il problema che ho col template � che settando questo parametro in questo modo tutte le immagini vengono poste una sull'altra [questo perch� per intanto ho ignorato il div contenente il testo attraverso il parametro display: none;]. Se invece il testo fosse visibile la griglia originale si sfalderebbe tutta.

Ho preparato un piccolo esempio in maniera tale da capire meglio di cosa sto parlando:

codice:
<html>    <head>
        <title>PROVA CON Z-INDEX</title>


<style>
    .tutto{
background-color: gold;
width: 900px;
height: 100%;
position: relative;
margin: 0 auto;
}


    .sotto{
position: absolute;
width: 280px;
height: 280px;
background-color: #fff;
}


    .sopra{
position: relative;
width: 280px;
height: 280px;
    }


    .container{
padding: 0px;
position: relative;
    }


    .interno{
float: left;
padding: 10px;
position: relative;
    }
</style>


    </head>
    <body>
<div class="tutto">


<div class="container">


<div class="interno">
<div class="sotto">
    
</div>
        
<div class="sopra">
    Ciao Ragazzi!
</div>
</div>


<div class="interno">
<div class="sotto">


</div>
        
<div class="sopra">
    Funziona?
</div>
</div>


<div class="interno">
<div class="sotto">
    
</div>
        
<div class="sopra">
    Prova
</div>
</div>


<div class="interno">
<div class="sotto">
    
</div>
        
<div class="sopra">
    Uno
</div>
</div>


<div class="interno">
<div class="sotto">


</div>
        
<div class="sopra">
    DUE
</div>
</div>


<div class="interno">
<div class="sotto">
    
</div>
        
<div class="sopra">
    TRE
</div>
</div>


</div>


</div>
    </body>
</html>
Come si nota .sotto ha come parametro position:absolute; in quanto cambiando questo con "relative" i <div> .sopra smettono di stare "sopra".

Se volete posso postare l'indirizzo del mio sito in maniera tale da provare a capirci qualcosa di pi�... Ispezionando gli elementi � possibile vedere come questo sia costruito.
So che questo � veramente un piccolo passo per uno che vorrebbe arrivare a creare una griglia "Masonry" modificando un template di Wp, ma come dice zio Paperone "Per fare i miliardi bisogna partire dai penny".
Scherzi a parte... il web design � fatto di piccole cose messe insieme, quindi un pezzo oggi, uno domani fra qualche centinaio d'anni dovrei essere in grado di mettere insieme qualcosa di decente

Grazie mille a tutti quelli che vorranno darmi un aiuto... molto molto apprezzato
Spero che questo possa essere d'aiuto anche ad altri neofiti come me!

Ciao a tutti!