Cambiare la disposizione delle immagini.

[Minerva88]

Salve.
Ho queste foto http://yfrog.com/epfootxp però vorrei disporle nel container in modo diverso ovvero così

http://yfrog.com/epfootdj

<div id="container"> <div id="img"> 
 
[url="icone/maregr1.jpg"] [img]icone/marepc.jpg[/img][/url]
[url="icone/scoglieragr.jpg"] [img]icone/scoglierapc.jpg[/img][/url]  
[url=""] [img]icone/volapc.jpg[/img] [/url]
[url=""] [img]icone/barcapc.jpg[/img][/url] 
[url=""] [img]icone/mezzopc.jpg[/img][/url] 
[url=""] [img]icone/panoramapc.jpg[/img][/url] 
[url=""] [img]icone/gabbianopc.jpg[/img][/url] 
[url="icone/pomigr.png"] [img]icone/pompc.png[/img]  [/url]
[url=""] [img]icone/marinacortapc.jpg[/img] [/url] 

</div>



</div> 

#container{
background:url(image/container.png) no-repeat;
width:710px;
height:562px;
float:right;
position:relative;
right:120px;
}
#img{
padding:0 auto;
margin:50px  0 0 70px;

}
a:link img{
border-color: #FFFFFF;
}
a:visited img{
border-color: #CCCCCC;
}

a:hover img{
border-color: #000000;
}

Potete aiutarmi? Vorrei anche mettere i titoli sotto ma non riesco.

[uffissimo]

io creerei una struttura tabellare adatta alle tue esigenze... usando i div...
in questa discussione... avevo proposto uno script... vedi se puoi adattarlo
http://forum.html.it/forum/showthrea...ht=tabella+div

[Minerva88]

Grazie adesso vedo come mi torna...

[Minerva88]

Mmm... niente.
Magari qualcuno mi motrebbe dire anche solo come allargare le immagini tra loro?
Anche senza testo.

[uffissimo]

#img a{
margin:10px;
}

ovviamente è un esempio... metti i px che vuoi ;P
spero di essere stato utile.. ciaooo

[Mauro Accornero]

Se aggiungi un margine le immagini vanno a capo, perchè il margine si somma alla larghezza.
Calcola bene le larghezze in modo che la somma di margine e larghezza sia uguale all'attuale larghezza.

per inserire il testo puoi aggiungere un div contenitore:

HTML:

<div class="imgContainer">[img]tuaimmagine.jpg[/img]<span>descrizione immagine</span></div>

CSS:

.imgContainer{background:#fff;padding:2px;width:XXXpx;margin:5px;float:left;}
.imgContainer img{margin:0;padding:0;display:block;}

Fai attenzione che se la descrizione dell'immagine va su due righe può rompere il layout

[Minerva88]

Mmm non so perchè ma se aumento il margin mi appere la scrollbar nel lightbox quando si apre per vedere le immagini. Adesso controllo meglio...
Per il testo grazie, ma come dicevi tu,modifica il template.
Grazie mille dell'aiuto^^