Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    AIUTO: immagini affiancate in scrollbox a dimensione fissa

    Ho un problema in apparenza banale che non riesco a risolvere, devo inserire una serie di immagini, 3, 4 o 5 in un div che funga da scrollbox orizzontale, le immagini hanno tutte la stessa altezza, le dimensioni della scrollbox sono fisse perchè si posiziona sul template in un determinato posto.
    Perchè quando metto le immagini questa invece di affiancarsi si posizionano finchè entrano nello spazio una di fianco all'alta e poi vanno a capo?
    Questo è l'estratto del codice utilizzato:

    Estratto del css:
    .boximg{
    height: 220px;
    width: 660px;
    overflow: auto;
    /* overflow-x:scroll ; */
    /* overflow-y: hidden; */
    white-space: nowrap;
    margin-top: 15px;
    margin-bottom: 10px;
    }

    .affiancaimg{
    float:left;
    /* margin-right: 10px;*/
    }

    Estratto della pagina:

    <div class="boximg">
    <div class="affiancaimg"><img src="immagine1.jpg" height="200" alt="immagine1"></div>
    <div class="affiancaimg"><img src="immagine4.jpg" height="200" alt="immagine2"></div>
    <div class="affiancaimg"><img src="immagine4.jpg" height="200" alt="immagine3"></div>
    <div class="affiancaimg"><img src="immagine4.jpg" height="200" alt="immagine4"></div>
    </div>

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    E` proprio questo l'effetto del float.

    Se vuoi fare l'effetto di scorrimento, devi inserire un blocco piu` grande dentro uno piu` piccolo.
    ESEMPIO:
    codice:
    HTML:
    <div id="fisso">
      <div id="scorr">
        <img class="affiancaimg" src="immagine1.jpg" alt="immagine1">
        <img class="affiancaimg" src="immagine2.jpg" alt="immagine2">
        <img class="affiancaimg" src="immagine3.jpg" alt="immagine3">
        ....
      </div<!-- scorr -->
    </div><!-- fisso -->
    
    CSS:
    #fisso {
       height: 220px;
       width: 660px;
          overflow: auto;
       white-space: nowrap;
          margin-top: 15px;
          margin-bottom: 10px;
    }
    #scorr {
      height: 200px;
      width: 2000px;   /* valore da sistemare - devono starci tutte */
    }
    .affiancaimg {
      float:left;
      height: 200px;   /* megliio che la formattazione stia tutta nel CSS */
         }
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Grazie mille, funziona perfettamente, ora però avrei un altra domanda, se volessi che quel div interno, quello che hai chiamato scorr, dipendesse come larghezza dal numero di foto inserite?
    Nel senso, ne metto 3 è largo 3 foto, ne metto 4, è largo 4 foto, si può fare?

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Non mi risulta che si possa fare con solo CSS.
    Si puo` fare senza dubbio con strumenti lato server: in pratica quando sai quante foto ci sono (il programma sul server deve saperlo), fai il conto di quanti px ci vogliono e determini la larghezza del blocco.

    Un parametro CSS si puo` inserire anche all'interno del codice HTML, mediante l'attributo style="..."
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.