Distanza Verticale Tra Le Immagini

[mavewind]

non riesco a dare una distanza ad un elenco di immagini thmb che lincano l'immagine grande. Il codice è il seguente:
[img]immagine1[/img]
[img]immagine2[/img]
[img]immagine3[/img]
[img]immagine4[/img]
[img]immagine5[/img]
[img]immagine6[/img]


le immagini 5 e 6 sono a capo rispetto alle prime

Il css è il seguente:
.contimgthmb {background-color: #FFFFFF; border: 1px solid #996666; margin-bottom: 100; padding: 1px; position: relative; }
a.contimgthmb:link {background-color: #FFFFFF; border: 1px solid #990033; margin-bottom: 100; padding: 1px; position: relative; }
a.contimgthmb:visited {background-color: #FFFFFF; border: 1px solid #CC9999; margin-bottom: 100; padding: 1px; position: relative; }
a.contimgthmb:hover {background-color: #FFFFFF; border: 2px solid #996666; margin-bottom: 100; padding: 1px; position: relative; }

[fcaldera]

Ci sono alcune cose da corregere: ad esempio le immagini essendo elementi inline non prendo un margine, quindi devi renderle con display: block;
- Al margine devi specificare un'unità di misura
- Il posizionamento relativo puoi anche eliminarlo (visto che non usi le proprietà top e left) salvo motivazioni che sai tu
- Non serve ripetere tutte le proprietà sulle pseudooclassi se non variano

[img]immagine1[/img]
[img]immagine2[/img]
[img]immagine3[/img]
[img]immagine4[/img]
[img]immagine5[/img]
[img]immagine6[/img]



a.contimgthmb  {
   background-color: #FFFFFF; 
   border: 1px solid #996666; 
   padding: 1px; 
}

a.contimgthmb img {
   display : block;
   margin-bottom : 20px;
}
a.contimgthmb:link { border: 1px solid #990033; }
a.contimgthmb:visited {border: 1px solid #CC9999; }
a.contimgthmb:hover {border: 2px solid #996666; }

[mavewind]

Grazie molte per la risposta.
Sono daccordo su tutto. Le unità di misura le ho dimenticate mentre postavo il codice.
Mi succede però che con il display: block le immagini mi vanno tutte a capo mentre vorrei che si creassero delle linee di immagini.

[fcaldera]

sorry, avevo capito che le volevi disporre una sotto l'altra. Se le vuoi affiancare puoi renderle float ma devi specificare una dimensione orizzontale

prova cambiando questa regola:

a.contimgthmb img {
float : left;
margin-right: 15px;
width: /* qui imposti la larghezza delle foto */
}

attenzione: all'elemento che contiene elementi flottati dovrai applicare una qualche sorta di clearing per poterli racchiudere correttamente (nel caso cerca float clearing sul forum o su google)

[thomas_anderson]

devi aggiungere al 'float' anche 'display: inline' per IE, che raddoppia il margine. FF e Opera ingorano la dichiarazione e rendono l'immagine automaticamente di blocco.

[mavewind]

Signori, vi ringrazio molto tutti. Seguendo i vostri consigli, il codice inizia a funzionare.
Saluti