[CSS] Display:inline va a capo

[funcool]

Ho dei div settati con display:inline ma vanno a capo lo stesso.

La pagina in questione è questa.

c'è scritto "dispay"...

[funcool]

c'è scritto "dispay"...

Grazie, ho corretto, però adesso non viene mantenuta la larghezza del div. Come posso fare a risolvere?

Mmm...

Non sono sicuro...

potresti provare a impostare l'attributo di stile width sull' <a href> anzichè sul div che lo contiene

Grazie, ho corretto, però adesso non viene mantenuta la larghezza del div. Come posso fare a risolvere?

non ho ben capito cosa intendi.. cioè, vorresti che fossero tutto delle stesse dimensioni?

[funcool]

non ho ben capito cosa intendi.. cioè, vorresti che fossero tutto delle stesse dimensioni?

Sì, vorrei che fossero tutti delle stesse dimensioni.

[heracleum]

ma .. per curiosità.. hai provato il consiglio di attorianzo o no?

-anche se cmq la vedo difficile in quel modo, width e inline non vanno molto d'accordo, anzi-

[funcool]

ma .. per curiosità.. hai provato il consiglio di attorianzo o no?

Sì che ho provato. Se vuoi vederlo è online adesso, prima l'avevo provato solo il locale.

[heracleum]

Se fossero state allineate a sinistra o a destra avrei usato il display di default per i div (block, cioè basta non indicare display) e li avrei accostati l'un l'altro col float... e quindi non essendo inline puoi indicare la width che vuoi, anzi devi indicarla.
Ma la scelta dell'allineamento centrato mi sa che rende la cosa poco fattibile.. o ricorri a trucchetti poco eleganti :)

[funcool]

E come faccio a usare i float con tanti elementi?

e se usassi span anzichè div? In questo modo ti risparmieresti il display:inline

[funcool]

Ho provato con gli span ma mi dava lo stesso problema della larghezza e dell'altezza.

[heracleum]

E come faccio a usare i float con tanti elementi?

Tanti float left, per dire, si dispongono l'uno di fianco all'altro. Prova, e magari questo lo fai in un div contenitore, che poi metterai centrato così ti appariranno comunque al centro come volevi (in riferimento al problema di centratura del mio post precedente).
Prova.

Il sudato risultato sarà comunque molto simile ad una table 3x3, al punto che uno si chiede ma non facevo prima ad usare una table?

[funcool]

Tanti float left, per dire, si dispongono l'uno di fianco all'altro. Prova, e magari questo lo fai in un div contenitore, che poi metterai centrato così ti appariranno comunque al centro come volevi (in riferimento al problema di centratura del mio post precedente).
Prova.

Il sudato risultato sarà comunque molto simile ad una table 3x3, al punto che uno si chiede ma non facevo prima ad usare una table?

Ho fatto come mi hai detto tu. Però ho dovuto aggiungere questo codice alla fine:

<div style="clear:left;"></div>

Non c'è un modo un po' più elegante?

Inoltre non riesco a centrarlo...

[heracleum]

Ovvio, dove c'è float c'è clear (a meno che non si voglia appositamente sfruttare il fluttuamento)
magari stasera..

[funcool]

Ovvio, dove c'è float c'è clear (a meno che non si voglia appositamente sfruttare il fluttuamento)
magari stasera..

Magari stasera... Non l'ho capito.

[dementialsite]

Ho fatto come mi hai detto tu. Però ho dovuto aggiungere questo codice alla fine:

<div style="clear:left;"></div>

Non c'è un modo un po' più elegante?

Purtroppo no... se vuoi forzare i contenuti a "tornare a posto", devi mettere un clear:left sul DIV successivo (non necessariamente vuoto!)

Inoltre non riesco a centrarlo...

Prova a chiudere tutti i DIV così creati in questa struttura:

<DIV STYLE="text-align:center">
<DIV STYLE="width:...">
<!-- qui tutti i DIV che hai creato prima -->
</DIV>
</DIV>

dove la larghezza che imposterai sarà ovviamente pari a 3 volte la larghezza della "cella", più i valori di un eventuale margin che hai impostato tra queste.

Stammi bene...

[funcool]

