Devo fare un elenco con: allineamento a sx e dx e con righe diverse!

[Maximo75]

Per intenderci così!!!


devo fare dei[*] pari e dispari e altri[*] sx e dx, ma come li dichiaro?

.li.pari (....)
.li.dispari (......)
.li.pari.sx,.li.dispari.sx (float: left
.li.pari.dx,.li.dispari.dx (float: right)

facendo in questo modo mi allinea cmq tutto a sx!!!

E' l'unico modo per ricreare questa struttura?

[mucu]

si potrebbe ovviamente usare una tabella
oppure mettere una delle voci (squadra o punteggio) in uno span e farlo floattare dalla parte opposta al text align del li
mi vengono in mente solo queste due opzioni, ma l'ora è tarda e mi scuserai

[Mich_]

Attenzione alla sintassi!!
L'idea di maximo e` corretta, ma la sintassi no.

HTML:

<ul>
  <li class="sin disp">sinistra dispari
  <li class="des disp">destra dispari
  <li class="sin pari">sinistra pari
  <li class="des pari">dstra pari
...[/list]

Nota che in ogni li vengono definite due classi (separate da spazio)

CSS:

.sin {
  float: left;
}
.des {
  float: right;
}
.disp {
  color: yellow;
}
.pari {
  color: green;
}

MA ATTENZIONE
La marcatura e` semanticamente sbagliata.
Nel caso citato si devono usare le liste di definizione:
<dl> al posto di <ul>
<dt> per le squadre
<dd> per il punteggio

Poi la logica del CSS e` la stessa, ma non serve definire due classi in ogni elemento

[Maximo75]

Mettetevi le mani nei capelli, ho risolto in questo modo:

CSS

div#menu_sx div#mini a.sx{text-align:left;width:99px;padding-left:10px;}
div#menu_sx div#mini a.dx{text-align:right;width:20px;	padding-left:1px;padding-right:10px;font-weight: bold;}
div#menu_sx div#mini li.parisx{color:#000;background:#c6d6e6;float: left;}
div#menu_sx div#mini li.paridx{color:#000;background:#c6d6e6;clear:right;}
div#menu_sx div#mini li.disparisx{color:#000;background:#9daded;float: left;}
div#menu_sx div#mini li.disparidx{color:#000;background:#7daded;clear:right;}

CODICE

<ul>
      <li class="disparisx"><a class="sx">simone</a>
      <li class="disparidx"><a class="dx">24</a>
      <li class="parisx"><a class="sx">massimo</a>
      <li class="paridx"><a class="dx">21</a>
      <li class="disparisx"><a class="sx">enrico</a>
      <li class="disparidx"><a class="dx">2o</a>
      <li class="parisx"><a class="sx">moses</a>
      <li class="paridx"><a class="dx">2</a>				[/list]

[Maximo75]

Ritorno sull'argomento!!!

Come mi è stato suggerito provo ad usare la lista di definizione,
per sostitire la mini classifica di questo sito!!!

Sono arrivato a
questo punto.

si può dichiarare un dt di sfondo e poi un dt per la squadra e un dd per i punti?

[Mich_]

Non so cosa sia "un dt di sfondo"; se intendi uno sfondo per il <dt>, lo si puo` fare.

Il tuo codice mi pare corretto, a parte:
- in alcuni brwoser non basta definire un elemento del background-position: conviene metterli ambedue (anche se c'e` il repeat)
- non vedo la definizioe di larghezza per il blocco #mini, oppure per il <dl>, per cui si stringe il piu` possibile attorno al <dt> in cui hai definito la larghezza.
- l'uso del clear: dovresti definire il float in TUTTI i dt e dd, e il clear solo nei dt (clear e float possono convivere nello stesso elemento: il primo elimina il float precedente, in tal caso il float serve per i blocchi successivi).

[Maximo75]

