Div che si adatta in larghezza.

gnardell · da **gnardell** » sabato 24 settembre 2011, 17:04

Salve,
non sto riuscendo a risolvere un problema che dovrebbe essere piuttosto semplice.
Ho creado un contenitore per una galleria di immagini che dovrebbero essere visualizzate affiancate con una scroll bar orizzontale con il seguente codice:
<div id="gallery">
<img src="img/foto/finestre.jpg" alt="Finestre.jpg" >
<img src="img/foto/in_equilibrio.jpg" alt="In equilibrio.jpg" >
<img src="img/foto/giochi.jpg" alt="Giochi.jpg" >
</div>

nel css ho inserito invece:

#gallery {
width:2000px;
}

#gallery img { display: block;
padding:0.5em;
margin-bottom:auto;
margin-top:auto;
float: left;
}

Il punto è che ho dovuto indicare una larghezza precisa per il il div, altrimenti le immagini vengono visualizzate una sotto l'altra invece che affiancate.
Ma il div è più grande di quello che mi serve e vorrei che si addattasse automanticamente in base alle immagini inserite di volta in volta, senza dover ogni volta indicare la larghezza.

diego.viola · da **diego.viola** » sabato 24 settembre 2011, 20:05

Ciao, ti rispondo in fretta. Se assegni la proprietà float non serve a nulla indicare display: block (che significa mandare a capo ogni elemento).

In realtà puoi benissimo omettere la dimensione fissa del tuo div padre (#gallery). E' sufficiente indicare difatti float: left per le immagini del div (appunto #gallery > img).

Try it!

gnardell · da **gnardell** » sabato 24 settembre 2011, 23:12

Putroppo non funziona.
Il risultato che vorrei ottenere è come questo http://www.elizabethweinberg.com/book/one, ma senza dichiarare la larghezza fissa del width.

diego.viola · da **diego.viola** » domenica 25 settembre 2011, 0:36

Potresti postare (formattando adeguatamente) il markup ed il codice css?

gnardell · da **gnardell** » domenica 25 settembre 2011, 10:18

Guesto è il codice e relativo css:

Sintassi: html [ Scarica ] [ Nascondi ]

<body>
<div id="page">
        <div id="header">
                <h1>
                        <a href="index.html" >Giuseppe Nardella</a>
                </h1>
        </div>
        <div id="navigation">
                <ul>
                        <li><a href="progetti.html">Progetti</a></li>
                        <li><a href="foto.html">Foto</a></li>
                        <li><a href="contatti.html">Contatti</a></li>
                </ul>
        </div>
 
        <hr >
        <div id="gallery">
                <img src="img/foto/finestre.jpg" alt="Finestre.jpg" >
                <img src="img/foto/in_equilibrio.jpg" alt="In equilibrio.jpg" >
                <img src="img/foto/giochi.jpg" alt="Giochi.jpg" >
        </div>
 
        <div id="footer">
                &copy; Giuseppe Nardella 2011
        </div>
</div>
</body>

Sintassi: css [ Scarica ] [ Nascondi ]

#page {
        width: 960px;
        position: relative;
        margin: 0 auto;
}
 
#header{
        width: 25em;
        float: left;
}
 
#menu {width:10em;
}
 
#navigation{
        position: relative;
        left: 20em;
}
 
ul{
        float:left;
        margin: 1.5em 0 0 0;
}
 
li {
        float: left;
        padding: 0 1em;
}
 
 
hr {
        clear:both;
}
 
#content img{display: block;
        margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
  }
 
#gallery {
        width:2000px;
}
 
#gallery>img {
        padding:0.5em;
        margin-bottom:auto;
        margin-top:auto;
        float: left;
 
    
  }
          
#thumbs img {display: block;
        margin: 0.5em;
    float: left;
  }
  
  h2 { margin-bottom: 0;
  }
  
#footer {
clear:left;
margin-top:0.5em;
text-align:center;
}
 
#progetti {
        width:3000px;
 
}
 
#progetti img {display: block;
position:relative;
top:-2em;
        padding:0 0.5em;
        margin-bottom:auto;
        margin-top:auto;
    float: left;
  }

diego.viola · da **diego.viola** » domenica 25 settembre 2011, 17:44

Scusami, ti ho frainteso. Ho guardato solo ora l'esempio ed ho capito a cosa miravi.

Ci ho speso qualche minuto per pensarci, ma senza attribuire una dimensione fissa al contenitore non saprei proprio come ricreare quell'effetto. Magari qualcuno più esperto saprebbe aiutarti.

L'unica soluzione che posso proporti (se proprio non vuoi impostare manualmente il width) è uno script javascript che calcoli la dimensione totale delle immagini e attribuisca il valore al div. In questa maniera ogni volta che aggiungi un'immagine lui ti aumenta le dimensioni del div e te le fa vedere tutte in fila con la scrollbar orizzontale.

Altro non mi viene in mente, so sorry.

Div che si adatta in larghezza.

Div che si adatta in larghezza.

Re: Div che si adatta in larghezza.

Re: Div che si adatta in larghezza.

Re: Div che si adatta in larghezza.

Re: Div che si adatta in larghezza.

Re: Div che si adatta in larghezza.

Chi c’è in linea