molte immagini affiancate in un unica riga

**the drummer** · 06-06-2008, 17:43

Salve a tutti e scusate se mi troverete impreparato su questo semplice argomento.
Devo realizzare una pagina web dove inserire una serie di immagini affiancate orizzontalmente in modo tale che queste vengano visualizzate sempre e solamente in una sola riga senza andare a capo, anche quando la pagina del browser viene rimpicciolita. In una situazione del genere vorrei che la visione di tutte le immagini avvenisse grazie allo scorrimento di una barra orizzontale.
La cosa mi risulta difficile perchè non trovo alcun codice che mi consenta di evitare il ritorno a capo quando l'ultima immagine della serie raggiunge il bordo della finestra.

Vi faccio un esempio.
Suppopniamo il codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./stile.css">
</head>
<body>
<div class="foto">
<ul>
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[*][img]./tucano1.jpg[/img]
[/list]
</div>
</body>
</html>

con questo .css

.foto {
/* Box che racchiude la galleria di foto*/
padding : 0px;
margin : 0px;
width : 100%;
border : 1px solid;
white-space : nowrap;
}

.foto ul {
/* Dichiarazione dell'elenco puntato*/
margin: 0px 0px 0px 0px;
display : inline;
overflow-x : scroll;
white-space : nowrap;
}

.foto li {
/* Singolo punto dell'elenco puntato*/
float: left;
list-style-type: none;
}

Allego anche il file immagine se qualcuno volesse provare l'effetto che fa.

Il codice non è perfetto, ma questo è il massimo che sono riuscito ad ottenere.
Qualcuno ha qualche idea su come risolvere il problema?

Grazie a tutti.
#####o

**Myaku** · 06-06-2008, 19:14

hai provato a dare l'overflow al div che contiene la lista?

**the drummer** · 06-06-2008, 20:04

Ciao Myaku, grazie per la risposta.
Purtroppo si, ho provato sia con overflow che con overflow-x che mi sembrava più congeniale.
Dimenticavo di dire che ho provato sia con IE6 che con Firefox: stesso risultato, la serie va sempre a capo

**mucu** · 07-06-2008, 01:22

questa discussionne mi interessa molto:
non ho una vera soluzione in quanto sto ancora affrontando il problema

se parliamo di molte foto esitono altri problemi ( sto parlando di molte foto, molto + di 100 )
se parliamo di un numero considerevole ma non eccessivo la soluzione migliore è una tabella con singola riga, con il problema con opera
per dodici foto quante ne hai mostarate
metti un'altezza (calibrata) all' <ul> e un display: table; per aggirare il problema di IE
e dai un display: table-cell; al[*]

**the drummer** · 07-06-2008, 10:38

Ciao mucu e grazie per l'interessamento.
Allora, se ben ho capito tu mi suggerisci di modificare il codice della pagina in questo modo:

codice:

<div class="foto">
		<table summary="pippo">
		<tr><td>
		<ul>
		[*][img]./tucano1.jpg[/img]
                          ...[/list]
                          </td></tr>
                          </table>
</div>

E poi di apportare delle modifiche al css su UL e LI...
Fatto!

Però non funziona

I tuoi suggerimenti sono preziosi ma ho un chiarimento da chiederti:
Io uso Topstyle pro 2.5 per l'edit del css, sicuramente un po' vecchiotto ma funzionante, quando inserisco le direttive che mi hai suggerito (display:table in UL; e display:table-cell il LI

mi diche che queste direttive non sono valide per gli elementi in oggetto; però non so se questo sia importante.

P.S.
In IE la soluzione proposta (come l'ho capita io ovviamente) non genera alcuna differenza;
in Firefox, addirittura, le foto vengono messe una sotto all'altra :berto:

**the drummer** · 11-06-2008, 09:48

TROVATO

Ecco il codice CSS

codice:

.foto {
	/* Box che racchiude la galleria di foto*/
	padding : 0px;
	margin-top : 5px;
	width : 100%;
	white-space : nowrap;
	overflow-x : scroll;
	border : 1px solid Black;
}

.foto a {
	/* Anchor dove è collegata la foto*/
	width : 120px;
	height : 120px;
	padding : 0px;
	margin : 5px;
	background-repeat : no-repeat;
	background-position : center;
}

Ecco il codice HTML

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./stile.css" media="screen">
</head>
<body>
<div class="foto">
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
		<a href="#" style="background-image : url(./tucano1.jpg);"</a>
</div>
</body>
</html>

Grazie a tutti per l'interessamento! Buona giornata

**mucu** · 11-06-2008, 10:28

ma l'hai testato su qualche browser e piattaforma differente?
perchè overflow-x non è universale
facci sapere

**gengix** · 11-06-2008, 11:16

@the drummer:

Ti do un paio di consigli in merito alla tua soluzione, poi deciderai te se ascoltarli o meno.

-Come detto da Mucu la propr overflow-x : scroll; non è supportata da tutti i browser.

-La tua soluzione è poco accessibile. Un lettore di schermo non ha un'alternativa testuale a quelle immagini, o in caso di disabilitazione di quest'ultime manca sempre un'alternativa (come l'attributo alt).

-Il secondo forse ti può interessare di più per un eventuale futuro.
Con browser molto rigidi nei confronti degli standard quelle immagini non saranno cliccabili (sempre se vuoi che lo siano). Uno di questi browser è IE8.

Se proprio vuoi optare per quella soluzione ti consiglio di inserire uno span all'interno del link con del testo (meglio se attinente al contenuto dell'immagine) e tramite foglio di stile dargli la proprietà "visible:hidden;".
In questo modo nella zona dello span il link sarà attivo, sarà compreso da tecnologie assistive e in caso di disattivazione degli stili vi sarà cmq del testo cliccabile.

Di base però non è una soluzione molto elegante quella di utilizzare dei background-image.

**the drummer** · 11-06-2008, 18:18

Allora, rispondendo a mucu:
In effetti non ho avuto molto successo con gli altri browser, tuttavia ho constatato che il problema sembra non essere l'overflow-x ma qualcos'altro che cercherò di scoprire.

Per gengix:
Ciao gengix, grazie del tuo intervento.
Come già detto a mucu, questa soluzione non è proprio portabilissima e ha sicuramente dei difetti, il fatto è che ho smanettato parecchio e questa sembra l'unica che funziona; se qualcuno ha qualche idea si faccia avanti: ho creato questa discussione proprio per questo.
Riguardo il fatto che le immagini non sono cliccabili, ti posso solo dire che con IE6 e IE7 funziona (bisogna dare la direttiva javascript onclick="...." al tag A), IE8 non so, non l'ho mai provato, e poi è una beta, non si sa mai...
Comunque grazie del consiglio, implementando come dici tu il risultato finale non cambia quindi aggiungerlo è tanto meglio.

Bisogna anche chiarire il fatto che io sto facendo una pagina web di supporto ad una applicazione ben specifica che non deve andare in internet, quindi non sto applicando tutti i criteri di accessibilità che sicuramente andrebbero applicati in caso contrario.
A Presto

**Myaku** · 11-06-2008, 21:04

Originariamente inviato da the drummer

Ecco il codice HTML

codice:

		<a href="#" style="background-image : url(./tucano1.jpg);"</a>

òcio ... in tutti i link ti sei perso un ">", non hai chiuso bene

Discussione: molte immagini affiancate in un unica riga

Strumenti discussione

Ricerca discussione

Visualizza

molte immagini affiancate in un unica riga

Permessi di invio