Padding e inline

[pop killer]

Ragazzi, come mai non si possono dare margin/padding inferiori e superiori ad un div inline? Si deve ricorrere per forza ad un display: block; combinato ad un float: left; per ottenere una lista orizzontale con padding?

Grazie.

[seed_squall_it]

Gli elementi inline non accettano dimensioni (width e height) né padding/margin verticali assegnati esplicitamente.

Per affiancare due elementi e assegnare loro un padding/margin verticale devi dichiararli necessariamente flottanti. Il display: block non è necessario, in quanto qualsiasi elemento flottante è implicitamente trasformato in elemento block-level.

Esiste anche il valore inline-block per la proprietà display che fa in modo che gli elementi si dispongano affiancati ma vengano trasformati in elementi a livello di blocco (in pratica, una cosa simile al float). Questo valore però non è supportato praticamente da nessun browser (non ricordo nemmeno se è già un valore valido solo per i CSS 3, o se manca proprio l'implementazione CSS 2 nei browser).

[Mich_]

Difficile pensare ad un <div> inline ...

Ci sono oggetti di tipo blocco ed oggett idi tipo inline. Il <div> e` di tipo blocco di default, e non vedo motivazioni per convertirlo in inline (anche se non ci sono divieti in materia).

Negli oggetti inline, non ha senso parlare di dimensioni, e neppure di posizionamenti; margini e padding possono essere usati, ma in linea di massima non e` conveniente usarli.

Poi c'e` un limite di IE6: non si possono avere oggetti piu` bassi dell'altezza del font: se si vuole avere un oggetto piu` piccolo occorre anche definirgli font-size: 0;

Le liste e gli elementi di lista sono oggetti di tipo blocco. Si possono affiancare con il float.
Non credo convenga renderle inline, perche` in tal modo non si puo` definirne le dimensioni.

[seed_squall_it]

Non proprio Mich_...gli elementi di lista hanno come valore di default della proprietà display "list-item", non "block". Tuttavia il loro comportamento è simile a quello degli elementi block-level (anche le tabelle si comportano in modo simile, ma anch'esse non sono elementi block-level, in quanto hanno il valore di default della proprietà display impostato su "table").

[pop killer]

Originariamente inviato da Mich_
Difficile pensare ad un <div> inline ...

Ci sono oggetti di tipo blocco ed oggett idi tipo inline. Il <div> e` di tipo blocco di default, e non vedo motivazioni per convertirlo in inline (anche se non ci sono divieti in materia).

Negli oggetti inline, non ha senso parlare di dimensioni, e neppure di posizionamenti; margini e padding possono essere usati, ma in linea di massima non e` conveniente usarli.

Poi c'e` un limite di IE6: non si possono avere oggetti piu` bassi dell'altezza del font: se si vuole avere un oggetto piu` piccolo occorre anche definirgli font-size: 0;

Le liste e gli elementi di lista sono oggetti di tipo blocco. Si possono affiancare con il float.
Non credo convenga renderle inline, perche` in tal modo non si puo` definirne le dimensioni.

Ho sbagliato a dire div inline, nel mio caso era un elemento di lista: dando l'attributo inline non potevo impostare margin/padding e ho dovuto usare il floating. Solo che poi non ho potuto impostare il tutto al centro (essendo float: left non potevano certo andare al centro nonostante il text-align:center). Non riesco a trovare un modo per lasciare i float e centrare l'<ul>: dato che questo non ha un width impostato si estende per tutta la lunghezza possibile, e gli elementi flottanti si piazzano a sinistra, quindi all'inizio dell'ul. Percaso c'è qualche modo?

[Mich_]

I singoli[*] devono essere flottati a sinistra, come hai detto.

Invece il tag <ul> puo` venir centrato. Purtroppo per problemi legati ad IE6 occorre inserire l'<ul> da solo in un <div> specifico:

<div id="menuoriz"><ul>[*] ... [*] ... 
  ...[/list]</div>

CSS:
#menuoriz {
  width: XXXxx;   /* nota 1 */
  text-align: center;
}
#menuoriz ul {
  margin: 0 auto;
  text-align; left;     /* ma vedi tu cosa e` meglio */
}
#menuoriz li {
  width: XXXxx;   /* nota2 */
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* ?? text-align: XXX ?? */
}
#menuoriz a {
  width: 100%;
  height: 100%;
  background-color: #XXX;
  color: #XXX;
}
#menuoriz a:hover {
  background-color: #XXX;
  color: #XXX;
}

Nota1: probabilmente width: 100%;, ma allora anche tutti i blocchi che lo contengono devono avere width 100%, compreso body e html
Nota2: parti ad esempio con width: 20em;

[pop killer]

Originariamente inviato da Mich_
I singoli[*] devono essere flottati a sinistra, come hai detto.

Invece il tag <ul> puo` venir centrato. Purtroppo per problemi legati ad IE6 occorre inserire l'<ul> da solo in un <div> specifico

Ma per poter usufruire del margin: auto c'è bisogno di una width dichiarata, altrimenti non funziona. E dato che io non posso dichiarare width ne all'ul ne al li (dato che sono di width variabile) non posso far nulla, no?

[Mich_]

Non e` importante definire il width al[*] > L'ho fatto per averli tutti della stessa larghezza (quandi e` una questione estetica), ma non e` necessario.
Il tag <ul> nn occorre che abbia width: e` dato dalla somma dei blocchi interni.

Invece devi definire la larghezza del contenitore in cui deve essere centrato il tuo <ul>. Altrimenti i margini si riducono a zero.
Io ho proposto di usare 100%, cioe` il piu` largo possibile, in modo da centrare il menu dentro la pagina (vedi precedente nota1).
Ma per definire width:100% occorre che il contenitore abbia una larghezza definita; va bene anche in %. Quindi ti basta definire width:100% anche al body e al html, oltre ad eventuali elementi (di tipo blocco) che contengono il <div>.

[pop killer]

Originariamente inviato da Mich_
Non e` importante definire il width al[*] > L'ho fatto per averli tutti della stessa larghezza (quandi e` una questione estetica), ma non e` necessario.
Il tag <ul> nn occorre che abbia width: e` dato dalla somma dei blocchi interni.

Invece devi definire la larghezza del contenitore in cui deve essere centrato il tuo <ul>. Altrimenti i margini si riducono a zero.
Io ho proposto di usare 100%, cioe` il piu` largo possibile, in modo da centrare il menu dentro la pagina (vedi precedente nota1).
Ma per definire width:100% occorre che il contenitore abbia una larghezza definita; va bene anche in %. Quindi ti basta definire width:100% anche al body e al html, oltre ad eventuali elementi (di tipo blocco) che contengono il <div>.

Ti dirò, il div contenitore ha width/height dichiarate e text-align:center, ul ha il margin:auto e li ha il float left, ma non ne vuole sapere di stare al centro. Con firebug l'<ul> non ha una height, e quindi sembra che non contenga i[*], comunque se vuoi linko il sito.

[Mich_]

Si`, linka il sito, che ragioniamo sul caso reale.