div che lascia intravedere scrittura sottostante

[Wakka]

Ciao a tutti,
giocando con i css non sono riuscito ad ottenere questo effetto, ammesso che sia possibile, nemmeno impostando i vari x-index.
In una tabella, riga per riga, compaiono vari dati.
Nell'ultima riga, vorrei che i dati non si "spostassero" per far spazio al mio DIV (che contiene il nome del sito scirtto a lettere) ma che si "infilassero" sotto, come se il DIV non ci fosse.
Sono riuscito a rendere l'idea?
Ho provato con position:absolute, cosi' facendo otterrei l'effetto desiderato, ma in questo modo il div se ne va a passeggio e non e' quella la mia intenzione...vorrei che rimanesse fermo dove l'ho fissato, in basso a destra della tabella, ma che lasciasse intravedere il testo di sotto, nel caso ce ne fosse.
Suggerimenti??

Grazie mille in anticipo!

[Wakka]

nessun suggerimento??

[Mich_]

Sono riuscito a rendere l'idea?

Francamente NO.
Non ho capito cosa vuoi ottenere e come e` il tuo sito.

La cosa migliore sarebbe che fai uno schemino grafico del risultato che vuoi e lo posti.
E` anche necessario conoscere il codice HTML (ed eventuale CSS gia` inserito) dei vari pezzi.
E dato che ci sei posta anche la DTD che usi, ed i browser su cui vuoi che funzioni, in modo da ottimizzare il sw per i browser.

[Wakka]

Originariamente inviato da Mich_
Francamente NO.
Non ho capito cosa vuoi ottenere e come e` il tuo sito.

La cosa migliore sarebbe che fai uno schemino grafico del risultato che vuoi e lo posti.
E` anche necessario conoscere il codice HTML (ed eventuale CSS gia` inserito) dei vari pezzi.
E dato che ci sei posta anche la DTD che usi, ed i browser su cui vuoi che funzioni, in modo da ottimizzare il sw per i browser.

Hahaha bella risposta, mi hai scucito un sorrisino...
Quel che vorrei fare e'...
ho un td:
<td>
Testo molto lungo ma lungo lungo lungo
<div align="right" class="lamiaclasse">testo a dx</div>
</td>

Vorrei che il div non si disponesse sotto il "testo molto lungo" ma rimanesse sulla stessa linea, e, nel caso il testo sia molto lungo, quest'ultimo vada in secondo piano nel punto in cui e' presente la scritta "testo a dx".

Un po' piu' chiaro?!
Spero di si!

Ciao e grazie della risposta!

[Mich_]

Perche` usi una tabella? Quello che posti non mi pare semanticamente un elemento di una tabella.

Non ha molto senso inserire un <div> dentro una cella: sarebbe meglio uno <span>.

E forse nel tuo caso sarebbe piu` facile con DUE <span>:

HTML:
<contenitore>
  <span class="base">Testo molto lungo ma lungo lungo lungo</span>
  <span class="sovrapposto">testo a dx</span>
</contenitore>

CSS:
contenitore {
  width: ...;             /* probabilmente va specificato */
  position: relative;   /* necessario per dar appoggio agli absolute interni */
}
contenitore .base {
  position: absolute;
  left: 0;
  top:0;
  z-index: 10;
}
contenitore .sovrapposto {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}

Naturalmente <contenitore> andra` sostituito con il tag opportuno, e nel CSS con l'eventuale id o class

Dovrebbe funzionare nei browser standard. Non so in IE (pero` non dovrebbe avere problemi se usato in standard mode).

Il primo <span> potrebbe non servire, ma poi potresti avere problemi con alcuni browser

Anche gli z-index potrebbero non servire, dato che e` implicito con l'ordine di inserimento dei blocchi, ma per sicurezza li ho inseriti.

[Wakka]

Ho provato a fare come suggerisci, modificando un po' per adattarlo al mio caso, ed uso questo codice:

<table>
<tr><td>ALTRI TD</td></tr>
<tr>
<td class="fermati">
 	<span class="graph_title">TESTO MOLTO LUNGO</span>
	<span class="marca"><font color="red" class="maiuscoletto">TESTO IN EVIDENZA</font>
</td>
</tr>
</table>

e come CSS:

.fermati {
	position: relative;
	width: 70%;
	text-align: left;
}

.fermati .graph_title
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;	
}

.fermati .marca
{
	font-weight: bold;
	top: 0;
	right: 0;
	z-index: 20;
	text-align: right;
}

Il risultato e' che il contenuto di graph_title va a posizionarsi alle coordinate 0,0 a causa del "position:absolute"

[Wakka]

e togliendo il "position:absolute" mi esce come se fossero uno di seguito all'altro...il che va bene se il testo non fosse lungo!

[Mich_]

Ripeto:
PERCHE` USI LE TABELLE?
Non mi pare che il tuo contenuto siano dati tabellari, per cui e` un uso improprio anche dal punto di vista semantico.

Le tabelle hanno un posizionamento diverso (nei browser standard il posizionamento e` una forma apposita per le tabelle), per cui il position:relative potrebbe non avere effetto.

Il position:absolute si posiziona rispetto al contenitore che sia posizionato in modo assoluto o relativo (vedi ad esempio: I posizionamenti assoluti e Capire i posizionamenti relativi).

Comunque se proprio vuoi insistere con le tabelle, prova a metterci un <div> all'interno del >td>, in cui dovrai definire:
position: relative;
width: 100%;
height: 100%;

[Wakka]

Originariamente inviato da Mich_
Ripeto:
PERCHE` USI LE TABELLE?
Non mi pare che il tuo contenuto siano dati tabellari, per cui e` un uso improprio anche dal punto di vista semantico.

Comunque se proprio vuoi insistere con le tabelle, prova a metterci un <div> all'interno del >td>, in cui dovrai definire:
position: relative;
width: 100%;
height: 100%;

Uso le tabelle perche' di fatto e' una serie di dati costruiti dinamicamente con PHP, e nell'ultimo TD ci posiziono oltre al valore del TD anche il nome del sito, come sorta di "firma"! Quindi la tabella e' obbligatoria, in questo caso! Per praticita' pero' ho riportato solo l'ultimo TD della tabella

Comunque grazie per le dritte, ora e' perfettamente sovrapposto! Uno a destra e l'altro a sinistra...!!

Ancora grazie per l'aiuto, sei stato gentilissimo

[Wakka]

Un'ultima cosa... e se volessi attaccarlo oltre che a destra anche in basso, devo usare "bottom:0;" nella classe .marca? Perche anche facendo cosi' rimane sospeso subito dopo l'ultima riga anche se nel campo c'e' ancora parecchio spazio!