img piccole: float ok - img grandi: float non funziona

**elgabs** · 11-01-2010, 00:16

Ciao a tutti,
chiedo aiuto su una questione di float, che finora ho usato abbastanza tranquillamente per layout anche complessi e ora non riesco a far funzionare e non capisco dove sbaglio.

Il cliente vuole una galleria di immagini che scorra orizzontalmente e come riferimento mi ha dato questo sito:

http://www.eoloperfido.com/portfolio.htm

Il sito di riferimento è però costruito con iframe e tabelle, cosa che vorrei evitare.
Ho pensato di assegnare alle immagini la proprietà float, ma non c'è verso di farlo funzionare.

O meglio, se uso delle immagini più piccole (width: 300px) non ci sono problemi, ma quelle che il cliente vuole inserire nella gallery arrivano anche a 800 px di larghezza..

Mi pare di capire che il problema sono le dimensioni del div che contiene queste immagini, visto che finché immagini entrano tutte nella finestra del browser non ci sono problemi.

Ho provato allora a dare width: auto, width: 100% e a non settare la width del div contenitore. Ho provato a innestare box dentro box oppure a mettere le immagini direttamente nel body senza nessun div intorno. Ho anche provato a mettere le immagini all'interno di una ul..

L'unico "papocchio" che è venuto fuori si può vedere a questo link:

http://www.justynapawlowska.com/prov...2/portf_1.html

Cosa curiosa, funziona più o meno con Internet Explorer mentre Firefox e Opera non ne vogliono sapere.

Insomma, non so più da che parte rifarmi!
Ringrazio in anticipo chiunque possa aiutarmi o darmi un link da studiare.

**miki003** · 11-01-2010, 00:54

Ecco qua funziona con tutti i browser!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#contenitore {
	clear: both;
	width: 2500px
}
img {
	float: left;
}
#clear {
	clear: both;
}
-->
</style>
</head>

<body>
      <div id="contenitore">
            [img]01.jpg[/img]
            [img]hat.jpg[/img]
            [img]somewhere.jpg[/img]
            <div id="clear"></div>
      </div>
</body>
</html>

**elgabs** · 11-01-2010, 01:05

ciao miki,
grazie mille per la risposta super veloce! Credo di non aver menzionato una cosa, effettivamente: mi servirebbe che la galleria fosse espandibile, il cliente aggiungerà delle img di volta in volta e potrebbe arrivare anche a 30 e più, quindi non c'è modo di sapere quale sarà la grandezza del contenitore in pixel.
Credi ci sia un modo per trasformare quel width: 2500px in un dato dinamico? ho provato con le percentuali (tipo 600%) ma ovviamente se non ci sono immagini c'è solo uno sfondo vuoto..

grazie ancora, davvero!

**miki003** · 11-01-2010, 01:47

Originariamente inviato da elgabs
ciao miki,
grazie mille per la risposta super veloce! Credo di non aver menzionato una cosa, effettivamente: mi servirebbe che la galleria fosse espandibile, il cliente aggiungerà delle img di volta in volta e potrebbe arrivare anche a 30 e più, quindi non c'è modo di sapere quale sarà la grandezza del contenitore in pixel.
Credi ci sia un modo per trasformare quel width: 2500px in un dato dinamico? ho provato con le percentuali (tipo 600%) ma ovviamente se non ci sono immagini c'è solo uno sfondo vuoto..

grazie ancora, davvero!

Serve un linguaggio di scripting come PHP oppure javascript con solo html e css non si può fare

**elgabs** · 11-01-2010, 13:18

Ciao Miki,
mi sa che hai ragione tu in effetti stavo vedendo le css expression, che permettono di inserire delle operazioni javascript all'interno dei css..

va beh mi metto a studiare che non fa mai male. Hai qualche sito di riferimento su questo?
Grazie ancora!

Discussione: img piccole: float ok - img grandi: float non funziona

Strumenti discussione

Ricerca discussione

Visualizza

img piccole: float ok - img grandi: float non funziona

Permessi di invio