sovrapposizione mo-search/immagine (RISOLTO)

[chromis62]

Ciao a tutti, e come prima cosa... abbiate pazienza se le domande sono sciocche ma sono proprio novellino oltre che nuovo del forum.
Sto preparando la mia pagina partendo dal template ra-northsea che ho scaricato. Nella parte alta del template originale ci sono 5 blocchi, tra cui Logo e modulo di ricerca; immediatamente sotto un blocco contenente una immagine. Volevo ottenere l'immagine grande come tutta la testata con sovrapposto il logo, una intestazione scritta e il bottone di ricerca. Per l'immagine OK, l'ho sostituita e ridimensionata senza problemi, ma copre tutto il resto. Ho provato (goffamente) ad inserire nel CSS lo z-index (dato che assegnava già un positio: relative) assegnando un valore 50 al box dell'immagine e valori minori agli altri (es. box1 del logo z-index: 10;). Ovviamente non ottengo risultati    .  Conoscete qualche risorsa a prova di tonto per capire bene come ordinare la visualizzazione degli oggetti rappresentati (layers li chiamerei in un CAD)?
Grazie 1000!
Stefano

[.: BlackHat :.]

Hai provato a mettere l'immagine grande come sfondo del div che contiene tutti e 5 i blocchi?
es:

Codice: [Seleziona]

<div id="top">
<div id="top-1"></div>
<div id="top-2"></div>
<div id="top-3"></div>
</div>

in questo modo hai top-1-2-3 allo stesso livello mentre hai "top" che contiene tutti gli altri. Se dal css gli metti la regola a "top"
background: url(../images/tuaimmagine.jpg);
e poi a top-1 gli metti la stessa regola di sopra dovresti avere l'effetto che vuoi...nel senso che qualla del div interno top-1" va a coprire quella del div più esterno, ovviamente solo nella porzione/dimensione del div top-1.
spero di essere stato chairo

[chromis62]

Grazie per la celerità! Ho capito il concetto (sei stato molto chiaro) ma mi sa che per applicarlo devo studiare un po'. Infatti il div non compare nel codice (ti riporto l'inizio):

body {
    font-family: verdana;
   color: #fff;
   margin: 0px;
   background-image: url(../images/back.png) ;
}
#site {
    position: absolute;
   width: 798px;
   left: 50%;
   margin-left: -399px;
    margin-top: 10px;
   background-color: #FFF;
}
#box1 {
    position: relative;
   z-index:10;
   width: 236px;
   height: 150px;
   background-color: #FFF;
}
#box2 {
    position: relative;
   width: 281px;
   height: 150px;
   margin-left: 236px;
   margin-top: -150px;
   background-image: url(../images/back2.png);
}

e così via. Intanto studio un po' i "div" 
grazie

[.: BlackHat :.]

emh...la dichiarazione dei div, come li ho scritti io, non li devi cercare nel css, ma nell'index.php. Probabilmente alcuni sono fatti, altri da fare e con nomi diversi. Se sei alle prime armi, nn sarà facilissimo, ma neanche impossibile.

p.s. quando inserisci del codice, tra i pulsanti vari che trovi nell'editor c'è nè uno con questo simbolo '#'. usa quello

[chromis62]

ehm... scusate; bene, faccio tesoro di queste info. Sono un vero principiante, la mia ultima esperienza di codici fu in basic....Poi smanazzo CAD e Gis ma quello è un altro paio di maniche. Visto che il lavoro langue tantovale imparare cose nuove dai giovani    Intanto ho risolto il mio problema contingente indicizzando i box con numeri negativi (z-index: -1, -2 ecc) e scoprendo che per avere un box trasparente basta dirgli "transparent"  ...è un mondo meraviglioso! Un pezzetto per volta arrivo in fondo.
Grazie ancora!
Stefano