Sfondo trasparente di uno span.

[TheLinuxBadGuys]

Originariamente inviato da Mich_
E` comunque una forzatura della semantica.
Non si possono inserire delle scritte direttametne in un <div>; se la DTD e` XHTML Strict e` un errore, se e` transitional e` ammesso, ma non e` chiaro come possano reagire i browser.
Prova a mettere un

all'interno del <div> e metterci dentro i vari <span>. Ci vorrebbe anche del testo esterno agli span per fare un test piu` completo.

E comunque dando il float ad uno <span>, questo viene tolto dal flusso degli altri oggetti.
E` una forzatura semantica, e in tali casi il CSS reagisce come puo`.

Con quale browser stai testando? Perche` in queste cose i browser possono comportarsi diversamente (e non sono violazioni degli standard W3C). Prova anche con un browser diverso.

Ma a mio parere il problema ora dovrebbe essere rendere quello che vuoi fare con i marcatori corretti: finche` usi marcatori a caso, la cosa se funziona e` per caso.
Per questo chiedevo quale e` lo scopo del tutto, in modo da trovare il marcatore piu` adatto.

Non funziona ne con Explore ne con Firefox.

Io devo fare una cosa molto semplice ti posto il codice:



<DIV id="ceo">


<span Style="font-family: Arial; float: left; background-color: transparent ;">
Testo arial a sinistra
</span>

<span Style="font-family: Verdana; float: center; background-color: transparent; ">
testo verdana al centro
</span>

<span Style="font-family: Verdana; float: right; background-color: transparent; ">
testo verdana a destra
</span>

</DIV>


Ho un DIV con una immagine di sfondo, sulla stessa riga voglio che compaiano tre scritte.
Una deve stare sulla sinistra, Una deve stare in centro e l'altra deve stare a dastra.
Sullo sfondo deve esserci l'immagine che è associata al DIV.

Come si Fa?




Grazie,

The Linux Bad Guys

[Mich_]

OK. ora ho capito.

In pratica sono tre oggetti indipendenti che devono stare sulla stessa riga.
Devi usare la stessa tecnica dei layout a tre colonne

<div id="ceo">
  <p class="sin">primo pezzo</p>
  <p class="cen">centrale</p>
  <p class="des">ultimo</p>
</div>

A questo devi applicare il CSS

html, body {
  width: 100%;
  font-size: 100%;
}
#ceo {
  width: 100%;
  background: ....;
}
.sin {
  float: left;
  margin: 0;
  padding: 0;
  border: 0;
}
.des {
  float: right;
  margin: 0;
  padding: 0;
  border: 0;
}
.cen {
  float: left;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

I

sono oggetti di tipo blocco; gli <span> sono di tipo inline.
Potrebbe servire inserire in tutti il background: transparent, ma dovrebbe essere di default.

Il mio codice presuppone che il div #ceo sia direttamente inserito nel body; se non lo e` deve essere messo dentro un blocco con larghezza definita.

[TheLinuxBadGuys]

Originariamente inviato da Mich_
OK. ora ho capito.

In pratica sono tre oggetti indipendenti che devono stare sulla stessa riga.
Devi usare la stessa tecnica dei layout a tre colonne

<div id="ceo">
  <p class="sin">primo pezzo</p>
  <p class="cen">centrale</p>
  <p class="des">ultimo</p>
</div>

A questo devi applicare il CSS

html, body {
  width: 100%;
  font-size: 100%;
}
#ceo {
  width: 100%;
  background: ....;
}
.sin {
  float: left;
  margin: 0;
  padding: 0;
  border: 0;
}
.des {
  float: right;
  margin: 0;
  padding: 0;
  border: 0;
}
.cen {
  float: left;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

I

sono oggetti di tipo blocco; gli <span> sono di tipo inline.
Potrebbe servire inserire in tutti il background: transparent, ma dovrebbe essere di default.

Il mio codice presuppone che il div #ceo sia direttamente inserito nel body; se non lo e` deve essere messo dentro un blocco con larghezza definita.

Grazie Mich,

Funziona tutto correttamente,

Potresti spiegarmi 2 cose del tuo codice che non ho capito?

La prima: Tu mi hai detto di utilizzare i

che sono elementi di blocco e funziona correttamente.
Non capisco come possa funzionare correttamente però in quanto essendo elementi di blocco il testo dovrebbe andare a capo.. :master:

La seconda: perchè lo sfondo lo visualizzo solo se gli do una larghezza predefinita? Questo non l'ho trovato scritto in nessun manuale dei css.


Ciao!

TheLinuxBadGuys

[Mich_]

Il float seve per far stare sulla stessa linea elementi di blocco.
Comunque ciascun

va in una riga nuova, se non specifichi il float.

Lo sfondo lo visualizzi comunque; pero` se non definisci una larghezza il blocco si stringe al massimo (viene allargato dai contenuti, se ce ne sono), per cui potrebbe essere che non riesci a vedere lo sfondo.