Mise en forme tableau

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Mise en forme tableau

    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

  • #2
    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

    Commentaire


    • #3
      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.

      Commentaire


      • #4
        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 :
        Code:
        <th scope="col" bgcolor="#3399CC">
            <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 :
        Code:
        <th scope="col" style="background-color:#3399CC">
            <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.
        Code:
        <div class="custommenucustom">
            <style>
                table.maclasse th { background-color: red; }
                table.maclasse td { background-color: green; }
            </style>
            <table class="maclasse" 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

        Commentaire


        • #5
          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 ?

          Commentaire


          • #6
            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) :
            Cliquez sur l'image pour l'afficher en taille normale

Nom : tableau_menu.jpg 
Affichages : 1 
Taille : 15,9 Ko 
ID : 1804162
            (cliquer sur l'image pour l'agrandir)

            Amicalement,
            Rajoz

            Commentaire


            • #7
              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.
              Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
              ---
              UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
              bgMax
              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

              Commentaire


              • #8
                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...

                Commentaire

                Annonce

                Réduire
                1 sur 2 < >

                C'est [Réglé] et on n'en parle plus ?

                A quoi ça sert ?
                La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                Comment ajouter la mention [Réglé] à votre discussion ?
                1 - Aller sur votre discussion et éditer votre premier message :


                2 - Cliquer sur la liste déroulante Préfixe.

                3 - Choisir le préfixe [Réglé].


                4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                2 sur 2 < >

                Assistance au forum - Outil de publication d'infos de votre site

                Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                UTILISER À VOS PROPRES RISQUES :
                L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                Problèmes connus :
                FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                Installation :

                1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                Archive zip : https://github.com/AFUJ/FPA/zipball/master

                2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                et remplacer www. votresite .com par votre nom de domaine


                Exemples:
                Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                Télécharger le script fpa-fr.php dans: /public_html/
                Pour executer le script: http://www..com/fpa-fr.php

                Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                Télécharger le script fpa-fr.php dans: /public_html/cms/
                Pour executer le script: http://www..com/cms/fpa-fr.php

                En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                Voir plus
                Voir moins
                Travaille ...
                X