Mise en forme tableau

[steeve971]

Bonjour à tous !
J'espere vivement que quelqu'un pourra m'aider car cela fait des heures et des heures que je galère.

J'ai un tableau créé via le module mod-custom (contenu personnalisé). C'est un tableau avec des fonds de couleur, une mise en forme spéciale, etc.

J'ai rajouté ce tableau en position2 sur la page d'accueil...Je précise que j'utilise le template beez3.

Ben, rien à faire, une fois affiché, toute la mise en forme se barre... je n'ai plus de couleur, plus rien.. Cela m'affiche le tableau avec une mise en forme quelconque, mais rien à voir avec l'originale.

J'ai déjà essayé :
- d'assigner une classe=none à la table (<table class="none")
- mettre un suffixe de classe CSS particulier...(créé dans personal.css)
- de regarder le code pour voir si le tableau n'est pas dans une "div" particulière.

Rien à faire... toute la mise en forme disparait. Pas de couleur de fond, rien... Mais, à la place, une mise en forme particulière qui sort de je ne sais où.

Quelqu'un peut m'aider svp ?
Le lien : http://www.commissaireauxcomptes.sarl/
C'est le tableau situé juste après "vous êtes ici".

Merci bcp

[Rajoz]

Re : AIDE SVP - Mise en forme tableau

Bonjour steeve971,

Trois éléments à regarder :

1) La position-2 de Beez3 est prévue pour le fil de navigation. En y mettant un autre module, il peut être impacté par le <div id="breadcrumbs"> qui entoure cette position. Note: Je n'ai pas cherché où est défini #breadcrumbs dans les (nombreux) css de Beez3.

2) Pour mettre de la couleur dans les cellules th et td, tu as utilisé bgcolor qui est indiqué par http://www.w3schools.com/tags/att_td_bgcolor.asp comme étant non supporté par HTML5 (Beez3) et recommande d'utiliser le CSS :

• style inline : <td style="background-color: #FF0000">
• ou beaucoup mieux : créer une classe pour la table <table class="maclasse"> et définir ensuite cette classe à la fin de personnal.css :
  table.maclasse th { background-color: #00FF00; }
  table.maclasse td { background-color: #FF0000; }

3) Pour info, la couleur et le dégradé utilisés par défaut pour les tableaux et les cellules sont définies dans personnal.css lignes 108 à 143.

Amicalement,
Rajoz

[steeve971]

Re : Mise en forme tableau

Bonjour,

Merci beaucoup de la réponse...
1/ Concernant le div BREADCRUMBS, j'ai déjà testé plusieurs solutions en modifiant le index.php du template... En effet, j'ai déjà le code qui appelle la position-2 avant l'ouverture du <div id="breadcrumbs">.
J'ai déjà fermé ce </div> et invoquer ma position-2 après...
Rien à faire, mon tableau est toujours impacté.

Aussi, je me suis dit que je vais mettre le tableau ailleurs, pour voir ! J'ai mis dans d'autres positions (position-12, etc.). Rien à faire concernant la mise en forme !

2/ J'ai modifié comme précisé le tableau n'utilisant plus bgcolor. Mais la syntaxe td style="background-color...
Rien à faire... Ca ne fait pas varier la présentation du tableau d'un pouce.

Je ne sais plus où chercher !

Une idée ? Votre aide sera bien précieuse....

Merci d'avance.

[Rajoz]

Re : Mise en forme tableau

Bonsoir steeve971,

Tu dis que les deux solutions CSS que j'ai proposées ne fonctionnent pas chez toi. Pourtant avec l'inspecteur d'élément de Chrome je les ai testées sur ton site et elles marchent toutes les deux.

1) Style CSS inline

Le code suivant de ton site ne marche pas :

