Autore Topic: Creare tabella formata da quadrati (Letto 3663 volte)

ilbaro · « **il:** 20 Feb 2014, 10:12:05 »

Volevo creare una tabella che graficamente ricreasse dei quadrati "celle" uno vicino all'altro e ognuno con il suo bordo propio distinto separato dall'altro e non tutti attaccati.[/size]Io ho fatto così, però dal backend del CMS sembra funzionare, ma nel sito rimangono nella "forma" standard cioè le celle sono attaccate e separate solo da una linea, (di default).Ho usato il cellspacing, però sembra che non cambi nulla.
Non ho capito se sbaglio io ho è joomla che non me l'ho permette di fare.

Codice: [Seleziona]

<table cellspacing="10">
<tbody>
<tr>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
</tr>
<tr>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
</tr>
<tr>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa</td>
<td style="border: 1px solid #adc33b;" align="center" valign="middle">aaa </td>
</tr>


</tbody></table>

[/size][/font][/color]

mem.webproject · « **Risposta #1 il:** 20 Feb 2014, 10:56:12 »

hai provato a farla con i div la tabella?

ci sono parecchie guide on line

ilbaro · « **Risposta #2 il:** 20 Feb 2014, 12:02:58 »

Citazione da: mem.webproject - 20 Feb 2014, 10:56:12

hai provato a farla con i div la tabella?

ci sono parecchie guide on line

Scusa, me ne potresti segnalare una al volo, io ho cercato su google, ma non riesco a trovare niente.

ophtalmos · « **Risposta #3 il:** 20 Feb 2014, 23:01:20 »

Ti invio un codice in html e css per una tabellina, se conosci un pò di css la puoi modificare e personalizzare come vuoi modificando i valori assegnati , ciao buona notte

Codice: [Seleziona]

<!doctype html>
<html>
<head>
<style type=text/css>
body{
color:red;
background-color:#cccccc;
}
.wrapping{
background-color:#ffffff;
border:2px solid #000000;
padding:1px;
width:216px;
height:216px;
margin:auto;

}
.cella{
background-color:#00ff00;
COLOR:BLACK;
border:1px solid #000000;
margin:1px;
padding:0px;
width:20px;
height:20px;
float:left;
screen:auto;

}
</style>
</head>
<body>
<div class=wrapping>
<div class=cella>1</div><div class=cella>2</div><div class=cella>3</div>
<div class=cella>4</div><div class=cella>5</div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
<div class=cella></div><div class=cella></div><div class=cella></div>
 

</div>
</body>
</html>

ilbaro · « **Risposta #4 il:** 21 Feb 2014, 11:49:51 »

Grazie dell aiuto, modificare posso farlo, però il problema è dove vanno inseriti i codici: il file html dovrebbe essere incollato nel backend dove voglio scrivere l'articolo, e il file css? forse nel template.css

andreadamoni · « **Risposta #5 il:** 21 Feb 2014, 18:22:15 »

Ciao ilbaro,
i codici html gli devi mettere nello stesso posto in cui metteresti le tabelle.
Per quanto riguarda i css, la cosa più semplici è di inserirli alla fine di uno dei css del tuo template (es: template.css).

ilbaro · « **Risposta #6 il:** 22 Feb 2014, 13:45:27 »

Citazione da: ophtalmos - 20 Feb 2014, 23:01:20

Codice: [Seleziona]
<!doctype html> <html> <head> <style type=text/css> body{ color:red; background-color:#cccccc; } .wrapping{ background-color:#ffffff; border:2px solid #000000; padding:1px; width:216px; height:216px; margin:auto; } .cella{ background-color:#00ff00; COLOR:BLACK; border:1px solid #000000; margin:1px; padding:0px; width:20px; height:20px; float:left; screen:auto; } </style> </head> <body> <div class=wrapping> <div class=cella>1</div><div class=cella>2</div><div class=cella>3</div> <div class=cella>4</div><div class=cella>5</div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> <div class=cella></div><div class=cella></div><div class=cella></div> </div> </body> </html>

Ho visto ora che questo file è tutto "insieme"? non sò propio come farlo a dusare.

andreadamoni · « **Risposta #7 il:** 22 Feb 2014, 14:01:45 »

Lo selezioni tutto e fai copia per poi incollarlo nell'editor del tuo articolo.
Più facile di così...

ilbaro · « **Risposta #8 il:** 22 Feb 2014, 18:23:17 »

Ho provato, l'ho incollato nella sezione html dell editor, però mezzo codice sparisce e non funziona.

andreadamoni · « **Risposta #9 il:** 22 Feb 2014, 19:24:15 »

Il codice va inserito all'interno di un articolo dove si scrive il testo dell'articolo, avendo l'accortezza di entrare in modalità editor.
Se ti cancella parti di codice e sei all'interno di un articolo, i casi sono 2:
o hai copiato la scritta da cms non attivando la funzione editor (tasto "editor sì/no),
o hai qualche impostazione sbagliata nel plugin "Editor - TinyMCE"

ilbaro · « **Risposta #10 il:** 24 Feb 2014, 13:25:08 »

Ho selezionato edito si/no per aggiungere il codice , però quando salvo torna la modalità "normale" e anche in questo modo una parte del codice sparisce.

Nel plugin editor Tiny MCE ci sono alcune opzioni, ma quale dovrei cambiare?

Opzioni di base:

Modalità
Skin
Codifica entità
Scelta automatica della lingua
Codice lingua
Direzione testo
Classi CSS template
Classi CSS personalizzate
URLs
Nuove linee
Elementi proibiti
Elementi consentiti estesi

ilbaro · « **Risposta #11 il:** 24 Feb 2014, 18:32:37 »

Per risolvere ho dovuto disattivere l editor in configurazione sito creare l'articolo salvarlo e poi tornare in configurazione sito per riabilitare editor Tiny MCE.

ilbaro · « **Risposta #12 il:** 24 Feb 2014, 18:34:08 »

Ho cambiato un pò il codice, però volevo sapere che codice devo inserire per spostare tutti i "quadrati" al centro pagina, ora sono allineati a sinistra.

andreadamoni · « **Risposta #13 il:** 24 Feb 2014, 19:34:14 »

se mi dai un link te lo dico con più facilità

ilbaro · « **Risposta #14 il:** 24 Feb 2014, 21:10:59 »

Citazione da: andreadamoni - 24 Feb 2014, 19:34:14

se mi dai un link te lo dico con più facilità

Ti ho mandato un MP.

grazie

ilbaro · « **Risposta #15 il:** 24 Feb 2014, 23:15:00 »

Devo modificare le misure della cella da queste:

Codice: [Seleziona]

.wrapping{
background-color:#ffffff;
border:2px solid #000000;
padding:1px;
width:216px;
height:216px;
margin:auto;

}
.cella{
background-color:#00ff00;
COLOR:BLACK;
border:1px solid #000000;
margin:1px;
padding:0px;
width:20px;
height:20px;
float:left;
screen:auto;

in queste:

Codice: [Seleziona]

border:1px solid #0a68f4;
margin:4px;
padding:0px;
width:140px;
height:90px;

Come cambiano a sua volta le misure del wrapping?

Autore Topic: Creare tabella formata da quadrati (Letto 3663 volte)

ilbaro

Creare tabella formata da quadrati

mem.webproject

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati

ophtalmos

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati

andreadamoni

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati

andreadamoni

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati

andreadamoni

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati

andreadamoni

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati

ilbaro

Re:Creare tabella formata da quadrati