immagini allineate

[Martina Stella]

ho creato una pagina Gallery sul mio sito
http://thevampirediariesitalia.blogspot ... llery.html

vorrei che le colonne con le immagini fossero 2 ma non so come fare...questo è un pezzo di HTML

1x01
<a href="http://www.mylivegallery.com/20201-3973362638-31.html" target="_blank" title="MyLiveGallery - Primo episodio"><img border="0" height="160" src="http://www.mylivegallery.com/gals/20201/3973362638/button.jpg" width="140" /></a>

1x02
<a href="http://www.mylivegallery.com/20202-3838091883-31.html" target="_blank" title="MyLiveGallery - Secondo episodio"><img border="0" height="160" src="http://www.mylivegallery.com/gals/20202/3838091883/button.jpg" width="140" /></a>

1x03
<a href="http://www.mylivegallery.com/20202-1391256587-31.html" target="_blank" title="MyLiveGallery - Terzo episodio"><img border="0" height="160" src="http://www.mylivegallery.com/gals/20202/1391256587/button.jpg" width="140" /></a>

1x04
<a href="http://www.mylivegallery.com/20202-3532093225-31.html" target="_blank" title="MyLiveGallery - Quarto episodio"><img border="0" height="160" src="http://www.mylivegallery.com/gals/20202/3532093225/button.jpg" width="140" /></a>

[ste_95]

Devi semplicemente creare due div e dare ad uno float left e all'altro float right.

[ssjx]

Devi semplicemente creare due div e dare ad uno float left e all'altro float right.

aspetta, non incasiniamo le cose che poi non se ne esce più

ho creato una pagina Gallery sul mio sito
http://thevampirediariesitalia.blogspot ... llery.html

vorrei che le colonne con le immagini fossero 2 ma non so come fare...questo è un pezzo di HTML

1x01
<a href="http://www.mylivegallery.com/20201-3973362638-31.html" target="_blank" title="MyLiveGallery - Primo episodio"><img border="0" height="160" src="http://www.mylivegallery.com/gals/20201/3973362638/button.jpg" width="140" /></a>

1x02
<a href="http://www.mylivegallery.com/20202-3838091883-31.html" target="_blank" title="MyLiveGallery - Secondo episodio"><img border="0" height="160" src="http://www.mylivegallery.com/gals/20202/3838091883/button.jpg" width="140" /></a>

1x03
<a href="http://www.mylivegallery.com/20202-1391256587-31.html" target="_blank" title="MyLiveGallery - Terzo episodio"><img border="0" height="160" src="http://www.mylivegallery.com/gals/20202/1391256587/button.jpg" width="140" /></a>

1x04
<a href="http://www.mylivegallery.com/20202-3532093225-31.html" target="_blank" title="MyLiveGallery - Quarto episodio"><img border="0" height="160" src="http://www.mylivegallery.com/gals/20202/3532093225/button.jpg" width="140" /></a>

