allineare delle immagini

eniac · Messaggio da **eniac** » 20/09/2018, 13:51

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

Barrnet · Messaggio da **Barrnet** » 20/09/2018, 14:44

Considera che il tag <br> è il ritorno a capo. Dovresti eliminare quelli presenti tra gli elementi da tenere in riga.

eniac · Messaggio da **eniac** » 20/09/2018, 15:02

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

alex75 · Messaggio da **alex75** » 20/09/2018, 19:09

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

eniac · Messaggio da **eniac** » 21/09/2018, 9:37

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....

Micogian · Messaggio da **Micogian** » 21/09/2018, 10:18

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.

eniac · Messaggio da **eniac** » 21/09/2018, 10:41

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

Micogian · Messaggio da **Micogian** » 21/09/2018, 11:15

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.

eniac · Messaggio da **eniac** » 21/09/2018, 11:25

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.

eniac · Messaggio da **eniac** » 21/09/2018, 12:56

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

phpBB-Italia.it

allineare delle immagini

allineare delle immagini

Re: allineare delle immagini

Re: allineare delle immagini

Re: allineare delle immagini

Re: allineare delle immagini

Re: allineare delle immagini

Re: allineare delle immagini

Re: allineare delle immagini

Re: allineare delle immagini

Re: allineare delle immagini