allineare delle immagini

Area dedicata al linguaggio HTML. Nozioni di base,esempi,script,programmazione
Rispondi
Avatar utente
eniac
PhpBB Expert
PhpBB Expert
Messaggi: 683
Iscritto il: 18/07/2013, 19:14
Link del Forum: Http://www.cesimmunizioni.eu/forum
Località: Abruzzo
Contatta:

allineare delle immagini

Messaggio da eniac »

Salve, sto scrivendo una pagina custom per il mio forum, è una pagina dedicata al download di alcuni documenti di cui disponiamo, il codice che ho scritto al momento è il seguente

Codice: Seleziona tutto

<!-- INCLUDE overall_header.html -->
 
<h2>Le schede tecniche del CeSIM</h2>
 
<div class="panel">
	<div class="inner"><span class="corners-top"><span></span></span>
 
	<div class="content">
		<p>
		     LA PAGINA E' IN COSTRUZIONE -Visita questa pagina fra qualche giorno per vedere lo stato di avanzamento!!!
			 <br><br><br>
			 <br>
			 
			 12,7x81SR a Cura di Luca Ricci---<A HREF=http://cesimmunizioni.eu/forum/ecra/127bredaricci-new.pdf> <img src=portale/download.jpg max width="15%"> </A>
			<br>		 
			 7,5x58 a Cura di Luca Ricci-------<A HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"> </A>
			 <br>
			 8x59RB a Cura di Luca Ricci-------<A HREF=http://cesimmunizioni.eu/forum/ecra/8x59RBricci.pdf> <img src=portale/download.jpg max width="15%"> </A>
		<br>
		
		</p>
	</div>
 
	<span class="corners-bottom"><span></span></span></div>
</div>
 
<!-- INCLUDE jumpbox.html -->
<!-- INCLUDE overall_footer.html -->
per ora ho inserito solo alcuni link per fare delle prove, ma ne sono diversi, con il codice qua sopra però i link mi vengono uno sotto l'altro e vorrei metterne almeno 3 o 4 per ogni riga , qualcuno di buon cuore mi potrebbe dare qualche input su come devo modificarlo ?
Cattura.JPG
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
phpBB version : 3.3.3
php version : 7.3.27
Avatar utente
Barrnet
Globalmod
Globalmod
Messaggi: 517
Iscritto il: 13/05/2012, 19:10
Link del Forum: https://videogamezone.eu/forum
Località: Bergamo
Contatta:

Re: allineare delle immagini

Messaggio da Barrnet »

Considera che il tag <br> è il ritorno a capo. Dovresti eliminare quelli presenti tra gli elementi da tenere in riga.
Avatar utente
eniac
PhpBB Expert
PhpBB Expert
Messaggi: 683
Iscritto il: 18/07/2013, 19:14
Link del Forum: Http://www.cesimmunizioni.eu/forum
Località: Abruzzo
Contatta:

Re: allineare delle immagini

Messaggio da eniac »

si quello lo sò, il br mi serve solo per spaziare le colonne, il mio problema è inserire altri pulsanti in linea sulla riga 1,2,3..e non ci riesco.

comunque se levo il br mi vengono cosi come in foto, non capisco il perche di tutto quello spazio tra le due immagini
Cattura.PNG
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
phpBB version : 3.3.3
php version : 7.3.27
Avatar utente
alex75
Amministratore
Amministratore
Messaggi: 5122
Iscritto il: 23/08/2012, 23:45
Link del Forum: www.phpbb-italia.it
Località: Palermo

Re: allineare delle immagini

Messaggio da alex75 »

Puoi usare le tabelle.
Cerca con google il tag html "table" troverai diversi esempi:

Codice: Seleziona tutto

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>
tb1.gif
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
Regolamento Forum
Programmi utili
Le nostre guide
Scambio Banner
Se l'assistenza prestata è stata di tuo gradimento potrai contribuire aiutandoci a sostenere le spese affrontate per tenere in vita questo forum >Cliccando sul seguente Link<
Avatar utente
eniac
PhpBB Expert
PhpBB Expert
Messaggi: 683
Iscritto il: 18/07/2013, 19:14
Link del Forum: Http://www.cesimmunizioni.eu/forum
Località: Abruzzo
Contatta:

