Pagina 1 di 3
Tabella personalizzata
Inviato: 08/09/2011, 3:25
da Haku
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:
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!
Re: Tabella personalizzata
Inviato: 08/09/2011, 21:55
da Tiger
Haku,questa tabella ,che vorresti dovrebbe contenere,immagini?
Re: Tabella personalizzata
Inviato: 08/09/2011, 22:45
da Micogian
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.
Re: Tabella personalizzata
Inviato: 09/09/2011, 2:48
da Haku
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> [<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> [<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> [<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
Re: Tabella personalizzata
Inviato: 10/09/2011, 14:31
da Haku
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).
Re: Tabella personalizzata
Inviato: 10/09/2011, 18:48
da Micogian
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%;"> 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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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:
Così lavori su un file esterno.
Re: Tabella personalizzata
Inviato: 11/09/2011, 3:14
da Haku
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:
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 ^^
Re: Tabella personalizzata
Inviato: 11/09/2011, 7:24
da Micogian
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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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%;"> [<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>
Re: Tabella personalizzata
Inviato: 11/09/2011, 15:04
da Haku
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 ^^
Re: Tabella personalizzata
Inviato: 12/09/2011, 22:25
da Micogian
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;"> [<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;"> [<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;"> [<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;"> [<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;"> [<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;"> [<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;"> [<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;"> [<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 ?