Barra orizzontale e disposizione del testo

[Pepo06]

Ciao a tutti,

dovrei fare una cosa del genere:


Sapendone poco di CSS, mi sapete consigliare il metodo per creare e disporre in questo modo il testo?

[simotenax]

magari se posti il codice di questa barra che hai postato con relativo css..

[Pepo06]

ehm...questo è solo un "progetto" che ho fatto con photoshop...vorrei trasformarla in codice, ma non ho idea di quale sia il metodo migliore (anche sul discorso di compatibilità tra browser) per fare una cosa del genere...

Con IE mi funziona questo:

<div id="subheader">
<span style="float:left;color:#FFFFFF;background-color:black;">Benvenuto su xxxxxxx!</span>
<span style="float:right;color:#FFFFFF;background-color:black;">ORARIO gg/mm/aaaa</span>
</div>

Il cui subheader è:

div#subheader{
width: 100%;
font-size: 76%;
color: white;
background-color: black;
margin-top: 5px;
line-height: 30px;
}

Ma non penso proprio sia il metodo migliore...

[simotenax]

lo stile del subheader va bene, non è influente nel posizionamento degli elementi che contiene;

per quanto riguarda gli elementi ecco come li puoi allineare:

<div id="subheader">
<span style="float:left;width:50%;text-align:left;color:#FFFFFF;background-color:black;">Benvenuto su xxxxxxx!</span>
<span style="float:left;width:50%;text-align:right;color:#FFFFFF;background-color:black;">ORARIO gg/mm/aaaa</span>
</div> 

di solito i float vanno usati tutti da una parte

[Pepo06]

Grazie mille!

Ora con Firefox vedo perfettamente la barra.

Con IE 7 ottengo questo:

[Mich_]

Originariamente inviato da simotenax
di solito i float vanno usati tutti da una parte

Appunto di solito. E il motivo e` che altrimenti resta uno spazio tra i due.
Ma in questo caso si puo` usare il float left e float right senza problemi.

<div id="subheader">
<span style="float:left;width:50%;text-align:left;color:#FFFFFF;background-color:black;">Benvenuto su xxxxxxx!</span>
<span style="float:left;width:50%;text-align:right;color:#FFFFFF;background-color:black;">ORARIO gg/mm/aaaa</span>
</div> 

Attenzione che 50% + 50% puo` dare un valore che tradotto in pixel e` maggiore del 100%. Questo a causa dei diversi modi di arrotondare che hanno i browser.
Quando si sommano percentuali, conviene sempre restare leggermente sotto il 100%. Di solito 49.9% per ambedue puo` bastare.

[simotenax]

moderatore puntuale e preciso! complimenti!

[Pepo06]

Non posso che ringraziare entrambi per l'aiuto!!!