Joomladay francophone 2018 à Paris 18 et 19 mai

Menu gauche CSS sous IE

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

  • Menu gauche CSS sous IE

    Bonjours à toutes et a tous,

    Mon problemen de menu sous IE vien du CSS pour allignement du Menu, que faut-il faire? Je possede le template rt_modbusiness.
    Mon site : www.actu-auto.fr

    Amicalement Néfa
    www.actu-auto.fr

  • #2
    quelqun aurait une idée de se que je dois modifier dans le CSS ?
    www.actu-auto.fr

    Commentaire


    • #3
      quelqun aurait une idée de se qu'il faut modifier dans le CSS, pour que le menu sous IE soit comme sous FF
      www.actu-auto.fr

      Commentaire


      • #4
        Bonjour,
        1ère chose à faire, cherche sur le forum comment faire une feuille de style différente pour IE et FF (conditionnal comment)
        Lorsque tu as mis en place la feuille de style pour chaque navigateur, occupe toi de la partie left2col moduletable..
        Cordialement,
        Chabi01 - http://www.xlformation.com

        Commentaire


        • #5
          Dans un autre topic on m'avait parlé de modifier dans le CSS du template ( parce que si je change de template je n'est pu se probleme ... )
          www.actu-auto.fr

          Commentaire


          • #6
            Effectivement, il va falloir que tu changes le css !
            Mais si tu changes des règles, elles vont s'appliquer à tous les navigateurs !!!
            Donc, si ton site est correct sous FF, ne touches pas aux réglages du css mais donnes des réglages soit :
            - dans le même fichier css avec "important!", mais j'évite cette technique, le code Css devenant rapidement bordélique,
            - dans un autre fichier css appelé après détection du navigateur avec les "conditionnal comment"

            De multiples posts existent sur ce forum pour ton problème précis : la solution a déjà été décrite dans les forums, sur les sites traitant du css, dans les différents tutos, sur le site de papounet, partout !!!

            Intéresses-toi aux règles css, aux calculs de boites div, aux différences de rendu entre FF et IE et tu auras toutes les réponses..

            Cordialement,
            Chabi01 - http://www.xlformation.com

            Commentaire


            • #7
              Ok Merci, je pensais qu'on me dirais ce qu'il faut faire directement ( une ligne a changer, a remplacer, a rajouter ) Parceque je suis débutant et je ne connais rien en code. Et je ne comprends pas pourquoi sur IE ça ne marche pas ( ça voudrais dire que le template n'est pas prévu pour fonctionner sur IE ? )

              amicalement néfa
              www.actu-auto.fr

              Commentaire


              • #8
                Bonsoir Néfa,

                Pour que tu comprennes le problème, il faut savoir plusieurs choses :
                - il n'y a pas de réponses exactes à ton problème : chaque problème de css possède plusieurs solutions
                - le même template affichant des éléments différents, des modules et composants différents, vont présenter des problèmes différents : un module s'affiche avec sa propre présentation. Suivant les modules et composants utilisés, le template va se comporter différemment,
                - tu peux avoir des réponses directement à ton problème, mais il est quand même important que tu cherches le pourquoi : dans l'absolu, il suffit que tu changes un module de place pour que ton problème réapparaisse

                En attendant, je vais regarder de plus près ton soucis..
                Cordialement,
                Chabi01 - http://www.xlformation.com

                Commentaire


                • #9
                  Je viens de regarder ton css.

                  Dans ton div "constructeur_menu", essaye de changer :
                  style="position:relative......."
                  en
                  style="position:absolute"

                  Je ne garantie le résultat.. (pas d'IE6 sous la main ce soir..)

                  Cordialement,
                  Chabi01 - http://www.xlformation.com

                  Commentaire


                  • #10
                    Bonjour chabi01,

                    Très gentil de m'aider ! J'ai pas trouvé la ligne que tu m'a dit .
                    Je te copie le CSS en dessous

                    Amicalement Néfa
                    www.actu-auto.fr

                    Commentaire


                    • #11
                      CSS de mon template

                      /* custom stuff */

                      html {
                      height: 100%;
                      margin-bottom: 1px;
                      }


                      body {
                      margin: 0;
                      padding: 0;
                      background: #0E1D30 url(../images/mb_bg.png) repeat-x;
                      font-size: 11px;
                      line-height: 130%;
                      color: #131E2D;
                      }

                      p {
                      margin-top: 0;
                      margin-bottom: 5px;
                      }

                      fieldset {
                      border: 0;
                      padding: 5px 0;
                      }

                      span.pathway img {
                      padding: 0px 5px;
                      }

                      span.pathway {
                      display: block;
                      margin-bottom: 15px;
                      margin-top: 15px;
                      padding-left: 15px;
                      background: url(../images/arrow.png) 0 0 no-repeat;
                      }


                      div.componentheading {
                      padding-left: 0px;
                      }

                      a.readon {
                      margin-top: 10px;
                      line-height: 14px;
                      height: 16px;
                      }

                      /*** fonts ***/
                      body {
                      font-family: Verdana, Helvetica, Arial, sans-serif;
                      }

                      /** colors set in the color css file **/
                      a:link,
                      a:visited {
                      text-decoration: none;
                      font-weight: normal;
                      outline: none;
                      }

                      body.left td#leftcol a:link,
                      body.left td#leftcol a:visited,
                      body.left td#left2col a:link,
                      body.left td#left2col a:visited,
                      body.right td#rightcol a:link,
                      body.right td#rightcol a:visited,
                      body.right td#right2col a:link,
                      body.right td#right2col a:visited,
                      td#usercol a:link,
                      td#usercol a:visited {
                      color: #fff;
                      }

                      td#usercol {
                      color: #ccc;
                      }

                      #horizmenu a,
                      a.mainlevel,
                      a.sublevel,
                      ul.submenu a,
                      div.moduletable h3,
                      .contentheading,
                      .componentheading {
                      font-family: Helvetica, Arial, sans-serif;
                      }

                      /* headings */

                      h1 {

                      }

                      h2 {

                      }

                      h3 {
                      margin: 0;
                      }

                      h4 {

                      }

                      body.left td#leftcol div.moduletable h3,
                      body.left td#left2col div.moduletable h3,
                      body.right td#rightcol div.moduletable h3,
                      body.right td#right2col div.moduletable h3 {
                      font-size: 12px;
                      font-weight: bold;
                      background: #46596e;
                      color: #ccc;
                      }

                      body.left td#rightcol div.moduletable h3,
                      body.left td#right2col div.moduletable h3,
                      body.right td#leftcol div.moduletable h3,
                      body.right td#left2col div.moduletable h3 {
                      font-size: 12px;
                      font-weight: bold;
                      background: #B9B9B9;
                      color: #fff;
                      }

                      td#usercol div.moduletable h3 {
                      font-size: 12px;
                      font-weight: bold;
                      background: none;
                      color: #ccc;
                      }

                      td#maincol div.moduletable h3 {
                      font-size: 13px;
                      background: none;
                      font-weight: bold;
                      color: #333;
                      }

                      .small {
                      font-size: 10px;
                      color: #666;
                      font-weight: normal;
                      }

                      .modifydate {
                      height: 20px;
                      vertical-align: bottom;
                      font-size: 10px;
                      color: #666;
                      font-weight: normal;
                      }

                      .createdate {
                      height: 20px;
                      vertical-align: top;
                      font-size: 10px;
                      color: #666;
                      font-weight: normal;
                      vertical-align: top;
                      padding-bottom: 5px;
                      padding-top: 0px;

                      }

                      .componentheading {
                      color: #333;
                      font-size: 13px;
                      font-weight: bold;
                      margin-bottom: 10px;
                      }

                      .contentheading {
                      color: #46596E;
                      font-size: 18px;
                      font-weight: bold;
                      padding-bottom: 20px;
                      line-height: 25px;
                      }

                      div#footer {
                      height: 30px;
                      font-size: 11px;
                      color: #6B84A0;
                      text-align: center;
                      }

                      /** some joomla class stuff */

                      table.contenttoc {
                      margin: 5px;
                      border: 1px solid #ccc;
                      padding: 5px;
                      }

                      table.contenttoc td {
                      padding: 0 5px;
                      }


                      td.buttonheading {

                      }

                      td.sectiontableheader {
                      background: #efefef;
                      color: #333;
                      font-weight: bold;
                      padding: 4px;
                      border-right: 1px solid #fff;
                      }

                      tr.sectiontableentry1 td, tr.sectiontableentry2 td {
                      padding: 4px;
                      }

                      td.sectiontableentry1, td.sectiontableentry2{
                      padding: 3px;
                      }

                      table.contentpaneopen{
                      width: 100%;
                      }

                      td.contentheading{
                      width: 100%;
                      }

                      div.moduletable ul {
                      margin: 5px 0;
                      padding: 0 2em;
                      }

                      div.moduletable ul li {
                      padding-bottom: 3px;
                      }

                      td#leftcol div.moduletable,
                      td#left2col div.moduletable,
                      td#rightcol div.moduletable,
                      td#right2col div.moduletable {
                      padding-bottom: 15px;
                      padding-left: 5px;
                      padding-right: 5px;
                      width: 175px; /* stupid id need a fixed width here */
                      }

                      div.moduletable h3 {
                      margin-left: -5px;
                      margin-right: -5px;
                      margin-bottom: 8px;
                      text-indent: 5px;
                      height: 24px;
                      padding-top: 2px;
                      line-height: 24px;


                      }



                      .clr {
                      clear: both;
                      }

                      #page_bg {
                      height: 100%;
                      padding: 0;
                      margin-bottom: 1px;
                      }

                      div.mosimage {
                      margin: 5px;
                      }

                      div.mosimage_caption {
                      font-size: 10px;
                      color: #666;
                      }

                      table.adminform textarea {
                      width: 540px;
                      height: 400px;
                      font-size: 1em;
                      color: #000099;
                      }


                      /** template layout stuff **/

                      div#wrapper {
                      margin: 0 auto;
                      position: relative;
                      }

                      body.wide div#wrapper {
                      width: 932px;
                      }

                      body.thin div#wrapper {
                      width: 750px;
                      }

                      body.vmax div#wrapper {
                      min-width: 700px;
                      max-width: 932px;
                      }


                      div#tshadow1 {
                      background: url(../images/mb_shadow_t.png) repeat-x;
                      position: relative;
                      }

                      div#tshadow2 {
                      background: url(../images/mb_shadow_t_r.png) 100% 0 no-repeat;
                      position: relative;
                      }

                      div#tshadow3 {
                      height: 13px;
                      background: url(../images/mb_shadow_t_l.png) 0 0 no-repeat;
                      overflow: hidden;
                      position: relative;
                      }

                      div#mshadow1 {
                      background: url(../images/mb_shadow_m_b_l.png) 0 0 repeat-y;
                      position: relative;
                      }

                      div#mshadow2 {
                      background: url(../images/mb_shadow_m_b_r.png) 100% 0 repeat-y;
                      position: relative;
                      }

                      div#mshadow3 {
                      background: url(../images/mb_shadow_m_t_l.png) 0 0 no-repeat;
                      position: relative;
                      }

                      div#mshadow4 {
                      background: url(../images/mb_shadow_m_t_r.png) 100% 0 no-repeat;
                      padding: 0 16px;
                      position: relative;
                      }

                      div#bshadow1 {
                      background: url(../images/mb_shadow_b.png) repeat-x;
                      }

                      div#bshadow2 {
                      background: url(../images/mb_shadow_b_r.png) 100% 0 no-repeat;
                      }

                      div#bshadow3 {
                      height: 13px;
                      background: url(../images/mb_shadow_b_l.png) 0 0 no-repeat;
                      }

                      div#header {
                      position: relative;
                      background: #000 url(../images/mb_header_orange1.jpg) 50% 0 no-repeat;
                      height: 124px;
                      overflow: hidden;
                      }

                      div#blendimage {
                      height: 124px;
                      background-position: 50% 0;
                      }

                      div#logo {
                      position: absolute;
                      top: 110px;
                      left: 45px;
                      z-index: 5;
                      height: 39px;
                      width: 304px;
                      background: url(../images/mb_logo.png) no-repeat !important;
                      background: transparent;
                      }

                      div#horizmenu {
                      background: url(../images/mb_menu_horiz_bg.png) 0 0 repeat-x;
                      height: 45px;
                      position: relative;
                      }

                      table#mainframe {
                      margin: 0;
                      padding: 0;
                      border-collapse: collapse;
                      width: 100%;
                      }

                      table#mainframe td {
                      padding: 0;
                      }

                      body.left table#mainframe td#leftcol {
                      background: #97A8BB url(../images/mb_cshadow_l.png) 100% 0 repeat-y;
                      width: 175px;
                      }

                      body.right table#mainframe td#rightcol {
                      background: #97A8BB url(../images/mb_cshadow_r.png) 0 0 repeat-y;
                      width: 175px;
                      }

                      div#leftcol_corner {
                      background: url(../images/mb_cshadow_t_l.png) 100% 0 no-repeat;
                      padding-right: 10px;
                      }


                      body.left div#leftcol_body,
                      body.right div#rightcol_body {
                      background: url(../images/mb_col_bg_blue.png) 0 0 repeat-x;
                      padding-top: 15px;
                      border: 0px solid #00f;
                      }

                      body.left table#mainframe td#rightcol {
                      background: #fff url(../images/mb_cshadow_r.png) 0 0 repeat-y;
                      width: 175px;
                      }

                      body.right table#mainframe td#leftcol {
                      background: #fff url(../images/mb_cshadow_l.png) 100% 0 repeat-y;
                      width: 175px;
                      }

                      div#rightcol_corner {
                      background: url(../images/mb_cshadow_t_r.png) 0 0 no-repeat;
                      padding-left: 10px;
                      }

                      body.left div#rightcol_body,
                      body.right div#leftcol_body {
                      background: url(../images/mb_col_bg_grey.png) 0 0 repeat-x;
                      padding-top: 15px;
                      }

                      table#mainframe td#maincol {
                      background: #fff url(../images/mb_cshadow_t.png) 0 0 repeat-x;
                      color: #46596E;
                      padding: 0 5px 15px 5px;
                      }

                      body.left table#mainframe td#left2col {
                      /* background in color css */
                      padding-right: 10px;
                      }

                      body.right table#mainframe td#left2col {
                      /* background in color css */
                      padding-right: 10px;
                      }

                      body.left table#mainframe td#right2col {
                      /* background in color css */
                      padding-left: 10px;
                      }

                      body.right table#mainframe td#right2col {
                      /* background in color css */
                      padding-left: 10px;
                      }

                      table#mainframe td#usercol {
                      /* background in color css */
                      padding-top: 10px;
                      }



                      td#usercol li {
                      color: #ccc;
                      }



                      /* default menu link styles */
                      a.mainlevel {
                      display: block;
                      width: 168px;
                      border-right: 4px solid #46596E;
                      margin-bottom: 3px;
                      padding: 3px 0px;
                      border-top: 1px solid #5F7287;
                      }

                      a.sublevel {

                      }

                      body.left td#leftcol a.mainlevel:link,
                      body.left td#leftcol a.mainlevel:visited,
                      body.right td#rightcol a.mainlevel:link,
                      body.right td#rightcol a.mainlevel:visited,
                      body.left td#leftcol a.sublevel:link,
                      body.left td#leftcol a.sublevel:visited,
                      body.right td#rightcol a.sublevel:link,
                      body.right td#rightcol a.sublevel:visited {
                      color: #1d242c;
                      font-weight: bold;
                      }

                      a.mainlevel:hover {
                      text-decoration: none;
                      /** color in color css **/
                      }

                      a.sublevel:hover {
                      text-decoration: none;
                      }
                      www.actu-auto.fr

                      Commentaire


                      • #12
                        suite du CSS

                        /*****************************
                        **** splitmenu ****
                        *****************************/


                        /* top level links */
                        #navheader li {
                        z-index: 3;
                        position: relative;
                        float: left;
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        }
                        #navheader li a {
                        display: block;
                        font-size: 12px;
                        font-weight: bold;
                        padding: 0 14px;
                        text-decoration: none;
                        color: #bbb;}

                        #navheader li a:hover {
                        color: #fff;}

                        #navheader li.active {
                        z-index: 1;
                        height: 17px;
                        border-bottom: 4px solid #46596E;
                        }
                        #navheader {
                        z-index: 2;
                        position: absolute;
                        height: 20px;
                        margin-top: 15px;
                        }

                        #slider {
                        z-index: 2;
                        position: absolute;
                        height: 0px;
                        margin-top: 20px !important;
                        margin-top: 5px;
                        /* color in color css file */
                        }

                        /* sub level links */

                        td#leftcol ul.submenu,
                        td#rightcol ul.submenu,
                        td#leftcol ul.submenu ul,
                        td#rigthcol ul.submenu ul,
                        td#leftcol ul.submenu ul ul,
                        td#rigthcol ul.submenu ul ul {
                        padding: 0;
                        margin: 0;
                        }

                        ul.submenu li{
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        }

                        ul.submenu ul li a{
                        text-indent: 15px;
                        }

                        ul.submenu ul ul li a{
                        text-indent: 30px;
                        }

                        ul.submenu ul li a {
                        border-right: 4px solid #46596E;
                        }

                        ul.submenu li a {
                        display: block;
                        width: 168px;
                        border-right: 4px solid #46596E;
                        padding: 3px 0px;
                        border-top: 1px solid #5F7287;
                        }

                        td#leftcol ul.submenu a:link,
                        td#leftcol ul.submenu a:visited,
                        td#rightcol ul.submenu a:link,
                        td#rightcol ul.submenu a:visited {
                        color: #1d242c;
                        font-weight: bold;
                        }

                        td#leftcol ul.submenu a:hover,
                        td#rightcol ul.submenu a:hover {
                        text-decoration: none;
                        }

                        td#leftcol ul.submenu ul li a,
                        td#rightcol ul.submenu ul li a {
                        border-right: 4px solid #46596E;
                        }


                        /* some page content things */

                        form {
                        border: 0;
                        margin: 0;
                        padding: 0;
                        }

                        table.blog span.article_seperator {
                        display: block;
                        height: 20px;
                        }

                        table.nopad {
                        width: 100%;
                        border-collapse: collapse;
                        padding: 0;
                        margin: 0;
                        }
                        table.nopad td {
                        padding: 5px;
                        }

                        body.contentpane {
                        background: #fff;
                        }

                        table.pollstableborder td {
                        text-align: left;
                        padding: 2px 0;
                        }
                        www.actu-auto.fr

                        Commentaire


                        • #13
                          Ici :

                          body.left div#leftcol_body,
                          body.right div#rightcol_body {
                          background: url(../images/mb_col_bg_blue.png) 0 0 repeat-x;
                          padding-top: 15px;
                          border: 0px solid #00f;
                          position:absolute;
                          }
                          Chabi01 - http://www.xlformation.com

                          Commentaire


                          • #14
                            Je vien de rajouter "position:absolute;", et sur IE c'est pire que avant mais je pense qu'il faut le placer avec les pixels je rajoute ça comment dans le CSS?
                            www.actu-auto.fr

                            Commentaire


                            • #15
                              Bonjour,
                              Le problème de ton css est qu'il est..bordélique !
                              Particulièrement difficile de retrouver ses petits là-dedans !
                              Sur ma bécane, j'arrive à faire jouer la position de ton menu avec ces règles :

                              body.left div#leftcol_body,
                              body.right div#rightcol_body {
                              background: url(../images/mb_col_bg_blue.png) 0 0 repeat-x;
                              padding-top: 15px;
                              border: 0px solid #00f;

                              }

                              En ajoutant un margin-top et left, ton menu se repositionne.
                              Tu peux ajouter :
                              margin : 0px !important;
                              margin-left : 10 px;
                              margin-right : 150px;

                              Maintenant, le codage de ton fichier css est difficile à reprendre parce que les règles posées s'appliquent à plusieurs zones en simultanées..

                              Essaye de jouer là-dessus et renvoie le résultat

                              Cordialement,
                              Chabi01 - http://www.xlformation.com

                              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