Problema div/overflow

[amico3]

Salve ho un problema.

Ho una lista orizzontale cosi' realizzata

  -HTML-
  <ul id="horiz">[*]Elemento 1[*]Elemento 2[*]Elemento 3[*]Elemento 4[/list]

  -CSS-
  #horiz li {
    margin: 0;
    float: left;
    padding-right: 20px;
    list-style-type : none;
  }

ottenendo come risultato:

    Elemento 1         Elemento 2         Elemento 3         Elemento 4

vorrei inserirla all'interno di un div di dimensione più piccola della lista, in modo che compaia solo una barra orizzontale, in modo da ottenere il seguente risultato:

  
   |-----------------------------|
   |Elemento 1         Elemento 2|
   |<============--------------->|
   |-----------------------------|

lo sgorbio sotto (<===>) e' una scrollbar orizzontale

ho provato in tutti in innumerevoli modi ma gli elementi della
lista mi vanno a capo.

Avete qualche suggerimento?

Grazie!

[indigoindigo]

Dimensioni il div contenitore e applichi la proprietà

overflow: auto;

[amico3]

Originariamente inviato da indigoindigo
Dimensioni il div contenitore e applichi la proprietà

overflow: auto;

scusa.... hai provato a farlo???

-HTML-
<div id="scroll">
  <ul id="horiz">[*]Elemento 1[*]Elemento 2[*]Elemento 3[*]Elemento 4[/list]
</div>

-CSS-
#scroll {
 margin : 0;
 width : 200px;
 height : 60px;
 overflow : auto;
}

#horiz li {
 margin: 0;
 float: left;
 padding-right: 20px;
 list-style-type : none;
}

risultato:

   |-----------------------------|
   |Elemento 1                  ^|
   |                            ||
   |Elemento 2                  v|
   |-----------------------------|

lo sgorbio a lato e' una barra verticale...

[indigoindigo]

Non avevo provato..hai ragione, succede anche a me..
mi puzza di buggettino..si infischia del float (o anche del display) infatti anche se lo togli è uguale..si vede che preferisce la barra laterale..

sorry..

[Mich_]

Occorre dare una dimensione fissa anche al blocco #horiz.
Esempio

-HTML-
<div id="scroll">
  <ul id="horiz">[*]Elemento 1[*]Elemento 2[*]Elemento 3[*]Elemento 4[/list]
</div>

-CSS-
#scroll {
  margin : 0;
  width : 200px;
  height : 60px;
  overflow : auto;
}
#horiz {
  width: 60em;
}
#horiz li {
  margin: 0;
  float: left;
  width: 12em;
  padding-right: 20px;
  list-style-type : none;
}

In alternativa si puo` dare un'altezza ai vari elementi (in modo che non ci stia piu` di un[*] dentro il <ul> in altezza)

[amico3]

Originariamente inviato da Mich_
Occorre dare una dimensione fissa anche al blocco #horiz.

In alternativa si puo` dare un'altezza ai vari elementi (in modo che non ci stia piu` di un[*] dentro il <ul> in altezza)

...ecco identificato il vero problema.

Avrei potuto fare un div largo 1000 in un div largo 100 e cosi' funziona, ma il numero di elementi di tale lista viene generato dinamicamente, quindi non posso supporre che sia 1000 (rischierei di avere una scrollbar che non serve o che e' troppo lunga)

ho provato anche ad imporre l'altezza agli elementi, ma continua a mandare tutto a capo. Vi ringrazio per il vostro aiuto e rimango in attesa di ulteriori consigli.

PS: una cosa simile l'ho fatta già qualche tempo fa ed era funzionante su tutti i browser, ma era ancora il "tempo delle tabelle" e vorrei trovare una soluzione piu' pulita, partendo solo dal codice scritto nel primo post.

[Mich_]

Quindi hai la possibilta` di lavorare lato server.
Dovresti generare un codice CSS che tenga conto di quanti elementi inserisci.

Eventualmente anche inserendo un CSS specifico direttamente nella pagina (mentre quello generale e` inserito in un file a parte).