cornice SOPRA all'immagine

[simoneudine]

Ciao ragazzi, ho un problemino che mi assila e non riesco a risolvere.

Devo applicare una cornice sopra ad una serie di immagini di dimensioni differenti e non riesco a capire dove sbaglio.
Sono arrivato a concludere che ci vogliono due DIV annidati, il primo id che contiene l'immagine, e il secondo class che contenga la cornice. Il secondo però dev'essere a sua volta composto da almeno 8 DIV al suo interno (sopra, sotto, destro, sinistro, angoli). Le parti centrali quindi (sopra, sotto, destra, sinistra) devono essere liquide in modo da adattarsi alla larghezza del DIV che le contiene (e quindi alla larghezza immagini).
Ho letto anche questo articolo

http://css.html.it/articoli/leggi/21...tto-cornice/3/

ma credo non faccia al mio caso perche la PNG deve avere le stesse dimensioni delle immagini e non si adatta in automatico a tutte le foto che ho.
Per ora, prendendo spunto da uno script in rete, sono riuscito a fare una cosa del genere ma mi sono bloccato
HTML

<div id="tabella_b">[img]foto.jpg[/img]  </div> 

CSS

div#tabella_b {     
margin-top: 1em;     
margin-left:auto;     
margin-right:auto;     
margin-bottom: 2em;     
padding:0 0 12px 0;     
text-align:center;     
z-index: 1;     
position: relative;  }  
div#tabella_b img {     
position: relative;     
top:20px;     
border: 1px solid;     
border-color: #CCC #CCC #AAA #CCC;     
padding: 7px;     
background: #f6f6f6;     
background-image:url(1.png);     
background-position: left;     
background-repeat:repeat-y;      } 

Il risultato lo trovate qui

Sapete indicarmi la strada giusta da seguire? C'e qualche nuova tecnica (compatibile anche con IE vecchi) che mi sono perso? GRAZIE a tutti quelli che mi daranno una mano

[simoneudine]

nessuno ha qualche idea?

[Mich_]

Non ho capito cosa vuoi ottenere.

Parli di "cornice sopra l'immagine". Vuoi dire che devi sovrapporre due oggetti di cui quello cn la cornice deve stare sopra a quello con l'immegine oppure che la cornice sta solo nella parte superiore?

E non puoi pensare una cornice attorno all'oggetto immagine?

Tornando al tuo codice:
Ho visto che hai messo un'immagine di sfondo sulla parte sinistra: e` quella che devi vedere? E come?

Hai provato a vedere cosa susccede se lasci tutto cosi` cambiando il link all'immagine (in modo che non trovi l'immagine e faccia vedere quello che ci sta sotto)?

[simoneudine]

Scusami mi sono espresso male. Intendevo dire sopra nel senso di z-index non "top"...
La voglio applicata sopra come un livello di photoshop, due oggetti sovrapposti.

Ho visto una cosa simile fatta con javascript ma sono quasi sicuro che si possa fare con CSS, non capisco dove stia il problema, Z-index è come se venisse ignorato (uso firefox quindi dovrebbe essere supportato) ma comunque, prima di arrivare a questo non capisco come distribuire le 8 mini immagini al loro posto attorno alla foto...

Nel mio codice se tolgo l'immagine si vede solo la strisciolina che gia si vede adesso li dove dev'essere.

Grazie

[Mich_]

Non puoi mettere un oggetto interno al di sotto dell'oggetto che lo contiene.

Il tuo problema si risolve racchiudendo la cornice e l'immagine dentro il contenitore, dando posiz. assoluta ai due e lavorando con z-index:

HTML:
<div id="tabella_b">
  [img]foto.jpg[/img]
  [img]cornice.jpg[/img]
</div>


CSS:
div#tabella_b {     
  margin: 1em auto 2em auto;     /* non so se necessario - forse va tolto */
  padding: 0 0 12px 0;     
  position: relative;  
}  
div#tabella_b .foto {     
  position: absolute;     
  top:20px;                            /* left e top per centrare l'oggetto */     
  z-index: 10;
}
div#tabella_b .cornice {     
  position: absolute;     
  top:0;                               /* left e top per centrare l'oggetto */     
  left: 0;
  z-index: 20;
}

Questo e` con un'immagine esterna.
Puoi anche farlo con un oggetto vuoto (interno trasparente, bordo colorato), ma devi metterci dentro qualcosa di invisibile (uno spazio?, una gif trasparente?) altrimenti alcuni brwoser non lo visualizzano.

[simoneudine]

ti ringrazio per la risposta immaginavo che un oggetto contenitore non potesse comparire sopra l'oggetto contenuto. infatti mi era venuto in mente di fare 3 "strati", il contenitore, l'immagie e la cornice.

Forse mi sfugge però il significato della tua proposta. In questo modo ho bisogno di una cornice immagine diversa per ogni immagine o no? Vabbè che al limite non sto molto a ridimensionare le immagini o a creare 3 o 4 cornici diverse....

Grazie ancora

[Mich_]

Non so. Dipende da come sono fatte le immagini.
Se le immagini sono tutte uguali, la cosa e` semplice.

Se le cose sono diverse, e` piu` complesso, ma puoi fare con un bordo. Esempio:

HTML:
<div [color:red]class="conten_foto"[/color]>
  [img]foto.jpg[/img]
  <div class="cornice"></p>
</div>

CSS:
div.conten_foto {     
  /* width e height automatici (o non definiti) */ 
  position: relative;  
}  
.conten .foto {     
  position: absolute;     
  top:20px;                            /* left e top per centrare l'oggetto */     
  z-index: 10;
  margin: ...;                        /* da definire in modo che la foto abbia spazio attorno */
}
.conten .cornice {     
  position: absolute;     
  top:0;                               /* left e top all'angolo sinistro del contenitore */     
  left: 0;
  width: 100%;                 /* dimensione uguale al contenitore */
  height: 100%;
  z-index: 20;
  border: 10px solid red;  
  background: transparent;
}

Come vedi ho dato una classe al contenitore, in modo da formattarli tutti allo stesso modo
E la cornice la ho definita come bordo e sfondo ad un oggetto da sovrapporre alla foto
Naturalmente il margin alla foto dovra` essere minore o uguale al border della cornice

[simoneudine]

grazie per la disponibilità, quando ho un attimo lo provo, ora ho altri piccoli problemini da risolvere. GRAZIE ancora