Tabella personalizzata

Haku · Messaggio da **Haku** » 08/09/2011, 3:25

Ho intenzione di inserire una tabella nell'index del forum perchè mi serve urgentemente per sottolieneare alcune delle cose più importanti del forum.
La tabella è questa:
Immagine

Praticamente dovrebbero essere 4 tabelle, di cui:
Le prime due separate di sinistra, e le ultime due strisce sulla destra.
Sono riuscito a fare solo una tabella di sinistra in quel preciso modo, ma poi mi perdo totalmente e non riesco più ad andare avanti.
Uso prosilver_se come tema, e chiunque può darmi una mano nel crearla in quel preciso modo mi aiuterebbe un sacco!

Messaggio da **Tiger** » 08/09/2011, 21:55

Haku,questa tabella ,che vorresti dovrebbe contenere,immagini?

Messaggio da **Micogian** » 08/09/2011, 22:45

Crea un file HTML come questo e puoi fare tutte le prove che vuoi:

Codice: Seleziona tutto

<html>
	<head>
	</head>
	<body>
		<div style="float: left; width: 800px; height: auto;border: 1px solid #cdcdcd; ; margin-left: 10px; padding: 5px;">
			<div style="float: left; width: 31%; height: 120px; border: 1px solid #5C5B2F; padding: 0 3px;">
				<dt>Lo sapevi che ? </dt>
				<dd>Prima riga</dd>
				<dd>Seconda riga</dd>
				<dd>Terza riga</dd>
				<dd>Quarta riga</dd>
			</div>
    		<div style="float: left; width: 31%; height: 120px; border: 1px solid #5C5B2F; margin-left: 10px; padding: 0 3px;">
				<dt>Lo sapevi che ? xxxxxxxxxxxx</dt>
				<ul>				
					<li>riga 1</li>
					<li>riga 2</li>
					<li>riga 3</li>
					<li>riga 4</li>
				</ul>
			</div>
			<div style="float: left; width: 31%; height: 120px; border: 1px solid #5C5B2F; margin-left: 10px; padding: 0 3px;">
				<div style="width: 220; height: 40px; border: 1px solid #5C5B2F; margin-top: 5px; margin-left: 5px; padding: 2px 3px;">
				Contenuto tabella 1				
				</div>
				<div style="width: 220; height: 40px; border: 1px solid #5C5B2F; margin-top: 5px; margin-left: 5px; padding: 2px 3px;">
				Contenuto tabella 2				
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
			<br />
	</body>
</html>

La base di tutto è il "float: left" e la riga finale <div style="clear: both;"></div> che conclude l'allineamento delle tre tabelle.

Haku · Messaggio da **Haku** » 09/09/2011, 2:48

tiger ha scritto:Haku,questa tabella ,che vorresti dovrebbe contenere,immagini?

Le immagini che deve contenere sono solo quelle iconcine verdi.
Il codice per farlo che avevo fatto è questo:

Codice: Seleziona tutto

<table width="500"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" valign="top">
<table style='font-size: 10px;font-family:Verdana;'>
<tr><td></td><td><b>Lo sapevi che? [Contest in corso]</b></td></tr>
<tr><td><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></td><td>&nbsp;&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></td></tr>

<tr><td><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></td><td>&nbsp;&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></td></tr>
<tr><td><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></td><td>&nbsp;&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></td></tr></table></td>
    

  </tr> 
</table>

Io ho fatto a tabelle, perchè con i div ancora sono un pò in alto mare

@bingo: provo a vedere come funziona

Haku · Messaggio da **Haku** » 10/09/2011, 14:31

Inserito il tuo codice bingo e il risultato è simile:
http://rpgmkr.net/forum/modwelcome.php

Vorrei poter raggiungere però il tutto come l'immagine (vedi sotto la tua tabella come è venuto con il mio codice postato sopra).

Messaggio da **Micogian** » 10/09/2011, 18:48

Beh, quello era solo un esempio, io ho fatto solo i contenitori, poi si tratta di sistemarli, vedere se inserire o meno il bordo e metterci dentro il contenuto.
Non vedo dove sia il problema.

EDIT:
Fai così:
Crea un file "rivista_mkr.html" da mettere nel template
Questo è il codice:

Codice: Seleziona tutto

    <div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl>
						<dt style="text-align: left; width: 22%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rivista MKR</dt>
					</dl>
				</li>
			</ul>
			<ul class="topiclist forums">     
				<li>
					<dl>
						<div style="float: left; width: 100%; height: auto;border: 0; ; margin-left: 5px; padding: 5px;">
							<div style="float: left; width: 31%; height: 120px; border: 1 solid #cdcdcd; padding: 0 ">
							<!-- <dt><b>Lo sapevi che? [Contest in corso]</b></dt> -->
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
							</div>
							<div style="float: left; width: 31%; height: 120px; border: 0; margin-left: 5px; padding: 0 3px;">
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
								<dd style="text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></dd>
								<dd style="text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></dd><br />
							</div>
							<div style="float: left; width: 31%; height: 120px; border: 0; margin-left: 5px; padding: 0 3px;">
								<div style="width: 220; height: 40px; border: 0; margin-top: 5px; margin-left: 2px; padding: 2px 3px;">
								<img src="http://img600.imageshack.us/img600/5189/46436795.jpg" ><br /><br />
								</div>
								<div style="width: 220; height: 40px; border: 0; margin-top: 5px; margin-left: 2px; padding: 2px 3px;">
								<img src="http://img600.imageshack.us/img600/5189/46436795.jpg" ><br /><br />
								</div>
							</div>
							<div style="clear: both;"></div>
						</div>
					</dl>
				</li>
			</ul>
			<span class="corners-bottom"><span></span></span>
		</div>
	</div>

