Question [réglé] intégration d'un tableau css3 dans mon site joomla 1.5

Plus d'informations
14 Nov 2010 10:10 - 14 Nov 2010 13:39 #1 par mouchmouch
Bonjour à tous. Je vous demanderais d'être patient avec moi car je suis une grande débutante en matière de création de site. Ceci ajouté au fait que j'ai le cerveau calleux, ça aide pas :huh:

Depuis plusieurs jours, j'essaye plein de trucs trouvé sur google et sur l'outil recherche du forum mais rien à faire, rien ne marche.

Mon problème est certainement très simple et j'espère que vous me proposerais quelque chose qui fonctionne :heink:
:dieu
le problème c'est ceci : ce tableau en css3




Ce que je veux c'est trouver une solution pour avoir ce tableau qui s'affiche quelque part dans mon site joomla 1.5, si possible dans un article rien de plus ;)



j'utilise comme editeur "JCE"

donc comme je vous le dis c'est certainement trés simple, mais j'ai beau chercher, et ce que je trouve, soit :
  • je ne comprend rien aux explications, car je suis sans doute trop nul
  • je cherche mal
  • je ne trouve pas




Merci d'avance à ceux qui viendront aider la cosette que je suis:dieu :dieu :dieu
Dernière édition: 14 Nov 2010 13:39 par mouchmouch.
Le sujet a été verrouillé.
Plus d'informations
14 Nov 2010 11:52 #2 par tramber91
Bonjour,

tu dois faire cela en 3 étapes

1) Tu copies les codes du tableau
<table class="table1">
<thead>
<tr>
<th></th>
<th scope="col" abbr="Starter">Smart Starter</th>
<th scope="col" abbr="Medium">Smart Medium</th>
<th scope="col" abbr="Business">Smart Business</th>
<th scope="col" abbr="Deluxe">Smart Deluxe</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</tbody>
</table

et tu les colles dans ton éditeur JCE (en mode sans éditeur)



si tu repasses en mode éditeur tu as ton tableau sans les Styles



2) Tu fais tes modifications de ligne et colonne

3) Donc tu as ton article avec ton tableau



Tu installes les styles dans le bon fichier CSS

Tu vas dans Extension/ gestion des templates/ ton template/ éditer le CSS

Logiquement tu édites joomla.css mais cela dépend de ton template
Chez moi sur mon test c'était reset.css.

Tu colles les codes CSS ci dessous (en bas de ton fichier css que tu as édité)
table.table1{
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;
}
.table1 thead th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border:1px solid #93CE37;
border-bottom:3px solid #9ED929;
background-color:#9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.table1 thead th:empty{
background:transparent;
border:none;
}
.table1 tfoot td{
color: #9CD009;
font-size:32px;
text-align:center;
padding:10px 0px;
text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
color:#666;
}
 
 
.table1 tbody td{
padding:10px;
text-align:center;
background-color:#DEF3CA;
border: 2px solid #E7EFE0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
 
 
.table1 tbody span.check::before{
content : url(../images/check0.png)
}

et c'est magique



après on peaufine

courage

@+

Pas de support en MP sans y être invité. Merci
Merci de vous conformer aux règles du forum. Un merci, Cela fait toujours plaisir ;)
www.en-toutes-lettres.fr - Digital
Les utilisateur(s) suivant ont remercié: lavsteph, mouchmouch
Le sujet a été verrouillé.
Plus d'informations
14 Nov 2010 12:38 - 14 Nov 2010 12:40 #3 par mouchmouch
rapide et super clair, ça me va, j'essaye ça et je te tiens au courant sur ce fil.

En tout cas merci beaucoup Tramber :bravo


PS je met en "réglé" dès que j'aurais mis en pratique le petit tuto de tramber, et que j'aurais confirmation que ça fonctionne ;)
Dernière édition: 14 Nov 2010 12:40 par mouchmouch.
Le sujet a été verrouillé.
Plus d'informations
14 Nov 2010 13:37 #4 par mouchmouch
ça marche parfaitement, un grand merci à toi Tramber tu m'enlèves une épine du pied, et sur surtout merci pour t'être mis à ma portée. Tes explications étaient comme il le fallait pour un débutant. ;)
Le sujet a été verrouillé.
Plus d'informations
14 Nov 2010 14:34 #5 par lavsteph
Bonjour,

Bertrand là tu assures :dieu , je clos ce sujet pour qu'il ne soit pas polluer. :top

@ mouchmouch je laisse le choix à Tramber le dernier mot, voir ré-ouvrir le sujet. ;)
Le sujet a été verrouillé.
  • Vous ne pouvez pas: Créer un nouveau sujet.
  • Vous ne pouvez pas: Répondre au sujet.
  • Vous ne pouvez pas: Éditer votre message.
Modérateurs: lavstephxillibittramber91Scottuxsergestarter
Temps de génération de la page : 0.235 secondes