posizionamento img e titoli

[elisamito]

Ciao ragazzi,
potreste aiutarmi a posizionare ina una pagina html, delle immagini nel seguente modo:

img1 img2 img3
titolo1 titolo2 titolo3

ho provato all'interno un div, ma niente da fare...
vi ringrazio per l'aiuto!
Un grande saluto.
Elisa

[nicolabiondo]

per ogni img o title devi dargli una classe

<img class="img1
<img class="img2

etc etc

poi nel css devi avere delle cose del tipo:

.img1
{
float: left;
}

.img2
{
float: left
}


E così via per tutti. In questo modo si affiancano uno di seguito all'altro allinendoli a sinistra (per la destra basta mettere float: right)
Quando poi vuoi iniziare una nuova riga allora nella classe css corrispondente devi specificare clear: both; altrimenti continua a inserirti di seguito agli elementi img o title

[Mich_]

Non si capisce dallo schemino (gli schemi vanno realizzati tramite il tag [ code ] - bottone # sopra il form di inserimento) ma immagino che vuoi affiancare una serie di blocchi, ciascuno contenente una immagine e la sua didascalia:

<div id="contenitore">
  <div class="immDidas">
    <img ... />
    <h1>titolo</h1>
  </div>
  <div class="immDidas">
    <img ... />
    <h1>titolo</h1>
  </div>
  ...
</div>


CSS:
#contenitore {
  ...
}
#contenitore:after {
  clear: both;
}
.immDidas {
  float left;
  height: ...;    /* se serve*/
  widht: ....;    /* se serve*/
}
.immDidas img {
  display: block;
  margin: 0 auto;   /* per centrare nei browser standard */
}
.immDidas h1 {
  width: 100%;
  text-align: center;
}

[fcaldera]

potrebbero essere ad esempio tre div floattati

<div id="contenitore">

   <div>
      <img ...>
      


         descrizione
      </p>
   </div>

   <div>
      <img ...>
      


         descrizione
      </p>
   </div>

   <div>
      <img ...>
      


         descrizione
      </p>
   </div>


</div>

CSS

#contenitore { height: auto; overflow: hidden; width: 300px;}
#contenitore div {float: left; width: 33%;}
#contenitore img {display: block;}

[elisamito]

ciao amici,
si scusate nn mi sono spiegata bene, in pratcia come se fosse in una tabella
<table>
<tr>
<td>img1</td>
<td>img2</td>
</tr>
<tr>
<td>ititolo1</td>
<td>titolo2</td>
</tr>

tutto affiancato con i loro titoletti sotto...pero' nn ho capito perchè hai creato #contenitore e poi è vuoto...

[elisamito]

grazie mille amici, vi chiedo però se mi spiegate una cosa del codice

#contenitore { height: auto; overflow: hidden; width: 300px;} overflow cosa si intende?
#contenitore div {float: left; width: 33%;} float cosa si intende?
#contenitore img {display: block;} display block, blocco l'immagine?

grazie mille per l'aiuto!
Buon pranzo!

[fcaldera]

Originariamente inviato da elisamito
grazie mille amici, vi chiedo però se mi spiegate una cosa del codice

#contenitore { height: auto; overflow: hidden; width: 300px;} overflow cosa si intende?
#contenitore div {float: left; width: 33%;} float cosa si intende?
#contenitore img {display: block;} display block, blocco l'immagine?

grazie mille per l'aiuto!
Buon pranzo!

1) Serve per fare un clearing del contenitore, ovvero per fare in modo che il div contenitore racchiuda correttamente i div floattati. height: auto insieme a overflow: hidden è un workaround per ottenere il clearing
http://www.positioniseverything.net/easyclearing.html

2) float significa che il blocco scorre (a destra o sinistra) fino a che trova spazio per farlo.
http://css.html.it/articoli/leggi/53...ria-e-pratica/

3) poiché un immagine è un elemento inline, tutto ciò che posiziono successivamente si troverà di fianco all'immagine. Se devi inserire un titolo o un testo al di sotto devi dire all'immagine di comportarsi come un elemento blocco.

[salasir]

Come ho già suggerito in un'altra occasione ad un richiesta identica, la soluzione a mio parere più pulita e semanticamente corretta sarabbe utilizzare le liste di definizione per ottenere un risultato come questo ( descrizione: Esperimenti con le liste di definizione).

Altro link: Definition lists for image gallery

[elisamito]

grazie fcaldera!
si bello anche l'effetto polaroid!
però non capito una cosa, se volessi avere sulla stessa riga 4 img anzichè tre, dovrei cambiare il valore width: in contenitore e la percentuale in contenitore div?
Grazie per la minilezione

[salasir]

Sì.
Il width: 300px ti stabilisce la larghezza del contenitore, mentre il width: 33% definisce la quantità del contenitore che occuperà la tua immagine.

Quindi, se è sufficiente la larghezza a 300px modificherai la percentuale in 25%, altrimenti aumenti anche il contenitore.