A questo punto metti nell'index_body.html la seguente riga:

Codice: Seleziona tutto

<!-- INCLUDE rivista_mkr.html -->

Così lavori su un file esterno.

Haku · Messaggio da **Haku** » 11/09/2011, 3:14

Ecco, sei un grande bingo xD
Ci siamo quasi =)

Se posso permettermi (ne vorrei aprofittare senza che tu ti offenda ovviamente ^^ ) possiamo sistemare due cosine?

Ad esempio, i link sulla destra devono rimanere 3 e senza essere così staccate come testo ^^
Al posto delle due immagine volevo inserire la riga come nello screen...il codice che ho utilizzato per far le riche (vecchie ovviamente per poi appiccicare tutto nello screen di esempio):

Codice: Seleziona tutto

<table bgcolor=#c1deed ALINK = #404040 LINK = #404040 VLINK = #404040 marginwidth=0 marginheight=0 topmargin=0 leftmargin=0 valign='top' border='0' width='850' height='30'>
 <tr valign='top'>
  <td valign='top'>
<div style='padding-left: 10px; padding-top:3px; padding-bottom:3px; font-family: Tahoma; font-size: 12px;'>
<img src=''>
<font color='#24668b'>
 <strong>Rivista MKR:</strong> <a target='_blank' href='#'>In  costruzione</a> - 

</font>
</div>
  </td>
 </tr>
</table><br />

Poi, vorrei togliere il contorno con il nome Rivista Mkr, e vorrei lasciare 'Lo sapevi che?' magari in questo modo:
Immagine

Se non sbaglio è l'<h3> nell'html per farlo

(non ricordo come li ho fatti per la home)...

Null'altro, dato che vorrei fosse più compatto per prendere minor spazio ^^

Grazie per l'aiuto, mi ci stavo picchiando per inserire una cosa del genere nel forum per eliminare della roba che no mi serve, ma finchè non la sostituisco con questa, mi viene un pò disordinato organizzarmi ^^

Messaggio da **Micogian** » 11/09/2011, 7:24

Fai così, non ho capito cosa vuoi mettere nella terza colonna, per il resto devi solo aggiustare dimensioni e spazi:

Codice: Seleziona tutto

<h3>SCREEN MENSILE</h3>
<div style="float: left; width: 100%; height: auto;border: 0; ; margin-left: 5px; padding: 5px;">
	<div style="float: left; width: 31%; height: 120px; border: 1 solid #cdcdcd; padding: 0 ">
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div style="float: left; width: 31%; height: 120px; border: 1 solid #cdcdcd; padding: 0 ">
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div style="float: left; width: 31%; height: 120px; border: 0; margin-left: 5px; padding: 0 3px;">
		<div style="width: 220; height: 40px; border: 0; margin-top: 5px; margin-left: 2px; padding: 2px 3px;">
			<img src="http://img600.imageshack.us/img600/5189/46436795.jpg" ><br /><br />
		</div>
		<div style="width: 220; height: 40px; border: 0; margin-top: 5px; margin-left: 2px; padding: 2px 3px;">
			<img src="http://img600.imageshack.us/img600/5189/46436795.jpg" ><br /><br />
		</div>
	</div>
	<div style="clear: both;"></div>
</div>

Haku · Messaggio da **Haku** » 11/09/2011, 15:04

Qullo che vorrei ottnere (breve immagine con Photoshop:

Praticamente, ci siamo quasi xD

Bisogna sostituire le immagini a destra con quelle due 'strisce' con all'interno il testo =P

Grazie ancora bingo.
Fai pure con calma ^^

Messaggio da **Micogian** » 12/09/2011, 22:25

Una volta che hai l'impostazione a tre tabelle ci puoi mettere dentro quello che vuoi, non vedo il problema.
A grosse linee comunque, dovresti fare una cosa del genere:

Codice: Seleziona tutto

<h3>SCREEN MENSILE</h3>
<div style="float: left; width: 100%; height: auto;border: 0; ; margin-left: 5px; padding: 5px;">
	<div style="float: left; width: 35%; height: 120px; border: 1 solid #cdcdcd; padding: 0;">
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div style="float: left; width: 35%; height: 120px; border: 1 solid #cdcdcd; padding: 0 ">
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
		<div style="float: left; width: 100%;" >
			<div style="float: left; text-align: left; width: 10%; margin-top: 3px;"><img src = 'http://img838.imageshack.us/img838/8755/iiib.png' /></div>
			<div style="float: left; text-align: left; width: 80%; margin-top: 3px;">&nbsp;[<span style='color:#346786'>Screen Contest</span>] <a href='#' target= '_blank'>Screen Contest</a></div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div style="float: left; height: 120px; border: 0; margin-left: 5px; padding: 0 3px;">
		<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>
	<div style="clear: both;"></div>
</div>

Ma non so come vuoi inserire i dati, manualmente, con delle variabili ?

phpBB Italia

Tabella personalizzata

Tabella personalizzata

Re: Tabella personalizzata

Re: Tabella personalizzata

Re: Tabella personalizzata

Re: Tabella personalizzata

Re: Tabella personalizzata

Re: Tabella personalizzata

Re: Tabella personalizzata

Re: Tabella personalizzata

Re: Tabella personalizzata

Chi c’è in linea