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
Rispondi quotando