testo sempre centrato sopra immagine

[harpox]

Ciao,
non riesco ad uscirne da un problema con i css.

Allego immagine per spiegarmi meglio.


Vorrei poter mettere un div dove voglio nella pagina, usando position:absolute, e questo div deve contenere un'immagine e al di sopra di questa un testo con background.
Questo testo deve essere sempre centrato all'immagine e deve adattarsi se è lungo o corto.

Qualcuno mi può aiutare?
Grazie.

[Mich_]

Questo e` uno dei pochi casi in cui vale la pena usare i posizionamenti assoluti.

Il codice dovrebbe essere di questo tipo:

HTML:

...
  <div class="bottone" id="mybutt1">
    <a href="..." title="..." > 
      [img]...[/img]
      

<span>testo lungo o corto</span></p>
    </a>
  </div>


CSS:
#mybutt1 {   /* posizionamento del centro del singolo bottone */
  left: ...;
  top:...;
}
.bottone {    /* serve per tutti i bottoni del tipo */
  position: absolute; 
  width: XXXpx;         /* almeno la larghezza dell'immagine */
  height: YYYpx;        /* almeno l'altrezza dell'immagine */
  margin-left: -XXpx    /* XX e` meta` di XXX */
  margin-top: - YYpx;  /* YY e` meta` di YYY */
}
.bottone a {
  display: block;
  width: 100%;
  height: 100%;
}
.bottone p {
  position: absolute;
  width: 30em;          /* deve poter contentere sempre il messaggio */
  margin-left: -15em;
  bottom: 0;             /* vedi tu se va bene 0 o va modificato */
  font: ...;
  background: transparent;
}
.bottone span {
  display: block;
  margin: auto;
  background: black;  /* o il colore che vuoi */
}

[harpox]

Grazie per la risposta.
Ma penso ci sia qualcosa che non vada. Facilmente mi sono perso qualcosa nell'integrare il codice.

Il background del testo non è grande quanto il testo e non è centratissimo.

link test
potresti dare un'occhiata per favore?

Grazie.

[Mich_]

E` come se lo span fosse largo (quasi) quanto il p
Prova a togliere il display:block dallo span.

E per le prove aggiungi un background-color diverso a tutti gli oggetti (solo per vedere come si comportano i vari posizionamenti.

[harpox]

Refreshando vedi il risultato online.

Qualche idea per risolverlo?

[Mich_]

Aggiungi un
text-align: center
nel p

(pero` allora lo span deve essere di tipo inline, quindi non ci puo` stare il display: block )


Inoltre vedo che la barra grigia (che poi sara` trasparente) e` centrata rispetto al bordo sinistro del bollo rosso, quindi va spostata a dx di meta` della width del bollo.

PS: metti uno sfondo colorato anche al tag <a>, sempre per le prove.

E probabilmente i 30em sono un po' troppi: puoi ridurli (e di conseguenza il margin-left)

[harpox]

Ok, direi che ci siamo.
Lo lascio online se serve a qualcun'altro.
Grazie mille!!

[Mich_]

Ci sono un po' di incongruenze tra le unita` di misura.
Probabilmente la cosa verra` sballata se modifichi la dimensione del carattere.

Non ha senso mescolare misure il px e misure in em, perche` non hanno sempre lo stesso rapporto.

Comunque la struttura e` corretta, si tratta solo di rifinire questi particolari.