Re: allineare delle immagini

Messaggio da eniac »

Grazie alex75, non ci avevo pensato, visto che siamo in argomento ho provato anche pages ma il limite è sempre lo stesso si può usare solo HTML e questo rende complesso costruirci sopra delle pagine un po più complesse, che tu sappia non c'è altro in giro che però mi permetta di usare i CSS ? sarebbe una svolta....
phpBB version : 3.3.3
php version : 7.3.27
Avatar utente
Micogian
Globalmod
Globalmod
Messaggi: 526
Iscritto il: 17/03/2016, 17:53
Link del Forum: https://www.actaplantarum.org

Re: allineare delle immagini

Messaggio da Micogian »

Puoi usare i "div"
ad esempio

Codice: Seleziona tutto

<div style="width: 100%">
    <div style="float:left; width: 33%;">Prova 1</div>
    <div style="float:left; width: 33%;">Prova 2</div>
    <div style="float:left; width: 33%;">Prova 3</div>
    <div style="clear: both;"></div>
</div>
I valori style li puoi mettere in percentuale o con dimensione in pixel e puoi inserirli nel file css riportando nello script la classe.
Il contenuto dei div verrà messo in linea fino al valore "clear: both;" che interrompe il float.
Avatar utente
eniac
PhpBB Expert
PhpBB Expert
Messaggi: 683
Iscritto il: 18/07/2013, 19:14
Link del Forum: Http://www.cesimmunizioni.eu/forum
Località: Abruzzo
Contatta:

Re: allineare delle immagini

Messaggio da eniac »

grazie Micogian, provo anche con questo, il suggerimento di alex75 già va meglio ma non riesco a capire il perché mi metta tutto quello spazio tra la prima e la seconda immagine, che tra l'altro mi impedisce di metterne 3 o 4 in linea anche se lo spazio sarebbe sufficiente, eppure se eseguo l'html fuori dal custom lo spazio non viene aggiunto....
Cattura.PNG

Codice: Seleziona tutto

<!-- INCLUDE overall_header.html -->
 
<h2>Le schede tecniche del CeSIM</h2>
 
<div class="panel">
	<div class="inner"><span class="corners-top"><span></span></span>
 
	<div class="content">
		<p>
		     LA PAGINA E' IN COSTRUZIONE -Visita questa pagina fra qualche giorno per vedere lo stato di avanzamento!!!
			 <br><br><br>
			 	 
		 <table>
    <tr>
			<td nowrap> 
			QUESTO è IL PRIMO  PULSANTE_<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"> </A>
			QUESTO è IL SECONDO  PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/8x59RBricci.pdf> <img src=portale/download.jpg max width="15%"> </A>
     		</td>
		</tr>
		<td nowrap>
	    	QUESTO è IL TERZO PULSANTE_<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"> </A>
	        QUESTO è IL QUARTO PULSANTE_<a HREF=http://cesimmunizioni.eu/forum/ecra/8x59RBricci.pdf> <img src=portale/download.jpg max width="15%"> </A>
		</td>
		</tr>
		<td nowrap>
	    	QUESTO è IL QUINTO PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"> </A>
	        QUESTO è IL SESTO PULSANTE___<a HREF=http://cesimmunizioni.eu/forum/ecra/8x59RBricci.pdf> <img src=portale/download.jpg max width="15%"> </A>
		</td>
		</tr>
		</p>
	</div>
 
	<span class="corners-bottom"><span></span></span></div>
</div>
 
<!-- INCLUDE jumpbox.html -->
<!-- INCLUDE overall_footer.html -->
Cattura1.PNG

EDIT: tra l'altro mi accorgo adesso che usando questo tag la barra con il copyright ed il resto che dovrebbe stare sotto la pagina viene riportata prima
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
phpBB version : 3.3.3
php version : 7.3.27
Avatar utente
Micogian
Globalmod
Globalmod
Messaggi: 526
Iscritto il: 17/03/2016, 17:53
Link del Forum: https://www.actaplantarum.org

