phpBB Italia chiude!
phpBB Italia ringrazia tutti gli utenti che hanno dato fiducia al nostro progetto per ben 9 anni, e che, grazie al grande lavoro fatto da tutto lo Staff (rigorosamente a titolo gratuito), hanno portato il portale a diventare il principale punto di riferimento italiano alla piattaforma phpBB.

Purtroppo, causa motivi personali, non ho più modo di gestirlo e portarlo avanti. Il forum viene ora posto in uno stato di sola lettura, nonché un archivio storico per permettere a chiunque di fruire di tutte le discussioni trattate.

Il nuovo portale di assistenza per l'Italia di phpBB diventa phpBB-Store.it, cui ringrazio per aver deciso di portare avanti questo grande progetto.

Grazie ancora,
Carlo - Amministratore di phpBB Italia

Tabella personalizzata

Supporto stili in generale.
Rispondi
Avatar utente
Haku
Utente
Utente
Messaggi: 2529
Iscritto il: 22/09/2009, 22:36
Sesso: Maschio
Versione: 3.0.9
Server: UNIX/Linux
Contatta:
Contatta Haku

Re: Tabella personalizzata

Messaggio da Haku » 13/09/2011, 1:03

Benissimo, la struttura c'è =)
Ora praticamente devo avvicinare le prime due, e allungare le strisce verdi.
Inserire i testi più vicini alle immagini dei quadratini e aggiungere soprea al secondo, un altro <h3>(?)...

I dati li inserisco a mano bingo ^^
Mi serve solo per eleminare e tenere alcune cose in rilievo del forum =)
Top
Avatar utente
Micogian
Leader Programmatori
Leader Programmatori
Messaggi: 3704
Iscritto il: 07/01/2010, 8:51
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.4.36
Database: MySQL 5.1.70-log
Località: Udine
Contatta:
Contatta Micogian

Re: Tabella personalizzata

Messaggio da Micogian » 13/09/2011, 13:43

Puoi usare dimensioni fisse.

Codice: Seleziona tutto

<div style="float: left; width: 900px; height: auto;border: 0; ; margin-left: 5px; padding: 5px;">
	<div style="float: left; width: 250px; height: 120px;">
		<div style="float: left; width: 240px;" >
			<div style="float: left; width: 240px;"><h3>SCREEN MENSILE</h3></div>
			<div style="clear: both;"></div>
			<div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 1</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 240px;" >
			<div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 2</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 240px;" >	
			<div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 3</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 240px;" >			
			<div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 4</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="clear: both;"></div>
	</div>
	<div style="float: left; width: 250px; height: 120px;">
		<div style="float: left; width: 240px;" >
			<div style="float: left; width: 240px;"><h3>SCREEN MENSILE</h3></div>
			<div style="clear: both;"></div>
			<div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 5</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 240px;" >
			<div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 6</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 240px;" >	
			<div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 7</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 240px;" >			
			<div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 8</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="clear: both;"></div>
	</div>
	<div style="float: left; height: 120px; border: 0; margin-left: 5px; padding: 0 3px;">
		<div style="float: left; width: 230px;"><h3>&nbsp;</h3></div>
			<div style="clear: both;"></div>
		<div style="width: 220; height: 20px; font-size: 1.5em; font-weight: bold; background: #88B48B; border: 1px solid #346786; margin-top: 5px; margin-left: 2px; padding: 2px 3px;">
			Rivista MKR: in costruzione<br /><br />
		</div>
		<div style="width: 220; height: 20px; font-size: 1.5em; font-weight: bold; background: #88B48B; border: 1px solid #346786; margin-top: 5px; margin-left: 2px; padding: 2px 3px;">
			Rivista MKR: in costruzione<br /><br />
		</div>
		<div style="clear: both;"></div>
	</div>
	<div style="clear: both;"></div>
</div>
Top
Avatar utente
Haku
Utente
Utente
Messaggi: 2529
Iscritto il: 22/09/2009, 22:36
Sesso: Maschio
Versione: 3.0.9
Server: UNIX/Linux
Contatta:
Contatta Haku

Re: Tabella personalizzata

Messaggio da Haku » 13/09/2011, 18:52

E' perfetta! Ora però per allungare le strisce a destra quanto la larghezza del forum?
Top
Avatar utente
Micogian
Leader Programmatori
Leader Programmatori
Messaggi: 3704
Iscritto il: 07/01/2010, 8:51
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.4.36
Database: MySQL 5.1.70-log
Località: Udine
Contatta:
Contatta Micogian

Re: Tabella personalizzata

Messaggio da Micogian » 13/09/2011, 19:56

Devi lavorare sulle dimensioni.
C'è una dimensione del blocco (indicato nella prima riga) che attualmente è di 900px e poi ci sono le tre parti che sono di 250px per le prime due tabelle e quello che rimane per la terza.
All'interno di ogni tabella c'è una ulteriore tabella con dimensione leggermente più stretta (240px) perchè deve tenere conto del padding.
Quindi prima devi agire sulla larghezza totale (900px) e poi sulle altre.
Io pensavo che queste cose dovresti conoscerle, è l'abc del CSS.
Prova a metterci un "border: 1px solid #cdcdcd;" nello style delle tabelle e così vedi la dimensione effettiva di ciascuna tabella.
Poi, una volta sistemato il tutto, lo togli.

