allineamento testo dentro span

[agenti]

Mi ritrovo uan situazione del genere:

<div id="head_corpo" >
<span style="float:left;">[img]images/refresh.gif[/img]</span>
<span id="2span" style="text-align:center;float:right;">
Sono stati trovati x Risultati
</span>
</div>


questo è il css:

#head_corpo
{
background-color:#d6e6f1;
padding-bottom:4px;
padding-top:4px;
padding:2px;
height:40px;
display:block;
border: 1px solid #c0c0c0;
font:99% Tahoma,Arial;
font-weight:bold;
color:#ce0000
}

ma non riesco a centrare e allineare in mezzo il testo dentro lo span "2span"

dove sbaglio ?
Grazie.

[Mich_]

Ci sono due tipi di confusione, che sono da evitare:
1. mescoli formattazione tramite CSS a formattazione tramite attributi HTML: questo viene interpretato in modo diverso dai diversi browser. Praticamente devi eliminare tutti gli attributi di formattazione.
2. CSS inline e CSS strutturati: questo genera confusione in chi (umano) deve interpretare la cosa.

Non capisco che senso ha inserire una sola imamgine dentro uno span: tanto vale assegnare lo stile all'immagine.

E comunque dovresti fare uno schema (ad esempio grafico) del risultato voluto: non possiamo sapere come e` fatto il testo (una o piu` righe, quanto e` lungo, ...); E come il testo deve "girare attorno" all'immagine, ecc.

[agenti]

PArtiamo da zero che ne dici ? :rollo:
Tu intendi eliminare uno span ?

<div id="head_corpo" >
[img]images/refresh.gif[/img]
<span id="testo" >Sono stati trovati x Risultati</span>
</div>

fatto

#head_corpo
{
background-color:#d6e6f1;
height:40px;
display:block;
border: 1px solid #c0c0c0;
font:99% Tahoma,Arial;
font-weight:bold;
color:#ce0000
}

#pics
{float:left}

#testo
{
float:right
vertical-align:middle;
}


lo schema è semplice:

una div

che contiene l'immagine sulla sinistra e il testo sulla destra
Il testo non gira in torno all'immagine

fai conto come se fosse una normale tabella a due colonne dentro una div
con entrambi gli elementi allineati verticalmente e orizzontalmente.

Spero di essere stato chiaro.

Ciao.

[Mich_]

La spiegazione ora e` piu` chiara.

Ma il codice contiene ancora attributi di formattazione.
E fai un uso improprio dello span. Uno span e` un elemento inline, all'interno del quale non ha senso allineare, o spostare degli elementi. Usa invece un elemento che puo` contenere del testo, tipo un paragrafo:

<div id="head_corpo" >
  [img]images/refresh.gif[/img]
  <span<p id="testo" >Sono stati trovati x Risultati</span></p>
</div>

Questo dovrebbe dare un risultato molto simile a quanto ti aspetti.
Le dimensioni all'intrno del tag <img> sono ammesse, ma dato che formatti con i CSS, conviene che tutta la formattazione sia nei CSS. Quindi devi definire dimensioni e bordi nel CSS relativo all'immagine.

[agenti]

perdonami ma questa cosa non mi scomfimfera molto...


Sto lavorando dentro un file xsl 1.0 e come tu sai non digerisce bene i caratteri speciali
Ho dovuto adattare il tuo codice in questo modo, ma va in errore....
potresti consigliarmi una modifica ?

Grazie

<div id="head_corpo" >
  [img]images/refresh.gif[/img]
  <xsl:if test="number($total_router_2) &gt; 0 "> 
  <span <p id="testo" >Sono stati trovati {$total_router_2} Risultati</span></p>
  </xsl:if>
  <xsl:if test="number($total_router_2) = 0 and ($attempt = 2 or $attempt = 3)"> 
 <span <p id="testo" >Nessun risultato trovato per questa data</span></p>
</xsl:if>
</div>

[Kiantis]

Quelle verdi sono da sostituire a quelle rosse

[agenti]

posso cancellare questo post :|



che figura di......

[agenti]

okok...

<div id="head_corpo" >
[img]images/refresh.gif[/img]
<xsl:if test="number($total_router_2) &gt; 0 ">
<p id="testo" >Sono stati trovati <xsl:value-of select="$total_router_2" /> Risultati</p>
</xsl:if>
<xsl:if test="number($total_router_2) = 0 and ($attempt = 2 or $attempt = 3)">
<p id="testo" >Nessun risultato trovato per questa data</p>
</xsl:if>
</div>

ci sono ma il testo non viene allineato verticalmente...

#head_corpo
{
background-color:#d6e6f1;
height:40px;
display:block;
border: 1px solid #c0c0c0;
font:99% Tahoma,Arial;
font-weight:bold;
color:#ce0000
}

#pics
{float:left}

#testo
{
float:right
vertical-align:middle;
}

[Kiantis]

Non sono sicuro che il vertical-align vada usato cosi...
Dovrebbe allineare il testo all'interno della sua line-height, e tra l'altro il default di vertical-align mi pare sia proprio middle?

ecco un test (ho modificato dimensioni e spaziature un po, poi non so quanto dovrà essere)

<html>
  <head>
    <title></title>
    <meta content="">
    <style>

#head_corpo
{
	background-color:#d6e6f1;
	display:block;
	border: 1px solid #c0c0c0;
	font:99% Tahoma,Arial;
	font-weight:bold;
	color:#ce0000;
	height: 50px;
	padding: 2px;
}

#pics
{
	display: block;
	float:left;
	width: 50px;
	height: 50px;
}

#testo
{
	margin: 0;
	margin-left: 52px; /* quando c'e il flottante meglio arginare il bordo, bugs vari IE*/
	padding: 0;
	vertical-align:middle;
	height: 50px;
	line-height: 50px;
}
</style>
  </head>
  <body>

<div id="head_corpo">
	[img]images/refresh.gif[/img]
	<p id="testo">Nessun risultato trovato per questa data</p>
	<div style="clear: both"></div>
</div>

</body>
</html>

[agenti]

tutto ok..
grazie.