Re: allineare delle immagini

Messaggio da Micogian »

Il codice dell'apertura della tabella

Codice: Seleziona tutto

<div class="inner"><span class="corners-top"><span></span></span>
non viene più usato da phpbb e nemmeno quello di chiusura

Codice: Seleziona tutto

<span class="corners-bottom"><span></span></span></div>
Mi sembra che nel tuo codice manchi il tag di chiusura del table, è per quello che il copyright è spostato.
Con i div come ti ho proposto io fai quello che vuoi.
Avatar utente
eniac
PhpBB Expert
PhpBB Expert
Messaggi: 683
Iscritto il: 18/07/2013, 19:14
Link del Forum: Http://www.cesimmunizioni.eu/forum
Località: Abruzzo
Contatta:

Re: allineare delle immagini

Messaggio da eniac »

Grazie Micogian, in effetti mancava il tag di chiusura del table, adesso l'ho messo e viene visualizzato correttamente anche il footer.
Provo con i DIV vediamo che riesco a fare. :D: :D: :D:
phpBB version : 3.3.3
php version : 7.3.27
Avatar utente
eniac
PhpBB Expert
PhpBB Expert
Messaggi: 683
Iscritto il: 18/07/2013, 19:14
Link del Forum: Http://www.cesimmunizioni.eu/forum
Località: Abruzzo
Contatta:

Re: allineare delle immagini

Messaggio da eniac »

Scusatemi per i due post consecutivi.

Con i DIV è perfetto, la percentuale width , se ho ben capito, controlla la percentuale di schermo dentro cui devono stare i comandi, infatti al 33% mi permette di metterne 3 , al 25% mi permette di inserirne 4.
Unica cosa che non ho ancora agganciato è come fare per controllare solo la grandezza della immagine, perché cosi facendo si riduce automaticamente in base alla percentuale di cui sopra.

Codice: Seleziona tutto

<!-- INCLUDE overall_header.html -->
 
<h2>Le schede tecniche del CeSIM</h2>
 
<div class="panel">
	<div class="inner"><span class="corners-top"><span></span></span>
 
	<div class="content">
		<p>
		     LA PAGINA E' IN COSTRUZIONE -Visita questa pagina fra qualche giorno per vedere lo stato di avanzamento!!!
			 <br><br><br>
			 	 
		 <div style="width: 100%">
			<div style="float:left; width: 25%;">QUESTO è IL PRIMO  PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"> </div></A>
			<div style="float:left; width: 25%;">QUESTO è IL SECONDO  PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/8x59RBricci.pdf> <img src=portale/download.jpg max width="15%"></div></A>
     		<div style="float:left; width: 25%;">QUESTO è IL TERZO PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"></div></A>
	       	<div style="float:left; width: 25%;">QUESTO è IL QUARTO  PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"> </div></A>  
				  <div style="clear: both;"></div>
</div> 
<br>
 <div style="width: 100%">
			
			<div style="float:left; width: 25%;">QUESTO è IL QUINTO PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/8x59RBricci.pdf> <img src=portale/download.jpg max width="15%"></div></A>
     		<div style="float:left; width: 25%;">QUESTO è IL SESTO PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"></div></A>
	       	<div style="float:left; width: 25%;">QUESTO è IL SETTIMO PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"> </div></A>  
			<div style="float:left; width: 25%;">QUESTO è L'OTTAVO PULSANTE<a HREF=http://cesimmunizioni.eu/forum/ecra/7,5x58.pdf> <img src=portale/download.jpg max width="15%"> </div></A>
				  <div style="clear: both;"></div>
</div>
		</p>
	</div>
 
	<span class="corners-bottom"><span></span></span></div>
</div>
 
<!-- INCLUDE jumpbox.html -->
<!-- INCLUDE overall_footer.html -->
Cattura.PNG

EDIT: tutto a posto, avevo dimenticato di aver inserito anche un width per il controllo dell'immagine, adesso è perfetto
GRAZIE Micogian :D: :D:
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
phpBB version : 3.3.3
php version : 7.3.27
Rispondi