[niubbo] fatemi capire....

[boboli]

ciao a tutti...ho iniziato oggi a cercare di modernizzare il sito eliminando le tabelle di layout...per utilizzare un "layout fluido monolitico" visti i contenuti delle pagine che vado ad aggiornare...

siccome mi piace leggere i tutorial ma non solo vorrei una piccola spiegazione
la mia vecchia pagina aveva un header formato da una tabella con 3 celle...le due laterali con una immagine che le rendeva a larghezza fissa e quella centrale invece che occupava il "100%" dello spazio in modo da allargarsi con l'aumentare della risoluzione

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
				<tr> 
			    <td align="left"><?PHP echo "[img]images/$logo[/img]\n";?></td>
                <td width="100%" align="center"><?PHP echo "[img]images/$gif_mid[/img]\n";?></td>
				<td align="right"><?PHP echo "[img]images/$gif_right[/img]\n";?></td>
       			</tr>
</table>

come creo questa situazione ???
a quanto ho letto finora (un po' frettolosamente lo ammetto... )
dovrei crearmi 3 classi (una a larghezza fissa con allineamento a sx, una con larghezza fissa e allineamento dx ed una terza a larghezza 100% ed allineamento centrale) ed applicarli su degli <span>...forse...
dai iniziatemi....non sono cosi tonto...

[span]

non ne ho voglia

[Mich_]

In linea di massima e` corretto.
In generale pero` sono <div> che devi usare, non <span>. La differenza e` che i <div> sono display:block; mentre gli <span> sono display:inline; (di default).

Gli elementi inline non si possono spostare a piacimento, mentre i blocchi si`.

Comunque se vuoi esempi gia` pronti da modificare, dovresti guardare i siti tipo constile.org (trovi i link corretti tra i "link utili" di questo forum).

[boboli]

scusa Mich ma se uso i DIV non mi crea una nuova riga ???

quello che non capisco è come spiegare al DIV o SPAN che sia l'allineamento
la GIF di sx (il logo) deve stare in alto a SX, la gif opposta a dx deve avere lo stesso allineamento mentre tutta la colonna centrale deve essere espandibile per riempire il resto della pagina...
a sto punto uso un template a 3 colonne per fare l'header...

[Mich_]

Un blocco con float:left; oppure float:right; viene posizionato sulla stessa "riga" di quello precedente.

Il blocco successivo (che non deve stare sulla stessa riga) dovra` avere clear:all;

[span]

Originariamente inviato da Mich_
Un blocco con float:left; oppure float:right; viene posizionato sulla stessa "riga" di quello precedente.

successivo

[boboli]

ora...
usando il float:left riesco a buttare il logo completamente a sinistra...e fin qui tutto bene...
adesso ho bisogno che una seconda gif di larghezza 400px vada a posizionarsi al centro di quello che resta dell'header essendo la larghezza di questo variabile a seconda della risoluzione di chi lo visualizza

<-----------------------100%---------------------------->
LOGO(150px)<----------------GIF 400px------------------->


grazie mille...VI prometto che dopo mi metto a studiare :rollo:

[span]

Cosi?

#logo{float: left; width: 150px;}
#gif{margin-left: 150px; text-align: center;}

<div id="logo">[img]logo.gif[/img]</div>
<div id="gif">[img]immagine.gif[/img]</div>

[Mich_]

per centrare un <div>:
Nei browser standard:
devi mettere margin:auto; sui margini destro e sinistro

Nel browser IE
devi mettere text-align:center; nel <div> che contiene il div da centrare.

Le due cose non si danno fastidio, quindi puoi farle coesistere.

[boboli]

Originariamente inviato da Mich_
per centrare un <div>:
Nei browser standard:
devi mettere margin:auto; sui margini destro e sinistro

Nel browser IE
devi mettere text-align:center; nel <div> che contiene il div da centrare.

Le due cose non si danno fastidio, quindi puoi farle coesistere.

@SPAN grazie...funziona perfettamente....inizio a capire qualcosa del meccanismo...molto divertente VVoVe:

@Mich margin: auto va nella parte del file CSS ovvero...

#gif{margin-left: 150px; margin-right:auto; text-align: center;}

o sbaglio ???