Immagini affiancate che non vadano a capo

**Butik** · 23-02-2015, 00:17

Ciao, vorrei mettere più immagini affiancate e attaccate su un sito responsive ma non riesco a fare in modo che vengano adattate alle diverse risoluzioni. Questo inevitabilmente fa andare a capo le immagini in alcuni casi.
Metto due immagini di esempio per farvi capire e due codici che ho provato ad utilizzare.

qui è come si dovrebbe vedere (in pratica come se ci fosse un'immagine unica con width:100%)
Allegato 25370

qui è come appare con risoluzioni diverse
Allegato 25371

Codice 1:
<html>
<head>
</head>
<body>
<div><img
src="immagine 1"><img
src="immagine 2"><img
src="immagine 3"><img
src="immagine 4"></div>
</div>
</body>
</html>

Codice 2 (con questa tabella le immagini rimangono distanziate quando le visualizzo sulla pagina web):
<html>
<head>
</head>
<body>
<div style="width: 100%;" align="left">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: middle;">
<a href="URL%20collegamento" target="_blank"><img
src="immagine 1"></a></td>
<td style="vertical-align: middle;">
<a href="URL%20collegamento" target="_blank"><img
src="immagine 2"</a></td>
<td style="vertical-align: middle;">
<a href="URL%20collegamento" target="_blank"><img
src="immagine 3"</a></td>
<td style="vertical-align: middle;">
<a href="URL%20collegamento" target="_blank"><img
src="immagine 4"</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Grazie

**KillerWorm** · 23-02-2015, 01:38

Ciao, per logica, dal momento che la totalità delle immagini deve assumere il 100% della larghezza del div, dovrai impostare, per ciascuna immagine, una larghezza del 25% (cioè 100/4 nel caso di 4 immagini).

Generalmente è una cosa che si fa via CSS. Segnalo la discussione per farla spostare nel relativo forum.

Ti posto un codice di esempio:
codice:
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
div{
background: grey;
}
div>img{
/*vertical-align:middle; /* decomenta se vuoi centrarle in verticale */
width: 25%;
}
</style>
</head>
<body>
<div><img
src="immagine1.jpg"><img
src="immagine2.jpg"><img
src="immagine3.jpg"><img
src="immagine4.jpg"
></div>
</body>
</html>
Nota che tra i tag <img>, dentro il div, non va messo alcuno spazio o altro carattere. Deduco, dal tuo codice, che tu lo sappia già.

PS: per avere un codice validato è sempre meglio inserire l'attributo alt sui tag img.
PPS: quando posti del codice sul forum è opportuno utilizzare gli appositi tag di validazione (vedi NOTE TECNICHE nel regolamento di sezione)

**KillerWorm** · 23-02-2015, 01:44

Il forum ha un po' di problemi... ho dovuto sopprimere la formattazione del messaggio con link e tag vari, altrimenti non lo pubblicava.

**Vincent.Zeno** · 23-02-2015, 01:49

Originariamente inviata da KillerWorm

Il forum ha un po' di problemi...

speriamo sia la volta buona che ci rimane secco, così lo cambiamo

la discussione per ora può rimanere qui, argomenti a cavallo delle sezioni

**KillerWorm** · 23-02-2015, 02:01

[QUOTO] speriamo sia la volta buona che ci rimane secco, così lo cambiamo [/QUOTO]

sarà un bello spettacolo

_nemmeno il quote mi funziona_

[REPORT]
Comunque, giusto per la cronaca, anche in altre discussioni c'è stata qualche lamentela per problemi del genere.
Sinceramente non so se dipenda da specifici tag o caratteri usati nei messaggi, ma quando si tenta di inviarte la risposta o fare l'anteprima (perlomeno a me), appare una pagina di errore con:
_____
Not Acceptable

An appropriate representation of the requested resource /forum/newreply.php could not be found on this server.
Apache/2.2.22 (Ubuntu) Server at forum.html.it Port 80
_____

Provato su FF e CH.. e il problema si presenta su entrambi.
[/REPORT]

**Vincent.Zeno** · 23-02-2015, 02:05

Originariamente inviata da KillerWorm

sarà un bello spettacolo

_nemmeno il quote mi funziona_

[REPORT]
Comunque, giusto per la cronaca, anche in altre discussioni c'è stata qualche lamentela per problemi del genere.
Sinceramente non so se dipenda da specifici tag o caratteri usati nei messaggi, ma quando si tenta di inviare la risposta o fare l'anteprima (perlomeno a me), appare una pagina di errore con:
_____
Not Acceptable

An appropriate representation of the requested resource /forum/newreply.php could not be found on this server.
Apache/2.2.22 (Ubuntu) Server at forum.html.it Port 80
_____

Provato su FF e CH.. e il problema si presenta su entrambi.
[/REPORT]

è tutt'oggi che fa così, grazie per la tuo report
e fa anche scherzi tipo "vuoi uscire dalla pagina?"
(a scemo: ho scritto salva!)

**Butik** · 23-02-2015, 14:42

PPS: quando posti del codice sul forum è opportuno utilizzare gli appositi tag di validazione (vedi NOTE TECNICHE nel regolamento di sezione)

Ciao KillerWorm, avevo cercato come fare a racchiudere il codice come fanno tutti ma non l'avevo trovato...non mi ero accorto che il comando [CODE] ce l'avevo sotto al naso! (credo sia quello corretto)

Comunque problema risolto, decommentando il vertical-align:middle, il tuo codice funziona perfettamnte!

Grazie Mille!

Discussione: Immagini affiancate che non vadano a capo

Strumenti discussione

Ricerca discussione

Visualizza

Immagini affiancate che non vadano a capo

Permessi di invio