Purtroppo no... se vuoi forzare i contenuti a "tornare a posto", devi mettere un clear:left sul DIV successivo (non necessariamente vuoto!)Prova a chiudere tutti i DIV così creati in questa struttura:

<DIV STYLE="text-align:center">
<DIV STYLE="width:...">
<!-- qui tutti i DIV che hai creato prima -->
</DIV>
</DIV>

dove la larghezza che imposterai sarà ovviamente pari a 3 volte la larghezza della "cella", più i valori di un eventuale margin che hai impostato tra queste.

Stammi bene...

Il div non riesco a centrarlo lo stesso con FireFox.

<DIV STYLE="text-align:center; margin-left:auto; margin-right:auto;">
<DIV STYLE="width:...">
<!-- qui tutti i DIV che hai creato prima -->
</DIV>
</DIV> 

[funcool]

<DIV STYLE="text-align:center; margin-left:auto; margin-right:auto;">
<DIV STYLE="width:...">
<!-- qui tutti i DIV che hai creato prima -->
</DIV>
</DIV> 

Neanche così riesco a centrarlo...

[heracleum]

Magari stasera era per dire "ora sto in ufficio poi vedo per bene", ora ci risono di nuovo, cmq fai così, se hai deciso che vuoi lavorare con html NON standard (quirksmode) allora fai
<div align="center">
e ciccia..
se invece vuoi rispettare gli standard w3c puoi usare margin: auto e ti funziona anche su IE.. scegli tu. (non ho controllato se la tua pag segue la standard compliance..)

[funcool]

se invece vuoi rispettare gli standard w3c puoi usare margin: auto e ti funziona anche su IE.. scegli tu. (non ho controllato se la tua pag segue la standard compliance..)

I voglio usare gli stili, il problema è che non funziona con FireFox e Internet Explorer funziona.

<DIV STYLE="text-align:center; margin-left:auto; margin-right:auto; width:100%;"> 
<DIV STYLE="width:..."> 
<!-- qui tutti i DIV che hai creato prima --> 
</DIV> 
</DIV> 

[heracleum]

funcool: parlavo del dichiarare un certo doctype e di rispettarlo. (scusami non posso andare a visitare siti.. per controllare)

[funcool]

funcool: parlavo del dichiarare un certo doctype e di rispettarlo. (scusami non posso andare a visitare siti.. per controllare)

Non ho capito...

[heracleum]

Ok, andavo di nuovo di fretta quindi riprendiamo da qui:

.. se hai deciso che vuoi lavorare con html NON standard (quirksmode) allora fai
<div align="center">
e ciccia..
se invece vuoi rispettare gli standard w3c puoi usare margin: auto e ti funziona anche su IE.. scegli tu. (non ho controllato se la tua pag segue la standard compliance..)

Parlavo genericamente perché non avevo la possibilità di vedere qual era la situazione di doctype sul tuo sito, vedo che è:
HTML 4.01 Transitional (Loose)
Sinceramente non ho mai provato ad utilizzarlo, ho preferito passare all'XHTML visto che c'ero.
Anche se html4 loose è la situazione "meno rigorosa" possibile degli standard comunque puoi utilizzare qualcosa come <div align="center"> per centrarli e entrambi i browser dovrebbero comportarsi allo stesso modo.

[funcool]

Ok, andavo di nuovo di fretta quindi riprendiamo da qui:

Parlavo genericamente perché non avevo la possibilità di vedere qual era la situazione di doctype sul tuo sito, vedo che è:
HTML 4.01 Transitional (Loose)
Sinceramente non ho mai provato ad utilizzarlo, ho preferito passare all'XHTML visto che c'ero.
Anche se html4 loose è la situazione "meno rigorosa" possibile degli standard comunque puoi utilizzare qualcosa come <div align="center"> per centrarli e entrambi i browser dovrebbero comportarsi allo stesso modo.

Come detto sopra, io preferivo usare gli stili...

[heracleum]

beh allora -per coerenza con la tua decisione di usare gli styles- dovresti passare ad un DOCTYPE più rigido. Ti ho detto non mi sono mai trovato in una situazione del genere, voler rispettare gli standard ma con il doctype più "generoso" che esista.