Originariamente inviato da Mich_
Non so cosa sia "un dt di sfondo"; se intendi uno sfondo per il <dt>, lo si puo` fare.

Il tuo codice mi pare corretto, a parte:
- in alcuni brwoser non basta definire un elemento del background-position: conviene metterli ambedue (anche se c'e` il repeat)
- non vedo la definizioe di larghezza per il blocco #mini, oppure per il <dl>, per cui si stringe il piu` possibile attorno al <dt> in cui hai definito la larghezza.
- l'uso del clear: dovresti definire il float in TUTTI i dt e dd, e il clear solo nei dt (clear e float possono convivere nello stesso elemento: il primo elimina il float precedente, in tal caso il float serve per i blocchi successivi).

Ho modificato il css, ora in IE si vede come voglio, mentre in FF e Opera si "sballa" tuto!!!

Come "dt di sfondo" mi sono reso conto che impossibile, almeno nel mio caso, dato che uso un'immagine come sfondo!

Cosa intendi nel punto 1 cosa devo mettere in ambedue?
Ho impostato la larghezza in dl!
Non ho capito molto cosa inendi nel punto 3 anche se sono sicuro che si trova li il mio errore!!!

[Mich_]

Devo dire che un CSS fatto cosi` e` molto difficile da controllare: una bella lista indentata sarbbe molto meglio.
Anche l'innestamento (inutile) dei selettori non contribuisce alla chiarezza.

Vedi ad esempio qui quali sono i valori che si possono assegnare ai vari attributi CSS:
top da solo non e` citato, ma e` sempre abbinato ad un altro valore che definisce la posizione orizzontale.

Non so perche` usi uno sfondo fatto con un'immagine, quando la tua immagine e` una riga omogenea (almeno io la vedo tale). Potrebbe essere sufficiente un colore.

Se in IE si vede bene e in altri no, probabilmente hai sbagliato i conti. In effetti il padding e` trattato in modo diverso nel browser IE: molto succintamente:

La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

[Maximo75]

Originariamente inviato da Mich_
Devo dire che un CSS fatto cosi` e` molto difficile da controllare: una bella lista indentata sarbbe molto meglio.
Anche l'innestamento (inutile) dei selettori non contribuisce alla chiarezza.

Vedi ad esempio qui quali sono i valori che si possono assegnare ai vari attributi CSS:
top da solo non e` citato, ma e` sempre abbinato ad un altro valore che definisce la posizione orizzontale.

Non so perche` usi uno sfondo fatto con un'immagine, quando la tua immagine e` una riga omogenea (almeno io la vedo tale). Potrebbe essere sufficiente un colore.

Se in IE si vede bene e in altri no, probabilmente hai sbagliato i conti. In effetti il padding e` trattato in modo diverso nel browser IE: molto succintamente:

Ho messo in ordine il css, credo che tu lo preferisca così!
Cosa sono i selettori? calcola che questo pezzo fa parte di un css molto più grande, quidi parti che potrebbero risultare inutili mi servono per altre cose.

Messo a posto top

In teoria lo sfondo dovrebbe essere un'immagine che da l'effetto rilievo + ombra!

Infine ho ricontrollato i margini etc etc e sono sicuro che sono giusti, ma anche diminuendo in modo estremo i numeri il risultato non cambia, l'errore deve essere in altri punti!

[Mich_]

Adesso il CSS e` molto piu` capibile.

In qualche brwoser (ma non credo FF), serve uno spazio tra i duepunti e il valore:

color:#000;    /* non gli piace */
color: #000;    /* va bene */

Non e` un errore secondo il W3C, ma non tutti seguono correttamente il W3C.

Esempio di selettore: div#menu_sx div#mini h2.data
In realta` questo puoi scriverlo come
#mini h2.data
Infatti l'oggetto che ha id="mini" deve essere unico nella pagina, quindi non serve ne` dire che e` figlio di #menu e neppure che e` un <div>.

PS: i selettori sono uno degli elementi dei CSS: se hai letto un tutorial lo devi sapere.

In effetti facendo i conti tornano; pero` non hai definito il padding-right nel dt ne` il padding-left nel dd. Potrebbe essere che quegli oggetti hanno un padding di default.
Io farei un padding del tipo:
padding: 2px 10px 2px 0;
al posto del tuo:
padding-right:10px;
padding-top:2px;
padding-bottom:2px;

Anche azzerare esplicitamente i margini (dato che non li usi) potrebbe aiutare ad ottenere cio` che vuoi.