Posizionamento elementi inline annidati

[Miki73]

come viene gestito il posizionamento verticale di due elementi inline annidati affinchè quello all'interno non solo non sfori da quello esterno, ma che venga centrato sia orizzontalmente che verticalmente?! (sto provando con Firefox, quindi il test è affidabile)

<ul>[*]
    <input type='image' src='images/img.gif' />
  
<ul>

li { display: inline; background-color: green }
input { background-color: red }

[EDIT] forse anche se il tag[*] lo forzo a diventare elemento inline non assume tutte le caratteristiche dell'elemento <input> ad esempio! Facendo prove l'unico modo per forzare l'altezza di[*] è aumentargli la font-size! [/EDIT]

[seed_squall_it]

Attento! <input /> non è un elemento inline, ma un elemento rimpiazzato, esattamente come <img />! Gli elementi rimpiazzati hanno dimensioni intrinseche e non si comportano come gli elementi inline (anche se a volte il loro comportamento è molto simile).

Gli elementi in linea non hanno altezza, ma la "prendono" dal loro contenuto. Una soluzione, sarebbe quella di trasformare gli elementi[*] in elementi a livello di blocco affiancati.

li {
float: left;
}

A questo punto, potresti attribuire ad essi un'altezza con height o min-height (ti serve un hack perché IE non interpreta min-height):

min-height: YYpx;
height: auto !important;
height: YYpx;

Il ridimensionamento dell'altezza minima determinato con min-height di tutto il "blocco" della lista non ordinata, quando aumenti o diminuisci le dimensioni del carattere, si ottiene solo se dopo il tag[/list]aggiungi un tag
a cui assegni una classe che "ripulisce" il float degli elementi[*]:

br.clear {
clear: left;
}

In generale, gestire gli elementi[*] come block-level elements è più semplice che farlo come inline elements, specie se devi assegnare loro delle misure. Ovviamente devi azzerare anche i padding e i margin degli elementi <ul> e[*].
Per il resto fai delle prove.

[Miki73]

Ti ringrazio per la risposta, così ho appreso anche che <img> e <input> non sono elementi inline; per qunato riguarda la soluzione è proprio quello che ho fatto di floattare a sinistra tutti gli elementi della lista, ma facendo così (come del resto ho fatto con tutti gli elementi del corpo della pagina) la possibilità di fare una centratura rispetto alla finestra del browser fa a farsi benedire!

[seed_squall_it]

Hai provato a usare l'elemento <ul> per la centratura delle voci del menu? In pratica, si tratta di usare l'elemento <ul> (che assume larghezza pari alla somma delle larghezze dei singoli[*] che contiene) per centrare le voci che contiene.

body {
text-align: center; /* Centra orizzontalmente nella pagina per IE!!! */
}

ul {
text-align: left; /* Ripristina l'allineamento a sinistra del testo */
padding: 0;
margin: 0 auto; /* centra orizzontalmente nel box contenitore o
nella pagina per Opera e Mozilla */
}

li {
list-style: none;
float: left;
padding: 0;
margin: 0;
}

In sostanza, per centrare orizzontalmente un elemento in un altro, lo standard impone di assegnare auto come valore ai margini orizzontali di tale elemento. IE (che gli standard non li segue mai, anzi ne fa uno suo!), impone invece di dichiarare text-align: center nella regola del box contenitore di quello che si vuole centrare!

Questo per quanto riguarda la sola centratura orizzontale rispetto alla pagina o al box contenitore. Se vuoi centrare anche (o solo) verticalmente le voci del menu, puoi usare sempre l'elemento contenitore <ul> impostandolo con un position: absolute e i margini negativi.

ul {
position: absolute;
top: 50%
left: 50%;
margin: -YYpx -XXpx;
padding: 0;
}

li {
list-style: none;
float: left;
padding: 0;
margin: 0;
}

YY e XX sono esattamente la metà rispettivamente dell'altezza e della larghezza complessiva dell'elemento <ul>. Dovrai quindi assegnare esplicitamente un'altezza all'elemento <ul> (o agli elementi[*]) tramite height o line-height. Al posto di centrare l'elemento <ul> potresti anche (e forse più semplicemente) centrare un elemento <div> che contiene la tua lista, attribuendogli così dimensioni precise.
Ricorda che un elemento position: absolute ha sempre la posizione (determinata con top/bottom e left/right) riferita al suo elemento contenitore, purché esso sia position: relative. In caso contrario, se nessun elemento "padre" è position: relative, i box position: absolute si posizionano in relazione all'elemento body.

[Miki73]

Guarda ti darei ragione su tutto, se non ci fossero di mezzo i float, purtroppo tutto ciò che hai elencato non è fattibile; quella del float è un'ottima tecnica per allineare orizzontalmente elementi di blocco, che altrimenti (vedi position: absolute,relative,...) sarebbe molto più complesso; ma come ogni cosa anch'essa ha i suoi pro e i suoi contro: gli elementi floattati vengono estromessi dalla naturale disposizione degli elementi svincolandoli di fatto dal legame con i suoi elementi contenitori annullando così un qualsiasi tipo di intervento su di essi per regolare appunto gli elementi contenuti (vedi x esempio gli elementi[*] e <ul>).
In conclusione posso dire che più utilizzo la tecnica della disposizione a blocchi delle pagine, e più penso che quella delle tabelle, sebbene concordo col fatto che siano scorrette dal punto di vista semantico, è molto più comoda!

[seed_squall_it]

Lo so, ma anche gli elementi posizionati (absolute, relative e fixed) sono estratti dal flusso del documento, esattamente come quelli flottanti.
Cmq non è così impossibile capire il funzionamento dei float.
Se vuoi fare in modo che il blocco contenitore risulti "influenzato" dai blocchi flottanti al suo interno, ci sono 2 tecniche:

1. rendi flottante anche il contenitore e assegnagli una larghezza definita.

2. migliore della precedente secondo me (perché risolve un problema di Netscape 6 nella gestione dei contenitori di box flottanti), usa un tag vuoto come un
a cui assegni una classe apposita per "pulire" il float all'interno del blocco contenitore, appena dopo l'ultimo box flottante.

<br class="clear" />

dove la classe clear è fatta per es. così:

br.clear {
clear: left;
}

In questo modo, ripristini il normale flusso del documento all'interno del blocco contenitore che quindi viene influenzato dall'altezza dei blocchi flottanti.

Per quanto riguarda il posizionamento dei box flottanti e i loro contenitori è tutto qui...io stesso ci sono impazzito l'estate scorsa, ma ora mi rendo conto che è più comodo usare i CSS per realizzare queste cose, piuttosto che le tabelle.
Poi ovviamente c'è sempre il buon IE che ha un bel po' di bug nella gestione dei box flottanti... :rollo: