lista in orizzontale

[oronze]

salve....ho una struttura così
<div>
<div><ul>
<div>
la ul è formata da moltissime miniature di immagini (una 20ina circa) e vorrei che restassero tutte su una riga...ho messo ai vari li float: left ma finito il loro spazio orizzontale vanno a capo.
Ho vari problemi ai quali non so ovviare...chiunque mi aiuterà vincerà una pizzata virtuale

1)come faccio a non mandare i vari[*] a capo? ho provato withespace: nowrap ma non va.

2)ho necessità che i div siano affiancati e quindi ho messo al primo e al secondo float: left e al terzo float right e ci siamo ma...devo per forza dare una dimensione a quello centrale e non voglio perchè vorrei che i div 1 e 3 siano di 150px mentre quello centrale occupi tutto lo spazio restante...non saprei come fare...ovviamente se setto tutto in percentuali funziona correttamente ma nei div 1 e 3 devo mettere delle freccette per scorrere il div che contiene i vari[*] (ovviamente il div centrare ha overflow: hidden )

[simulacron]

Possibilità:

<div>
<span> 
image1
image2
image3
......
imagen
</span>
</div>

Il div lo usi per bloccare il paragrafo con un display:inline (oltre al resto, ovviamente), lo span lo usi per la gestione della linea.
Puoi usare, naturalmente ul e li ma incappi nei bachi di IE, credo......Ed è più complessa da piazzare e gestire.

[oronze]

ecco, come al solito non ci ho capito molto
il dic lo usi per bloccare il paragrafo? che paragrafo? ahhhh ora ho capito....ma...mhhhh semanticamente è moooooooolto più corretto mettere tutte le immagini in una lista proprio non si può ovviare? e se sbatto ul in uno spam? ora provo

come pensavo...non cambia nulla o mando a quel paese la semantica e l'accessibilità oppure non si fa? uffaaaaaaaa

[simulacron]

Prova con Gianluca Troiani e il suo libro sui CSS. In questa pagina, nel riquasro in alto a destra, c'è una scritta: "codice degli esempi" clicckaci su:Scaricherai degli esempi tra cui le liste o dei menu orizzontali. Sostituisci o sovrapponi le voci con le tue immagini e il gioco è fatto.
In alternativa, cerca in rete "liste (o menu) orizzontali Css", immagini e liste o, ancora immagini e menu (orizzontali, ovviamente).
Dovresti trovare anche senza Javascript.
sostituisci il giusto; usa la tua fantasia e la creatività.
Varia gli esempi, adattali alle tue esigenze.
Vedrai che qualcosa viene fuori. Non preoccuparti se non capisci subito (sembra il tuo cruccio): è normale le prime volte.....E, spesso, anche dopo....

[oronze]

Originariamente inviato da simulacron
Prova con Gianluca Troiani e il suo libro sui CSS. In questa pagina, nel riquasro in alto a destra, c'è una scritta: "codice degli esempi" clicckaci su:Scaricherai degli esempi tra cui le liste o dei menu orizzontali. Sostituisci o sovrapponi le voci con le tue immagini e il gioco è fatto.
In alternativa, cerca in rete "liste (o menu) orizzontali Css", immagini e liste o, ancora immagini e menu (orizzontali, ovviamente).
Dovresti trovare anche senza Javascript.
sostituisci il giusto; usa la tua fantasia e la creatività.
Varia gli esempi, adattali alle tue esigenze.
Vedrai che qualcosa viene fuori. Non preoccuparti se non capisci subito (sembra il tuo cruccio): è normale le prime volte.....E, spesso, anche dopo....

ma guarda che uso i css da una vita e ci so programmare

[simulacron]

Io t'ho dato solo delle indicazioni che mi sembravano pertinenti al tuo caso......
Se sai già tutto o non ti interessano, ignorale......

[oronze]

Originariamente inviato da simulacron
Io t'ho dato solo delle indicazioni che mi sembravano pertinenti al tuo caso......
Se sai già tutto o non ti interessano, ignorale......

mah, pertinenti al mio caso è proporre una soluzione come hanno fatto gli altri...sparare nel mucchio è diverso....me li sono visti tutti gli esempi ma nulla è pertinente al mio caso...me ne sarà sfuggito qualcuno? se c'è indicamelo cortesemente così risolvo

[simulacron]

Originariamente inviato da oronze
mah, pertinenti al mio caso è proporre una soluzione come hanno fatto gli altri...sparare nel mucchio è diverso....me li sono visti tutti gli esempi ma nulla è pertinente al mio caso...me ne sarà sfuggito qualcuno? se c'è indicamelo cortesemente così risolvo

Guarda che devi prima capire quelli e poi adattare al tuo caso.
La differenza tra te e loro è che tu hai immagini mentre loro hanno stringhe di caratteri e tag adeguati a quell'esempio. In quel link che ti ho dato, al capitolo 5 c'è l'esempio 5.23: è un menu orizzontale che si può trasformare benissimo in una lista dello stesso tipo, dato che , all'incirca, sono la stessa cosa.
Da lì a sostituire quanto ti interessa e tagliare il superfluo non penso che ci vada una scienza.
Del resto, se vuoi imparare qualcosa di nuovo, non puoi aspettare che te lo servano gìa fatto, pronto ad essere usato. devi provare, sbagliare e riprovare, finchè viene giusto. In caso opposto, perdete tempo in due: tu che hai ricevuto senza imparare nulla (la volta successiva saremo di nuovo daccapo) e chi te l'ha fornito già fatto senza darti indicazioni su cosa studiare e dove.
Se avessi avuto un difetto su cui chiedere delucidazioni(ho fatto questo e mi spara oltre ai lati del layout,ad esempio), si sarebbe potuto rispondere e a cui ho risposto altrove in questo forum.
Se la poni in questi termini, generici, no...Al massimo ti si può dire:qui ci sono le indicazioni generiche sul tuo problema; se hai domande più precise (come quella testè indicata come esempio) siamo qua.
In caso opposto, non si può e non si deve fare molto di più: non sarebbe utile neppure per te.

[oronze]

ma sono io che parlo arabo? boh...mi quoto

la ul è formata da moltissime miniature di immagini (una 20ina circa) e vorrei che restassero tutte su una riga...ho messo ai vari li float: left ma finito il loro spazio orizzontale vanno a capo.
Ho vari problemi ai quali non so ovviare...chiunque mi aiuterà vincerà una pizzata virtuale

1)come faccio a non mandare i vari[*] a capo? ho provato withespace: nowrap ma non va.

con questo penso di intendere che dell'esempio che mi hai dato tu non so che farmene ma forse mi sono spiegato male la prima volta...vediamo se ora sono più chiaro

io voglio dire che ho tante belle immaginette che ho messo tutte sulla stessa riga
<li style="float: left">
perchè se usassi display: inline perderei la possibilità di dargli delle dimensioni. io ho questo codice (vediamo se riesco a spiegarmi meglio)

<div style="width: 500px; overflow: scroll">
<ul>[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[*]<img bla bla bla />[/list]
</div>

dato che il div dentro il quale sono contenute occupa 500px, la lista, finito lo spazio sulla riga a loro disposizione vanno a capo.....io vorrei che non vadano a capo e rimangano sotto il div
(allego immagine per chiarezza)

nella seconda img ovviamente i tag li dovrebbero continuare all'interno del div dando quindi la possiilità di fare una scoll orizzontale....io invece ottengo la prima...i li stanno sulla riga finche hanno spazio ma poi appena finisce vanno a capo e riempiono il div in verticale
servono altri chiarimenti?

[simulacron]

......omissis.......
dato che il div dentro il quale sono contenute occupa 500px, la lista, finito lo spazio sulla riga a loro disposizione vanno a capo.....io vorrei che non vadano a capo e rimangano sotto il div
(allego immagine per chiarezza)

nella seconda img ovviamente i tag li dovrebbero continuare all'interno del div dando quindi la possiilità di fare una scoll orizzontale....io invece ottengo la prima...i li stanno sulla riga finche hanno spazio ma poi appena finisce vanno a capo e riempiono il div in verticale
servono altri chiarimenti?

.

Una cosa dovresti spiegarmi (questa è colpa mia, mi sa...)
Hai 20 immagini da piazzare orizzontalmente sulla stessa linea ma quasi sicuramente qualcuna ti avanzerà e tu vorresti farla stare lì lo stesso in modo che con uno scroll orizzontale si possano vedere lo stesso?È così?......
Se ho capito giusto puoi provare con un width:auto oppure saltarlo..... e sperare che la finestra non slabbri: prova a mettere,Overflow:scroll....