Joomladay francophone 2018 à Paris 18 et 19 mai

Bloquer un div + autres problèmes de css

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

  • Bloquer un div + autres problèmes de css

    Bonjour,

    Je travaille depuis quelques temps sur J!, mais je me suis mis à construire mon premier template, me disant que c'était quand même important, en fin de compte, de pouvoir faire exactement ce que je voulais, comme je le voulais.

    Je me suis donc mis à l'étude de la chose, et ayant avancé, je rencontre quelques problèmes.

    Mon templates est composé deux éléments d'entête, trois éléments de corps (menu - contenu - menu) et du pied de page. C'est donc une structure relativement simple. (site1.jpg)

    1. Le premier problème que je rencontre est que le deuxième élément du header ne tient pas en place si la fenêtre est trop petite! Il est renvoyé à la ligne et décale le reste du site (site2.jpg). Peut-le bloquer dans sa position (même si la fenêtre est rapetissée ou si l'écran est un 15 pouces par exemple)? Avec quel attribut?

    2. Autre problème: J'ai mis le mos_mainbody à la bonne place (div content), et ça marche pour tout le site, à l'exception de la page d'accueil, qui est éjéctée à droite du site, en-dehors des div. A quoi cela peut-il être dû?

    3. Peut-on obliger le pied de page à se toujours se trouver en bas de page? Car chez moi il reste une bande du body au-dessous. Dites-moi ci cela suffit ou si je dois mettre l'ébauche de mon template à disposition.

    Merci d'avance à ceux qui pourraient m'aider!

    Philam
    Fichiers joints
    Dernière édition par Philam à 24/09/2008, 07h58
    Philam - archeosites.ch - sur J! 2.5 depuis peu...

  • #2
    Envoyé par Philam Voir le message
    Bonjour,
    2. Autre problème: J'ai mis le mos_mainbody à la bonne place (div content), et ça marche pour tout le site, à l'exception de la page d'accueil, qui est éjéctée à droite du site, en-dehors des div. A quoi cela peut-il être dû?
    Cette page différe des autres dans le sens ou les élement sont publié dans un container suplémentaire qui encadre tout le reste. Regarde le code de la page et cherche le style blog

    Papounet
    I'am happy for you !
    Dernière réalisation : http://www.pierrickservais.com/

    Commentaire


    • #3
      1. Le premier problème que je rencontre est que le deuxième élément du header ne tient pas en place si la fenêtre est trop petite! Il est renvoyé à la ligne et décale le reste du site (site2.jpg). Peut-le bloquer dans sa position (même si la fenêtre est rapetissée ou si l'écran est un 15 pouces par exemple)? Avec quel attribut?
      Suppositions :
      1. un ou plusieurs éléments ont un width trop grand qui ne permet pas de tout rentrer comme prévu

      2. un élément à un float ou hérite d'un float inadéquate
      I'am happy for you !
      Dernière réalisation : http://www.pierrickservais.com/

      Commentaire


      • #4
        3. Peut-on obliger le pied de page à se toujours se trouver en bas de page? Car chez moi il reste une bande du body au-dessous. Dites-moi ci cela suffit ou si je dois mettre l'ébauche de mon template à disposition.
        bien sur que oui !

        un margin en trop, une balise br qui traine, etc. ????
        I'am happy for you !
        Dernière réalisation : http://www.pierrickservais.com/

        Commentaire


        • #5
          Merci Papounet pour ces éléments de réponse.

          J'essaye de comprendre petit-à-petit la structure de J! à ce niveau, et je patauge un peu. Mes problèmes ne sont pas réglés. Je n'irai pas jusqu'à dire qu'il faut me prendre par la main, mais presque!

          Point 1. le problème n'est pas dans les width je pense, car le problème c'est qu'avec IE tout s'affiche un peu plus gros (?), et que donc si les éléments sont calibrés pour un navigateur + un type d'écran (genre 15 pouces), c'est pas gérable. J'aimerais que l'élément 2 du header soit collé à l'élément 1 du header, qu'il aille jusqu'au bord de l'écran à droite, et que "background-repeat:repeat-x;" Pour l'instant, quand je réduis la taille de la fenêtre, l'élément header 2 est ejecté "à la ligne", repoussant la suite.

          Point 2. Tu parles de la classe .blog? Si oui que dois-je faire? Je n'ai pas saisi ce qu'il fallait modifier pour que la page d'accueil (soit le conteneur blog?) s'affiche de même manière que le contenu. Dans mon php, j'ai juste mis <?php mosMainBody(); ?>...

          Point 3. J'ai beau chercher, je ne vois pas. J'aimerais que le pied de page colle systématiquement le bas de l'écran, et si le contenu est grand, le pied de page est repoussé (mais reste collé au bas du navigateur)

          Comme tu vois, je m'exprime plus facilement en mots qu'en code

          Je joins mon template en chantier.

          Pour info, l'élément situé à droite du header recevra un unique module, joomfish, et je le veux là car je veux que la barre de langue jf soit toujours à la même place, c'est-à-dire à côté des statues. Le reste c'est du simple, normalement.

          Je tiens à préciser que l'image d'entête est sous copyright et n'est pas utilisable à volonté. Vous devinerez vite pourquoi

          Merci encore pour ton aide papounet (dont j'ai sans honte grand besoin... Je peux payer en bisous?)

          Philam

          P.S. Il faut installer le template manuellement, je crains que le xml ne soit pas (du tout) à jour!
          Fichiers joints
          Philam - archeosites.ch - sur J! 2.5 depuis peu...

          Commentaire


          • #6
            Envoyé par Philam Voir le message
            Point 1. le problème n'est pas dans les width je pense, car le problème c'est qu'avec IE tout s'affiche un peu plus gros (?), et que donc si les éléments sont calibrés pour un navigateur + un type d'écran (genre 15 pouces), c'est pas gérable. J'aimerais que l'élément 2 du header soit collé à l'élément 1 du header, qu'il aille jusqu'au bord de l'écran à droite, et que "background-repeat:repeat-x;" Pour l'instant, quand je réduis la taille de la fenêtre, l'élément header 2 est ejecté "à la ligne", repoussant la suite.
            Parce que les navigateurs ont des styles par défaut pour les balises xhtml et que ce sont des valeurs différentes.

            Il te faut donc mettre tous le monde d'accord, il te faut donc mettre des propriété font-size dans tes styles (ainsi que line-height si nécessaire) :

            Code PHP:
            div
            p
            span
            etc 
            I'am happy for you !
            Dernière réalisation : http://www.pierrickservais.com/

            Commentaire


            • #7
              J'ai regardé ton template.

              Règle d'abord le point 1 et sans doute, le reste va suivre..

              Exemple de début de css de joomladraft.net (un de mes sites)

              Code PHP:
              /* HTML 
              --------------------------------------------------- */
              * {
                  
              padding0;
                  
              margin0;
                  
              font-familyVerdanaGenevaArialHelveticasans-serif;
              }
              html {}
              body {
                  
              color:black;
                  
              background-colorwhite;
                  
              font-size14px;
                  
              line-height18px;
                  
              padding0;
                  
              margin0;
              }
              h1h2h3h4h5h6 {
                  
              background-colortransparent;
                  
              color#1B8BFF;
                  
              text-alignleft;
                  
              font-size14px;
                  
              line-height20px;
              }
              h1 {
                  
              font-size16px;
                  
              line-height22px;
                  
              font-weightbold;
              }
              h2 {
                  
              font-size16px;
                  
              line-height22px;
                  
              font-weightnormal;
              }
              h3 {
                  
              font-size15px;
                  
              line-height21px;
                  
              font-weightbold;
              }
              h4 {
                  
              font-size15px;
                  
              line-height21px;
                  
              font-weightnormal;
              }
              div {
              }
              span {
              }
              tabletbodytrthtd {
                  
              vertical-aligntop;
              }
              {
                  
              text-alignjustify;
                  
              margin-top6px;
                  
              margin-bottom6px;
              }
              pre {}
              dl {}
              dt {}
              dl {}
              {
                  
              text-decorationnone;
              }
              a:link {
                  
              color#1B8BFF; /* ink link */
              }
              a:visited {
                  
              color#DC143C; /* ink visited */
              }
              a:active {
                  
              colorblack/* ink normal */
              }
              a:hover {
                  
              color#FF8C00; /* ink hover */
              }
              ul {
                  
              margin-left24px;    
              }
              li {
                  list-
              stylenone outside url(../images/bullet_blue.png);
                  
              vertical-aligntext-bottom;    
              }
              ul.blue {
                  
              margin-left24px;    
              }
              ul.blue li {
                  list-
              stylenone outside url(../images/bullet_blue.png);
                  
              vertical-aligntext-bottom;    
              }
              img {
                  
              border0px;
              }
              input {
                  
              font-size11px;
                  
              line-height13px;
              }
              fieldset {padding2px 4px;}
              fieldset div span.small {background-imagenone;}
              form {} 
              attention le selecteur * s'applique à tous les styles...
              I'am happy for you !
              Dernière réalisation : http://www.pierrickservais.com/

              Commentaire


              • #8
                Les font-size et line-height ne s'appliquent-ils pas qu'aux textes? Car chez moi, sur IE (6 et 7), ce sont surtout les images et la taille des éléments qui sont plus grosses. Le texte on s'en arrange...

                C'est gentil de me montrer le début du css de joomldraft, mais je n'y ai pas trouvé de quoi régler le problème n°1... Quelques explications?

                Merci d'avance

                (Je confirme ta pensée de l'instant: je ne suis pas très fort là-dedans)

                Edit: en ajoutant une marge de la taille du header à l'élément header2, ça marche! Sauf que j'ai une méchante bande du body qui est apparu au sommet du site... grrrmbl

                Edit2: c'est bon, il suffit d'ajouter le sélecteur * avec padding et margin à 0.

                Sur IE, j'ai une méchante ligne de 1px entre les deux éléments (comme s'il y avait un border-left de 1px), alors que sur FF ça s'affiche nickel...
                Dernière édition par Philam à 14/09/2008, 19h35
                Philam - archeosites.ch - sur J! 2.5 depuis peu...

                Commentaire


                • #9
                  lol, tu apprend vite.
                  Les + grosses différences entre les navigateurs sont effectivement le margin et le padding.

                  je n'ai pas le temps de regarder ton template alors je donne les pistes...

                  Une bande en trop ?
                  Sans doute IE et Firefox ne trouve pas la m^me hauteur pour les boites css :
                  - IE utilise les line-height dans le calcul des hauteurs.
                  - Dans certains cas un height:1% règle le soucis

                  Papounet
                  I'am happy for you !
                  Dernière réalisation : http://www.pierrickservais.com/

                  Commentaire


                  • #10
                    Merci

                    La bande de trop est verticale. Le line-height:1% n'y change rien. J'ai essayé border:0px, aucun changement.

                    En outre je remarque que l'apparence sous IE est complètement éclatée. header1, header2 et menu_gauche s'affichent à la bonne place, mais le contenu est éjecté sous le menu_gauche et après c'est le carnage, c'est totalement incohérent.

                    Bon je le teste sur le site online, comme cela c'est plus facile à voir. http://www.kerma.ch

                    Essaye avec FF et IE.. (moi j'ai IE 6 mais je sais pas si ça change grand-chose.. faudra que j'essaye avec IE7 au boulot)

                    Merci pour le temps que tu arrives à me donner, l'aide quelle qu'elle soit est toujours appréciée. (Surtout quand elle vient d'experts)

                    Edit: alors avec IE 7, j'ai juste le contenu qui est éjecté au pied du menu_gauche, et le menu_droite reste à la hauteur du contenu. En fait, c'est comme si le menu_gauche avait un width de 100%, et que le reste était (logiquement) poussé dessous. Alors que ce n'est pas le cas... Pourquoi ce problème avec IE et pas FF?
                    Dernière édition par Philam à 15/09/2008, 08h23
                    Philam - archeosites.ch - sur J! 2.5 depuis peu...

                    Commentaire


                    • #11
                      okay.
                      sous firtefox que dit la web developer bar
                      tu as 3 icones à droite, que contient la bulle d'aide du 1er ?
                      Quirck mode je présume ?

                      Papounet
                      PS : download web developer bar ici :
                      http://www.joomladraft.org/content/view/350/73/
                      I'am happy for you !
                      Dernière réalisation : http://www.pierrickservais.com/

                      Commentaire


                      • #12
                        J'ai la barre

                        Le premier bouton (vu) me met "Mode de Conformité aux normes". Le second (!) me met "Erreur CSS: Erreur d'analyse de la valeur pour la propriété "font". Déclaration abandonnée". Et le dernier "Pas d'erreur javascript" (ça c'est normal).

                        Edit: Après avoir testé le site sur Opera et Safari pour Windows, un constat s'impose: IE est le pire navigrateur de tous les temps. En d'autres termes, l'affichage est tout à fait correct sur tous les navigateurs, à l'exception d'IE.

                        Je ne parle même pas d'IE 6, où tout fichait le camp, mais dans IE 7, mon contenu est relégué en dessous de menu_gauche. Je crois que c'est le seul problème qu'il me reste (et je suis bien obligé de le régler)...

                        Est-ce que ça aide?

                        voici les codes concernés.

                        php:

                        Code HTML:
                        <body>
                        <div id="conteneur">
                            <div id="entete">
                                <div id="header"><p></p></div>
                                <div id="langue"><?php mosLoadModules( "banner", -1 ); ?></div>
                            </div>
                            <div id="corpsSite">
                                <div id="colonneGauche">
                                    <div id="left"><?php mosLoadModules ( 'left', -2 ); ?></div>
                                </div>
                                    
                                <div id="colonneDroite">
                                    <div id="right"><?php mosLoadModules ( 'right', -2 ); ?></div>
                                    
                                    <div id="contenu_kerma"><?php mosMainBody(); ?></div>
                                
                            </div>
                            
                            <div id="footer" class="copy_inner"><div align="center"><p>&nbsp;</p>Website by <a href="http://www.archeosites.ch" target="_blank">archeosites.ch</a> - <a href="http://www.joomla.fr/" target="_blank">Joomla!</a> CMS<br />Les textes et les images sont sous copyright kerma.ch 2008<p>&nbsp;</p></div></div>
                        
                            </div>
                        css:

                        Code:
                        #conteneur{
                        background: #b1675b;
                        width:100%;
                        }
                        
                        #header{
                        height: 140px;
                        width:1005px;
                        float:left;
                        background-color: #FFFF99;
                        background-image: url(../images/header.gif);
                        
                        }
                        
                        #langue{
                        width : auto;
                        height: 140px;
                        margin: 0 0 0 1005px;
                        background:#b1675b;
                        background-image: url(../images/langue_bg.gif);
                        background-repeat: repeat-x;
                        }
                        #left{
                        width:200px;
                        float:left;
                        background:#b1675b;
                        height: 100%;
                        }
                        #colonneGauche{
                        background:#b1675b;
                        height: 100%;
                        }
                        
                        #contenu_kerma{
                        margin-left:200px;
                        margin-right:200px;
                        background-color:#f1d39d;
                        height:auto;
                        
                        
                        }
                        #right{
                        width:200px;
                        float:right;
                        background:#b1675b;
                        height: 100%;
                        }
                        
                        #colonneDroite{
                        background:#b1675b;
                        height: 100%;
                        }
                        
                        #footer    {
                        background:#b1675b;
                        clear:both;
                        background-image: url(../images/footer.gif);
                        background-repeat: repeat-x;
                        }
                        Dernière édition par Philam à 17/09/2008, 21h09
                        Philam - archeosites.ch - sur J! 2.5 depuis peu...

                        Commentaire


                        • #13
                          okay tu es bon sous firefox : pas de quirk mode.
                          moi, je pense que pour IE tu bascules dedans, au regard de ce que tu me dis.
                          C'est bien le site dans ta signature ?
                          Je vais monté un PC avec IE6 pour décortiquer ça !
                          I'am happy for you !
                          Dernière réalisation : http://www.pierrickservais.com/

                          Commentaire


                          • #14
                            Le site dans ma signature est mon mien propre à moi, il marche très bien (une fois n'est pas coutume). Le site à problème est celui-ci

                            Bon IE 6, il y a encore des gens qui travaillent avec ? Si j'arrive à régler le problème pour IE 7, je suis heureux, je n'en demande pas plus!

                            En tout cas c'est vraiment sympa de m'aider! Je suis quand même content d'avoir pu faire quelque chose au niveau template! (Je redoutais d'affronter ça!)

                            Je réalise qu'idéalement, il faudrait que mon template soit valide css et html... Le problème sera de savoir ce qu'il faudra modifier pour que ça le soit... Enfin ce sera pour plus tard, mon but étant déjà de le faire bêtement fonctionner..

                            Phil
                            Dernière édition par Philam à 18/09/2008, 08h03
                            Philam - archeosites.ch - sur J! 2.5 depuis peu...

                            Commentaire


                            • #15
                              Envoyé par Philam Voir le message
                              Le site dans ma signature est mon mien propre à moi, il marche très bien (une fois n'est pas coutume). Le site à problème est celui-ci

                              Bon IE 6, il y a encore des gens qui travaillent avec ? Si j'arrive à régler le problème pour IE 7, je suis heureux, je n'en demande pas plus!

                              En tout cas c'est vraiment sympa de m'aider! Je suis quand même content d'avoir pu faire quelque chose au niveau template! (Je redoutais d'affronter ça!)

                              Je réalise qu'idéalement, il faudrait que mon template soit valide css et html... Le problème sera de savoir ce qu'il faudra modifier pour que ça le soit... Enfin ce sera pour plus tard, mon but étant déjà de le faire bêtement fonctionner..

                              Phil
                              okay pas de soucis. Je regarde ce soir.

                              Papounet
                              I'am happy for you !
                              Dernière réalisation : http://www.pierrickservais.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 :
                              https://forum.joomla.fr/filedata/fetch?photoid=1966883

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

                              3 - Choisir le préfixe [Réglé].
                              https://forum.joomla.fr/filedata/fetch?photoid=1966884

                              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