CSS - Testo allineato in alto a sx in una cella

[Jax]

Mi sto perdendo in un bicchier d'acqua.
Devo allineare una stringa (un numero) in alto a sinistra di ogni cella
di una tabella.
Vorrei non usare vertical-align e text-align perché all'interno di
qualche cella c'è un'immagine che dev'essere centrata.
Se metto position: absolute e left/top a 0 mi porta tutte le scritte
nell'angolo in alto a sx della tabella, se metto relative mi sposta
l'immagine eventualmente presente (e comunque non mi mette la scritta
nell'angolo della cella)...
Spero di essermi spiegato!

[Alan]

Post by Jax
Se metto position: absolute e left/top a 0 mi porta tutte le scritte
nell'angolo in alto a sx della tabella, se metto relative mi sposta
l'immagine eventualmente presente (e comunque non mi mette la scritta
nell'angolo della cella)...

Un metodo potrebbe essere aggiungere un contenitore all'interno di ogni
cella e metterci il testo, ad esempio:

html:
<td>
<span>Testo</span><img src="..." />
</td>

css:
td {
position: relative;
}
td span {
position: absoute;
top: 0;
left: 0;
}

Ma, ovviamente, dipende sempre da cosa devi fare...

Ciao

[Jax]

Post by Alan
Ma, ovviamente, dipende sempre da cosa devi fare...

Tra i vari tentativi avevo provato anch'io a "gabbare" in questo modo la
tabella, ma senza successo: così gli span vengono comunque tutti
nell'angolo in alto a sx della pagina.
Per capirci, sto cercando di costruire un modulo php per un amico: data
una stringa deve costruire una damiera con dei pezzi eventualmente
presenti su di essa. Mi è sembrato logico creare una table al volo,
costruendo le varie caselle come se fossero le celle... il problema è
che le caselle nere devono essere numerate, per questo ho bisogno del
numeretto in alto a sx (o in qualunque altro posto, basta che sia una
posizione assoluta rispetto alla singola cella).

[deelan]

Jax ha scritto:
(...)

Post by Jax
Tra i vari tentativi avevo provato anch'io a "gabbare" in questo modo la
tabella, ma senza successo: così gli span vengono comunque tutti
nell'angolo in alto a sx della pagina.

Nah. Se usi il codice suggerito da Alan quel "relative" sposta
il riferimento assoluto su di ogni casella, che è quello che vuoi
tu, mi pare di aver capito.

[Alan]

Post by Jax
Tra i vari tentativi avevo provato anch'io a "gabbare" in questo modo la
tabella, ma senza successo: così gli span vengono comunque tutti
nell'angolo in alto a sx della pagina.

E mi pare normale...

Post by Jax
Per capirci, sto cercando di costruire un modulo php per un amico: data
una stringa deve costruire una damiera con dei pezzi eventualmente
presenti su di essa. Mi è sembrato logico creare una table al volo,
costruendo le varie caselle come se fossero le celle... il problema è
che le caselle nere devono essere numerate, per questo ho bisogno del
numeretto in alto a sx (o in qualunque altro posto, basta che sia una
posizione assoluta rispetto alla singola cella).

E' esattamente quello che ti ho fatto. Metti uno span dentro ogni cella
e ci metti il numero. Cos'è che non ti ridà?

Se stai davvero facendo una specie di scacchiera e le immagini altro non
so che i pezzi, aggiungi questo nel css:

td img {
display: block
margin: 0 auto
}

Ciao

[Jax]

Post by Alan
Se stai davvero facendo una specie di scacchiera e le immagini altro non
td img {
display: block
margin: 0 auto
}

Intanto che aspettavo qualche risposta ho risolto giocando con il
padding e le misure in em, ma domani mattina rileggero il thread con più
attenzione, probabilmente mi è sfuggito qualcosa.
Grazie a tutti comunque.

[Ammammata]

Post by Jax
deve costruire una damiera con dei pezzi eventualmente
presenti su di essa

invece di usare l'immagine della pedina/dama usa l'immagine comprensiva
dello sfondo, dimensionata esattamente come la cella in modo che se anche
fosse allineata in alto a destra resterebbe comunque centrata :)

certo che così facendo non potrai mettere il numerino nelle case
occupate... :(

[Jax]

Post by Ammammata
invece di usare l'immagine della pedina/dama usa l'immagine comprensiva
dello sfondo, dimensionata esattamente come la cella in modo che se anche
fosse allineata in alto a destra resterebbe comunque centrata :)

Ci avevo già pensato, ma ho scartato questa tecnica perché così facendo
non potrei avere uno sfondo diverso dal solito bianco/nero, se uno lo
volesse (tipo marmorizzato). Inoltre sarei blindato ad una dimensione
fissa delle celle, altra cosa che vorrei cercare di evitare.

[Alan]

Post by Jax
Ci avevo già pensato, ma ho scartato questa tecnica perché così facendo
non potrei avere uno sfondo diverso dal solito bianco/nero, se uno lo
volesse (tipo marmorizzato). Inoltre sarei blindato ad una dimensione
fissa delle celle, altra cosa che vorrei cercare di evitare.

Basta utilizzare una png o una gif trasparente.

Ci ho giocato 20 minuti e ho fatto questo:
http://www.qreate.it/public/scacchiera

L'unico problema è che le celle non hanno una chiara funzione quando si
usa position relative. Alcuni browser vanno correttamente, alcuni no..
Quindi ci devi mettere un div dentro, come stavi già facendo..

Ciao

[Jax]

Post by Alan
Ma, ovviamente, dipende sempre da cosa devi fare...

Ti anticipo anche il mio secondo tentativo: ho creato un div con width e
height=100% per ogni cella: in questo modo posso usare il
position:absolute, ma non posso più usare il vertical-align, che è
riservato alle table-cell :(
Ovviamente se al div applico la proprietà display: table-cell per poter
usare il vertical-align, si ripresenta il problema del posizionamento
dei numeri.
Se ci fosse un modo alternativo per allineare verticalmente un'immagine
in un div...

[Alan]

Post by Jax
Ti anticipo anche il mio secondo tentativo: ho creato un div con width e
height=100% per ogni cella: in questo modo posso usare il
position:absolute, ma non posso più usare il vertical-align, che è
riservato alle table-cell :(

Stai complicando troppo, è tutto molto più semplice.. guarda l'altro mio
post..

Post by Jax
Se ci fosse un modo alternativo per allineare verticalmente un'immagine
in un div...

Un modo semplice è metter l'immagine come background del div..

Ciao