più div nella stessa "riga"

[nourdine]

quando uno fa 2 div automaticamente quello che viene secondo viene visualizzato sotto il primo giusto?

bene!

allora io vorrei sapere come si va ad avere + div sulla stessa linea in modo da fare tipo una serie di rettangoli in fila all'interno di un contenitore comune. tipo per fare una barra di navigazione in cui a ogni div interno al contenitore comune corrisponda un link

cheers!

adesso vado a letto. domattina mi aspetto di trovare mille risposte smart!

nite cats

[keratox]

Fai qualche prova con

float:left;

[seed_squall_it]

Infatti. Per "allineare" 2 o più div uno di fianco all'altro, basta usare float: left su tutti (oppure float: right, anche se in questo caso il primo div che è scritto nel codice della pagina sarà quello che apparirà più a destra).

L'elemento div, come anche p, h1, h2, ecc. è un elemento a livello di blocco. Gli elementi a livello di blocco si dispongono per loro stessa natura uno sotto l'altro (alcuni come p e h1 hanno anche un margine superiore e inferiore intrinseco).

Tuttavia, se devi realizzare qualcosa come un "menu orizzontale", ti consiglierei di utilizzare una lista non ordinata (<ul>). Ogni link sarà contenuto in una coppia[*]... e ti basterà utilizzare float: left o display: inline sull'elemento li per fare in modo che la lista si disponga orizzontalmente (devi anche annullare i margini e i padding degli elementi ul e li). Per creare menu di questo tipo le liste sono molto più corrette che una serie di div affiancati, perché mantengono il significato semantico dei link che compongono il menu (sono una "serie" di link, quindi la lista è la struttura (X)HTML più corretta per rappresentarli).

[sebastiano.z]

usa una <table> come contenitore dei <div>

[keratox]

No, non farlo.
Usa un div come contenitore dei div.

Perchè usare le tabelle per il layout, quando servono per contenere dati?
E' semanticamente scorretto.

[sebastiano.z]

se usi <div> risolvi il problema iniziale ?? (con float:left?)

c'è una discussione in corso :

Tabella sta a layout come panna sta a trichechi


mi piacerebbe approfondire...

[miki.]

<div>HEADER</div>

<div style="width:50px;float:left">LINK</div>
<div style="width:50px;float:left">LINK</div>
<div style="width:50px;float:left">LINK</div>
<div style="width:50px;float:left">LINK</div>
<div style="width:50px;float:left">LINK</div>

<div style="clear:both;width:100%">FOOTER</div>


ovviamente quando i div non c'entrano più sulla riga vanno a capo. Puoi fare lo stesso con un elenco puntato

<div>HEADER</div>
<ul>
<li style="width:50px;float:left">LINK
<li style="width:50px;float:left">LINK
<li style="width:50px;float:left">LINK
<li style="width:50px;float:left">LINK
<li style="width:50px;float:left">LINK[/list]
<div style="clear:both;width:100%">FOOTER</div>

ovviamente puoi sistemare e semplificare il tutto con i fogli di stile.

L'uso delle tabelle credo che sia superfluo in questo caso

PS
puoi anche dare la larghezza in un formato relativo (em o %)in questo modo si adatteranno automaticamente all'aumentare o diminuire del carattere.

[sebastiano.z]

La convenienza ?

<div>HEADER</div>
<table> <tr>
<td>LINK</td>
<td>LINK</td>
<td>LINK</td>
<td>LINK</td>
</tr></table>
<div style="clear:both;width:100%">FOOTER</div>

[miki.]

Originariamente inviato da sebastiano.z
La convenienza ?

<div>HEADER</div>
<table> <tr>
<td>LINK</td>
<td>LINK</td>
<td>LINK</td>
<td>LINK</td>
</tr></table>
<div style="clear:both;width:100%">FOOTER</div>

che se voglio cambiare il layout e rendere il menu da orizzontale a verticale, ci impiego un attimo.
Che come l'hai pensato te gli dai già una struttura grafica che non può essere cambiata (praticamente quel menù sarà per forza orizzontale), mentre utilizzando i div la grafica gli viene data tramite i css, e quindi puoi fare 1 sola struttura della pagina e più css a seconda dei mezzi con cui viene vista la pagina (a schermo, stampata, mobile, etc).

E' un fatto di abitudine, le tabelle sono troppo restrittive, con i div ci fai veramente quello che vuoi.

[keratox]

Originariamente inviato da sebastiano.z
se usi <div> risolvi il problema iniziale ?? (con float:left?)

Sì, ovviamente con i css appositi.


Inoltre, scusami tanto, se uso la tabella come contenitore, che problemi mi faccio nell'usare le tabelle per il layout ?
Cioè, abbiam fatto 30 (il contenitore <table>), facciam 31 (tutto il layout con le tabelle).