Posizionamento testo

[Valeria75]

Ho un foglio di stile che definisce un'immagine di sfondo nell'area superiore di un box

#boxbarlogin-top {
width:100%;
height:38px;
background-image: url(Box/BarLogin_Top.jpg);
background-repeat: no-repeat;
}

io vorrei inserire un testo "sopra" questa immagine, ma il problema è che non riesco a posizionarlo correttamente

#boxbarlogin-top .title {
font: 13px verdanaa, arial, helvetica, sans-serif;
font-weight: bold;
text-align: left;
color: #aaaaaa;
}


con la mia prova, il testo inserito, viene localizzato in alto, io lo vorrei al centro dell'area occupata dall'immagine (con height:38px) e allineato a sinistra, con una distanza di qualche pixel dal bordo sinistro dell'immagine (quindi dall'area che occupa l'immagine)

<div id="boxbarlogin">
<div id="boxbarlogin-top"><div id="title">Login</div></div>
<div id="boxbarlogin-back"> </div>
</div>


Grazie per l'aiuto!

 

[dead]

Su, su, qui non c'è niente di difficile nè di concettuale. Devi solo utilizzare bene gli elementi a disposizione: soprattutto margin, padding e line-height

 

[Valeria75]

Grazie al tuo suggerimento sul line-height ci sono riuscita!

Ho solo un problema, non mi allinea il testo a SX facendo

margin-left: 0px;

invece facendo

margin-right: 50px;

funziona correttamente

il problema è che non posso usare il margin-right in quanto se cambio la lunghezza del testo, l'allinemeamento a SX cambia. Come posso impostarlo tramite il margine sinistro?

Grazie

 

[dead]

Grazie al tuo suggerimento sul line-height ci sono riuscita!

Ho solo un problema, non mi allinea il testo a SX facendo

margin-left: 0px;

invece facendo

margin-right: 50px;

funziona correttamente

il problema è che non posso usare il margin-right in quanto se cambio la lunghezza del testo, l'allinemeamento a SX cambia. Come posso impostarlo tramite il margine sinistro?

Grazie

Ma il margin a che elemento lo dai?

Probabilmente è dovuto al fatto che i browser, in assenza di direttive di stile impostano certe proprietà a dei valori di default.

Personalmente per evitare che i browser facciano di testa loro, all'inizio del foglio di stile metto sempre:

body, div, p, table, img, a, ul, li {margin:0; padding:0}

 

[Valeria75]

Ora lo inserisco anche io!

Grazie per il suggerimento!