Il problema è che il vero codice della pagina non è quello che hai scritto qui perché dopo ogni immagine se vai ad aprirti i sorgenti troverai un bel <br /> (che per l'appunto è il tag per mandare a capo) ..... non ho idea se quel tag l'abbia inserito tu o il CMS, quello che so però è che lo devi rimuovere sennò non puoi allineare le immagini

ciao

[Martina Stella]

quindi cosa devo fare esattamente per ottenere l'effetto che voglio?

[ssjx]

quindi cosa devo fare esattamente per ottenere l'effetto che voglio?

devi rimuovere i tag <br /> che sono presenti dopo ogni immagine

[dararag]

o meglio, se ne vuoi ottenere due una dopo l'altra, metti nei tag img l'attributo style="display:inline;" e poi togli un <br /> si ed uno no

[ssjx]

o meglio, se ne vuoi ottenere due una dopo l'altra, metti nei tag img l'attributo style="display:inline;"

forse mi sfugge qualcosa... ma IMG non è già inline di suo ?

[Andy94]

Sì, il tag IMG è di default inline.
Venendo al problema, suppongo tu voglia una cosa del genere, dico bene?



Per fare ciò, è necessario cambiare completamente la struttura attualmente utilizzata, passando a questo.

Codice: Seleziona tutto

<li style="display: block; float: left; margin: 5px;">
      <a href="http://www.mylivegallery.com/20202-1391256587-31.html" target="_blank" title="MyLiveGallery - Terzo episodio">
            <img src="http://www.mylivegallery.com/gals/20202/1391256587/button.jpg" border="0" height="160" width="140">
            <span style="display: block; text-align: center;">1x03</span>
      </a>
</li>


Ti spiego un attimo quello che ho fatto.

• Tutte le immagini saranno ora contenute all'interno del tag UL, che prevede apertura e chiusura (avrai quindi ul li li li ... /ul).
• La struttura è semplice: hai il li di contenimento, seguito dal tag A che contiene l'immagine e lo span per il testo.
• Il tag A e il tag IMG sono esattamente come tu li hai messi, non ho modificato alcun attributo.
• Il tag LI e lo SPAN contengono degli stili inline che ho messo per estetica e funzionalità. Devi valutare l'inserimento di questi stili all'interno dei blocchi appositi, o in file css a seconda di come è organizzato il tuo sito.

Il tag UL (l'apertura) contiene anch'egli degli stili che ho inserito per funzionalità. E' così:

Codice: Seleziona tutto

<ul style="float: left; list-style-type: none; margin: 0px;">

Come vedi, non c'è più nessun BR.

PS: siccome sono gentile, e l'avevo già fatto per provare a vedere se funzionava, ecco il lavoro già fatto (non è indentato i tutti i punti, però):

Codice: Seleziona tutto

<ul style="float: left; list-style-type: none; margin: 0px;">
<li style="display: block; float: left; margin: 5px;">
<a href="http://www.mylivegallery.com/20201-3973362638-31.html" target="_blank" title="MyLiveGallery - Primo episodio">
<img src="http://www.mylivegallery.com/gals/20201/3973362638/button.jpg" border="0" height="160" width="140">
<span style="display: block; text-align: center;">1x01</span>
</a>
</li>
<li style="display: block; float: left; margin: 5px;">
<a href="http://www.mylivegallery.com/20202-3838091883-31.html" target="_blank" title="MyLiveGallery - Secondo episodio">
<img src="http://www.mylivegallery.com/gals/20202/3838091883/button.jpg" border="0" height="160" width="140">
<span style="display: block; text-align: center;">1x02</span>
</a>
</li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20202-1391256587-31.html" target="_blank" title="MyLiveGallery - Terzo episodio"><img src="http://www.mylivegallery.com/gals/20202/1391256587/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x03</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20202-3532093225-31.html" target="_blank" title="MyLiveGallery - Quarto episodio"><img src="http://www.mylivegallery.com/gals/20202/3532093225/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x04</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20202-1813090841-31.html" target="_blank" title="MyLiveGallery - Quinto episodio"><img src="http://www.mylivegallery.com/gals/20202/1813090841/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x05</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20202-2838026411-31.html" target="_blank" title="MyLiveGallery - Sesto episodio"><img src="http://www.mylivegallery.com/gals/20202/2838026411/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x06</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20202-1839616257-31.html" target="_blank" title="MyLiveGallery - Settimo episodio"><img src="http://www.mylivegallery.com/gals/20202/1839616257/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x07</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20202-1662027241-31.html" target="_blank" title="MyLiveGallery - Ottavo episodio"><img src="http://www.mylivegallery.com/gals/20202/1662027241/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x08</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20203-826603143-31.html" target="_blank" title="MyLiveGallery - Nono episodio"><img src="http://www.mylivegallery.com/gals/20203/826603143/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x09</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20203-1444477684-31.html" target="_blank" title="MyLiveGallery - Decimo episodio"><img src="http://www.mylivegallery.com/gals/20203/1444477684/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x10</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20203-3434164221-31.html" target="_blank" title="MyLiveGallery - Undicesimo episodio"><img src="http://www.mylivegallery.com/gals/20203/3434164221/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x11</span></a></li>
<li style="display: block; float: left; margin: 5px;"><a href="http://www.mylivegallery.com/20203-452807893-31.html" target="_blank" title="MyLiveGallery - Dodicesimo episodio"><img src="http://www.mylivegallery.com/gals/20203/452807893/button.jpg" border="0" height="160" width="140"><span style="display: block; text-align: center;">1x12</span></a></li>
<li style="display: block; float: left; margin: 5px;">
<a target="_blank" href="http://www.mylivegallery.com/20204-3520446880-31.html" title="MyLiveGallery - Tredicesimo episodio">
<img src="http://www.mylivegallery.com/gals/20204/3520446880/button.jpg" border="0" height="160" width="140">
<span style="display: block; text-align: center;">1x13</span>
</a>
</li>
</ul>


Speranzoso di aver aiutato, un saluto a tutti.

[dararag]

si, di default è inline, però alle volte ho visto dei sistemi già pronti che, anche se non ne ho capito il motivo, mettevano di default block alle immagini

[Martina Stella]

grazie mille Andy94 hai capito perfettamente cosa volevo fare..grazie a tutti per i vostri suggerimenti!

[Martina Stella]

(non è indentato i tutti i punti, però)

Cosa significa?

ho provato in una pagina pulita a copiare l'HTML scritto da Andy94 ma mi esce così
http://thevampirediariesitalia.blogspot ... prova.html

[Andy94]

si, di default è inline, però alle volte ho visto dei sistemi già pronti che, anche se non ne ho capito il motivo, mettevano di default block alle immagini

Un semplice style="display: block" ed ecco che l'immagine è un elemento di blocco. Se poi nei CSS si specifica img{margin: 0 auto;} ecco che l'immagine viene sempre centrata.

ho provato in una pagina pulita a copiare l'HTML scritto da Andy94 ma mi esce così

Ci sono dei BR di troppo all'interno della lista. Toglili tutti e vedrai che si sistemerà automagicamente.

[dararag]

intendevo che non capivo perché le mettessero come elemento block tutte quante, quando invece è molto utilie mettere il display:block solo a quelle che ti servono, tenendo come inline quelle per il testo