Joomla.it Forum

Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : ilbaro 20 Feb 2014, 10:12:05

: Creare tabella formata da quadrati
: ilbaro 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.
:
<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]
: Re:Creare tabella formata da quadrati
: mem.webproject 20 Feb 2014, 10:56:12
hai provato a farla con i div la tabella?

ci sono parecchie guide on line  ;)
: Re:Creare tabella formata da quadrati
: ilbaro 20 Feb 2014, 12:02:58
: 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.
: Re:Creare tabella formata da quadrati
: ophtalmos 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
:
<!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>


 
: Re:Creare tabella formata da quadrati
: ilbaro 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



: Re:Creare tabella formata da quadrati
: andreadamoni 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).
: Re:Creare tabella formata da quadrati
: ilbaro 22 Feb 2014, 13:45:27
: ophtalmos  20 Feb 2014, 23:01:20
:
<!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.
: Re:Creare tabella formata da quadrati
: andreadamoni 22 Feb 2014, 14:01:45
Lo selezioni tutto e fai copia per poi incollarlo nell'editor del tuo articolo.
Più facile di così... ;)
: Re:Creare tabella formata da quadrati
: ilbaro 22 Feb 2014, 18:23:17
Ho provato, l'ho incollato nella sezione html dell editor, però mezzo codice sparisce e non funziona.
: Re:Creare tabella formata da quadrati
: andreadamoni 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"
: Re:Creare tabella formata da quadrati
: ilbaro 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:
: Re:Creare tabella formata da quadrati
: ilbaro 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.
: Re:Creare tabella formata da quadrati
: ilbaro 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.
: Re:Creare tabella formata da quadrati
: andreadamoni 24 Feb 2014, 19:34:14
se mi dai un link te lo dico con più facilità
: Re:Creare tabella formata da quadrati
: ilbaro 24 Feb 2014, 21:10:59
: andreadamoni  24 Feb 2014, 19:34:14
se mi dai un link te lo dico con più facilità

Ti ho mandato un MP.

grazie
: Re:Creare tabella formata da quadrati
: ilbaro 24 Feb 2014, 23:15:00
Devo modificare le misure della cella da queste:

:
.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:
:
border:1px solid #0a68f4;
margin:4px;
padding:0px;
width:140px;
height:90px;

Come cambiano a sua volta le misure del wrapping?