Codice: Seleziona tutto

    <div style="float: left; width: 900px; height: auto;border: 0; ; margin-left: 5px; padding: 5px;">
       <div style="float: left; width: 250px; height: 120px; border: 1px solid #cdcdcd;">
          <div style="float: left; width: 240px;" >
             <div style="float: left; width: 240px;"><h3>SCREEN MENSILE</h3></div>
             <div style="clear: both;"></div>
             <div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
             <div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 1</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
             <div style="clear: both;"></div>
          </div>
          <div style="float: left; width: 240px;" >
             <div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
             <div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 2</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
             <div style="clear: both;"></div>
          </div>
          <div style="float: left; width: 240px;" >   
             <div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
             <div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 3</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
             <div style="clear: both;"></div>
          </div>
          <div style="float: left; width: 240px;" >         
             <div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
             <div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 4</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
             <div style="clear: both;"></div>
          </div>
          <div style="clear: both;"></div>
       </div>
       <div style="float: left; width: 250px; height: 120px; border: 1px solid #cdcdcd;">
          <div style="float: left; width: 240px;" >
             <div style="float: left; width: 240px;"><h3>SCREEN MENSILE</h3></div>
             <div style="clear: both;"></div>
             <div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
             <div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 5</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
             <div style="clear: both;"></div>
          </div>
          <div style="float: left; width: 240px;" >
             <div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
             <div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 6</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
             <div style="clear: both;"></div>
          </div>
          <div style="float: left; width: 240px;" >   
             <div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
             <div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 7</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
             <div style="clear: both;"></div>
          </div>
          <div style="float: left; width: 240px;" >         
             <div style="float: left; text-align: left; width: 20px; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
             <div style="float: left; text-align: left; width: 210px; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest 8</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
             <div style="clear: both;"></div>
          </div>
          <div style="clear: both;"></div>
       </div>
       <div style="float: left; height: 120px; border: 0; margin-left: 5px; padding: 0 3px; border: 1px solid #cdcdcd;">
          <div style="float: left; width: 230px;"><h3>&nbsp;</h3></div>
             <div style="clear: both;"></div>
          <div style="width: 220; height: 20px; font-size: 1.5em; font-weight: bold; background: #88B48B; border: 1px solid #346786; margin-top: 5px; margin-left: 2px; padding: 2px 3px;">
             Rivista MKR: in costruzione<br /><br />
          </div>
          <div style="width: 220; height: 20px; font-size: 1.5em; font-weight: bold; background: #88B48B; border: 1px solid #346786; margin-top: 5px; margin-left: 2px; padding: 2px 3px;">
             Rivista MKR: in costruzione<br /><br />
          </div>
          <div style="clear: both;"></div>
       </div>
       <div style="clear: both;"></div>
    </div>
Top
Avatar utente
Haku
Utente
Utente
Messaggi: 2529
Iscritto il: 22/09/2009, 22:36
Sesso: Maschio
Versione: 3.0.9
Server: UNIX/Linux
Contatta:
Contatta Haku

Re: Tabella personalizzata

Messaggio da Haku » 08/10/2011, 14:34

Riprendo la discussione dopo tempo (non ci sono potuto stare dietro).
Non riesco a modificare la lunghezza delle due tabelle di destra :S

Ho provato a modificare i vari parametri, e mi sono chiari, quindi commentati in caso mi dimenticassi.

Se provo a cambiare i width delle due tabelle di destra, queste non si allungano O_o
Puoi indicarmi il giusto codice da modificare quando hai tempo bingo?

Grazie ^^
Top
Avatar utente
Micogian
Leader Programmatori
Leader Programmatori
Messaggi: 3704
Iscritto il: 07/01/2010, 8:51
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.4.36
Database: MySQL 5.1.70-log
Località: Udine
Contatta:
Contatta Micogian

Re: Tabella personalizzata

Messaggio da Micogian » 08/10/2011, 17:28

Haku, come ti avevo già accennato, la cosa migliore in questi casi è inserire un "border" temporaneo, così vedi effettivamente qual'è la dimensione delle tabelle.
Devi considerare che c'è una tabella "contenitore" e quindi devi indicare qual'è quella dimensione, le tabelle interne sono gestite all'interno di quella dimensione, con i bordi è certamente più semplice.
Poi, una volta sistemate le tabelle togli i bordi. Attenzione anche ai margini e al padding, senza contare che IE interpreta i margini in maniera diversa dagli altri browser.
In sostanza bisogna fare delle prove e le prove con i bordi indicano chiaramente qual'è la dimensione delle tabelle.
Top
Avatar utente
Haku
Utente
Utente
Messaggi: 2529
Iscritto il: 22/09/2009, 22:36
Sesso: Maschio
Versione: 3.0.9
Server: UNIX/Linux
Contatta:
Contatta Haku