<th scope="col" [COLOR=#ff0000]bgcolor="#3399CC"[/COLOR]>
    <h1 style="font-size: 12px; line-height: 10px;">LES ESSENTIELS</h1>
</th>

Alors qu'avec celui que j'ai proposé la cellule est bien dans la couleur choisie :

<th scope="col" [COLOR=#ff0000]style="background-color:#3399CC"[/COLOR]>
    <h1 style="font-size: 12px; line-height: 10px;">LES ESSENTIELS</h1>
</th>

2) Création d'une classe CSS

Comme je ne peux pas ajouter la définition de la classe à position.css, j'ai testé en la mettant dans le code entre les balises <style> et </style> (modifications en rouge).

Résultat : dans la table les cellules en th sont bien rouges et les cellules en td sont bien vertes.

<div class="custommenucustom">
[COLOR=#ff0000]    <style>[/COLOR]
[COLOR=#ff0000]        table.maclasse th { background-color: red; }[/COLOR]
[COLOR=#ff0000]        table.maclasse td { background-color: green; }
    </style>[/COLOR]
    <table class="[COLOR=#ff0000]maclasse[/COLOR]" border="1" width="100%" cellspacing="0" cellpadding="0">

La classe CSS a plusieurs avantages :

• il suffit de changer la couleur à un seul endroit pour que toutes les cellules changent de couleur (au lieu d'avoir à le faire pour chaque cellule),
• on peut ajouter d'autres éléments au style par exemple pour remplacer le <h1 style="font-size: 12px; line-height: 10px;"> ou le <h2 style="font-size: 12px; line-height: 10px; text-align: left;"> qui sont plutôt fâcheux,
• on peut corriger (surcharger) des styles définis dans les CSS (marges, bordures, etc.) sans avoir à modifier le contenu des fichiers CSS. Il suffit de grouper ce que l'on veut, par exemple à la fin de personnal.css ou en ajoutant un custom.css. C'est beaucoup plus simple pour les mises à jour futures.

Amicalement,
Rajoz

[steeve971]

Re : Mise en forme tableau

Salut...
Merci de la réponse.
Mais je te certifie avoir fait les deux propositions...
Le code mis :

<th style="background-color: #3399cc;" scope="col">
<h1 style="font-size: 12px; line-height: 10px;">LES ESSENTIELS</h1>
</th>

Et je te certifie que l'une ou l'autre option n'y fait rien.
Il y a quelque chose qui s'affiche en priorité. Au final, la couleur de fond désirée ne s'affiche pas du tout...

Que faire d'autre ?

[Rajoz]

Re : Mise en forme tableau

Bonjour steeve971,

Avec th, il y a dans le code de personal.css un background-image (lignes 113 à 131), cette image de fond est utilisée par Beez3 pour faire un dégradé de bleu dans les cellules d'entête. Le souci c'est qu'elle passe devant le background-color quand il est aussi dans le css, ce qui n'est pas le cas avec l'inspecteur d'élément de Chrome. Il faut donc aussi annuler ce background-image pour th.

Comme j'ai eu un peu de temps ce matin, j'ai pu regarder ton code et le modifier pour y ajouter les classes de couleur comme je l'indiquais. Tu trouveras ci-joint :

• tableau_menu_html.zip : le code HTML pour le tableau de menu du module personnalisé. J'ai conservé l'organisation du tableau, les liens et ton choix de couleurs pour les colonnes. Par contre, j'ai fait le ménage des h1, h2 et bgcolor, et bien sûr j'ai ajouté les classes pour obtenir le résultat que j'ai déduit de ton code.
• tableau_menu_css.zip : le code CSS à ajouter à la fin de personal.css pour annuler le background-image, définir les caractères et les couleurs des colonnes.

Voici le résultat que j'obtiens sur mon site de test (J!3.4.1 Beez3 position-2) :

(cliquer sur l'image pour l'agrandir)

Amicalement,
Rajoz

[lomart]

Re : Mise en forme tableau

Bonjour,

Je me permets d'intervenir dans votre échange pour une simple réflexion.

Pourquoi utiliser un tableau pour la navigation dans un template responsive ?

Une structure en liste avec le css qui va bien serait une meilleure solution.

[steeve971]

Re : Mise en forme tableau

Bonjour....

Bon, je ne sais plus quoi te dire... si ce n'est MERCI MERCI !!!
Ca fonctionne enfin.
Faire des sites n'est pas mon métier et je me rends compte que j'ai encore bcp à apprendre de ce passe temps... !

Merci encore pour tout. Ca fonctionne enfin...