Re: Tabella personalizzata

Messaggio da Haku » 08/10/2011, 19:33

E' proprio per questo :S
Ho fatto con i border, ma forse sono io che sbaglio qualcosa :S

Mi ci metterò ancora al fine di imparare, ma sti maledetti codici ogni tanto vincono ^^
Top
Avatar utente
Micogian
Leader Programmatori
Leader Programmatori
Messaggi: 3704
Iscritto il: 07/01/2010, 8:51
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.4.36
Database: MySQL 5.1.70-log
Località: Udine
Contatta:
Contatta Micogian

Re: Tabella personalizzata

Messaggio da Micogian » 08/10/2011, 20:35

Nel mio esempio la larghezza della tabella "contenitore" è di 900px, le prime due tabelle di 250px ciascuna.
L'ultima non ha valore perchè dovrebbe essere il rimanente ma forse sta li il problema, prova a mettere un width nella terza tabella.
Devi calcolare però che se hai 900px disponibili non puoi fare 250+250+400px perchè ci sono da calcolare i margini e il padding. Se superi i 900 px disponibili la terza colonna va a capo, ma con i bordi vedi subito dove sta e dove termina.
Un bordo si inserisce nel css "style" con "border: 1px solid #FF0000;" (così è rosso e lo vedi bene)
Ovviamente se la tua larghezza non è 900px devi modificare le dimensioni, sia della tabella contenitore che di quelle interne.
E' tutto molto semplice, basta fare le cose con attenzione.
Puoi anche creare un file html solamente con il codice della tabella e provare così.
Top
Avatar utente
Lady R
phpBB Expert
phpBB Expert
Messaggi: 900
Iscritto il: 08/11/2011, 13:43
Sesso: Femmina
Versione: 3.0.9
Server: UNIX/Linux
PHP: 5.3.8
Database: MySQLi
Contatta:
Contatta Lady R

Re: Tabella personalizzata

Messaggio da Lady R » 30/11/2011, 1:14

Su richiesta di Haku posto il codice completo per questa benedetta tabella ^.^"

In Common.css:

Codice: Seleziona tutto

/* Informations Table by Remedy Memory */
#info-table { width: 843px; margin: 8px; font-size: 10px;}
#info-table #events, #info-table  #latest-games { float: left; width: 200px; height: 120px; }
#info-table #news { width: 100%; font-size: 12px; }
#info-table .title { font-size: 13px; font-weight: bold; color: #115098; border-bottom: 1px solid #CCC; height: 20px; text-transform: uppercase;}
#info-table #events ul,#info-table #latest-games ul { padding-left: 15px; list-style-image: url(http://imagise.allise.net/b/p/list.gif); }
#info-table #events ul li,#info-table #latest-games ul li { line-height: 15px; margin: 0px;}
#info-table #news div.new { background: #C1DEED; margin: 3px; padding: 3px; width: 430px;; float: right; border-radius: 2px; border-top: 1px solid #AEE3E5; }
#info-table #news div.new.first { margin-top: 14px; }
#info-table #news div.new span { font-weight: bold; }

/* END Informations Table
Nell'HTML inserire:

Codice: Seleziona tutto

<div id="info-table">
	<div id="events">
		<div class="title">Eventi in corso</div>
			<ul>
				<li>[Risultati] 23° Screen Contest</li>
				<li>[Risultati] 22° Screen Contest</li>
				<li>[Risultati] 21° Screen Contest</li>
				<li>[Risultati] 1° Désordre Contest</li>
			</ul>
	</div>
	<div id="latest-games">
		<div class="title">Eventi in corso</div>
			<ul>
				<li>[Screen Contest 5] Screen Contest</li>
				<li>[Screen Contest 6] Screen Contest</li>
				<li>[Screen Contest 7] Screen Contest</li>
				<li>[Screen Contest 7] Screen Contest</li>
			</ul>
	</div>
	<div id="news">
		<div class="title"></div>
		<div class="new first"><span>Rivista MKR -</span> Ultimo articolo: <span>-</span></div>
		<div class="new"><span>Video Settimanale -</span> Villa de Novoeiro R.E.L.I.D.O <span>-</span></div>
	</div>
</div>
Questa è già compilata con i dati per Haku.

Particolarità della mia versione:
CSS ottimizzato per mantenere pulito l'HTML
I quadratini verdi ora sono i pallini delle <li> invece che dei <div> separati.

Dovrebbe fungere! lol
Top
Avatar utente
Haku
Utente
Utente
Messaggi: 2529
Iscritto il: 22/09/2009, 22:36
Sesso: Maschio
Versione: 3.0.9
Server: UNIX/Linux
Contatta:
Contatta Haku

Re: Tabella personalizzata

Messaggio da Haku » 30/11/2011, 1:22

Per inserire le immagini al posto dei pallini, si può, o sconvolge tutto?

Grazie Lady =)
Top
Rispondi

Torna a “Supporto stili”

Chi c’è in linea

Visitano il forum: Nessuno e 64 ospiti