Thème à base de Div : problèmes multiples

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

  • Thème à base de Div : problèmes multiples

    Je rencontre des difficultés à réaliser un thème à base de DIV...

    J'en appelle à votre aide car je dois terminer ça pour demain, après demain au plus tard.

    Mes problèmes sont multiples, mais si l'on met de côté pour l'instant l'affichage sous IE...
    Je rencontre des soucis avec :
    • la colonne de gauche: elle doit aller jusqu'en bas même si la colonne droitr est plus longue.
    • la colonne centrale: elle doit aller jusqu'en bas même si la colonne droitr est plus longue.
    • les 2 rectangles en haut doivent être côte à côte (séparés par 10px), en haut à droite.
    • le menu positionné sur le bandeau orange, doit être centré...
    • en bas de la colonne centrale, les 3 blocs (derniers articles, articles similaires et articles les plus) doivent se positioner côte à côte sans déborder de la largeur de la colonne centrale.


    Le thème est consultable ici et téléchargeable ici.

    PS: les couleurs actuelles ne me servent que pour développer le thème.
    le thème est très incomplet, mai je me focalise sur le principal problème pour le moment: le positionnement...

    Par avance: merci !
    Dernière édition par Mar.mack à 02/09/2006, 12h23

  • #2
    Bonjour,

    ce serait plus facile si on pouvait accéder au thème lui-même et non seulement à son ancienne version sous forme de tables. Néanmoins, je peux te donner les pistes suivantes:

    1 - longueur des colonnes : comme ton template n'est pas en largeur fixe, la seule méthode que je connaisse est en javascript. Sur l'évènement body onload (aussi onresize) tu appelles une fonction qui positionne la propriété height de chacune des 3 divs concernées (corps_gauche, corps_centre et corps_droit) :

    var hG = document.getElementById('corps_gauche').offsetHeig ht, hD = document.getElementById('corps_droit').offsetHeigh t, hC = document.getElementById('corps_centre').offsetHeig ht;
    var hMax = Math.max(hg, Math.max(hc,hd));

    document.getElementById('corps_gauche').height = hMax+'px';
    document.getElementById('corps_centre').height = hMax+'px';
    document.getElementById('corps_droit').height = hMax+'px';

    [EDIT] : j'ai vu que tu utilisais niftycube. Dans ce cas, c'est encore plus simple car cette librairie peut faire cela directement : Nifty("div#corps_gauche,div#corps_centre,div#corps _droit","same-height");

    2 - les deux rectangles... je ne vois pas desquels tu parles

    3 - menu positionné. Dans index.php tu as 3 niveaux de div : tête_haut, tete_milieu et tete_bas. Je ne les retrouve pas le theme actuellement en ligne. D'une manière générale, tu peux procéder de la manière suivante. Je suppose que tu charges ton menu dans le module top, qui est chargé dans la div tete_bas_centre, elle même contenu dans la div tete_bas.
    tu donnes à tete_bas_centre l'attribut : display:block et des marges margin-left: auto et margin-right: auto. Cela va la centrer dans son container tete_bas (qui normalement fait 100% de la largeur). Ca marche dans tout sauf IE.
    Pour IE, il faut en plus faire text-align: center, mais dans la div tete_bas, car IE va alors centrer tout ce qu'il rencontrey compris ta div tete_bas_centre. Par contre, il faut remettre text-align: left dans tete_bas_centre car sinon elle va hériter du centrage du texte.

    4 - trois blocs du bas : tu devrais pouvoir obtenir ça en ajoutant :
    margin-left: 170p; margin-right: 170px; c'est à dire en fixant des marges égales à la largeur des deux colonnes latérales.
    Dernière édition par shumisha à 30/08/2006, 16h05
    Je suis toujours le développeur de sh404sef, mais il est désormais distribué par Weeblr. Je ne réponds plus aux MP sur ce composant. Merci de votre compréhension.

    Commentaire


    • #3
      Envoyé par shumisha
      Bonjour,

      ce serait plus facile si on pouvait accéder au thème lui-même et non seulement à son ancienne version sous forme de tables. Néanmoins, je peux te donner les pistes suivantes:
      Bonjour à toi aussi
      Euh... Je n'ai pas réalisé de version à base de "table", mais uniquement une version à base de "div".
      L'idée de donner un accès "SuperAdmin" au site, ne me semble pas raisonnable.
      C'est pourquoi j'ai donné un lien pour télécharger le thème.

      J'ai oublié de le préciser, mais il ne s'installe pas au travers de l'interface... il faut le décompacter à la main dans le répertoire template...
      1 - longueur des colonnes : comme ton template n'est pas en largeur fixe, la seule méthode que je connaisse est en javascript. Sur l'évènement body onload (aussi onresize) tu appelles une fonction qui positionne la propriété height de chacune des 3 divs concernées (corps_gauche, corps_centre et corps_droit) :

      var hG = document.getElementById('corps_gauche').offsetHeig ht, hD = document.getElementById('corps_droit').offsetHeigh t, hC = document.getElementById('corps_centre').offsetHeig ht;
      var hMax = Math.max(hg, Math.max(hc,hd));

      document.getElementById('corps_gauche').height = hMax+'px';
      document.getElementById('corps_centre').height = hMax+'px';
      document.getElementById('corps_droit').height = hMax+'px';

      [EDIT] : j'ai vu que tu utilisais niftycube. Dans ce cas, c'est encore plus simple car cette librairie peut faire cela directement : Nifty("div#corps_gauche,div#corps_centre,div#corps _droit","same-height");
      J'essai en effet, depuis de 2 jours, d'utiliser la libraire Nifty pour faire des arrondies...
      Mais j'ai toujours pas réussi à la faire fonctionner.

      J'ai tenter d'utiliser l'astuce css "clear:both" pour la longueur de mes colonnes, mais ça ne marche pas.
      J'ai du zapper quelque chose...
      2 - les deux rectangles... je ne vois pas desquels tu parles
      Je parlais des 2 rectangles oranges (un en haut à gauche et l'autre en haut à droite), tout en haut de la page de garde.
      Ils devraient être à 10 px du bord droit et séparés de 10 px...
      3 - menu positionné. Dans index.php tu as 3 niveaux de div : tête_haut, tete_milieu et tete_bas. Je ne les retrouve pas le theme actuellement en ligne. D'une manière générale, tu peux procéder de la manière suivante. Je suppose que tu charges ton menu dans le module top, qui est chargé dans la div tete_bas_centre, elle même contenu dans la div tete_bas.
      tu donnes à tete_bas_centre l'attribut : display:block et des marges margin-left: auto et margin-right: auto. Cela va la centrer dans son container tete_bas (qui normalement fait 100% de la largeur). Ca marche dans tout sauf IE.
      Pour IE, il faut en plus faire text-align: center, mais dans la div tete_bas, car IE va alors centrer tout ce qu'il rencontrey compris ta div tete_bas_centre. Par contre, il faut remettre text-align: left dans tete_bas_centre car sinon elle va hériter du centrage du texte.
      Je viens de vérifier tous les "div" que tu cites se trouvent bien dans le thème... Je vérifierais le zip...
      Pour ce qui de IE, c'est bon j'ai déjà utilisé cette propriété.
      Je vais tester ta solution, pour les autres navigateurs. Merci.
      4 - trois blocs du bas : tu devrais pouvoir obtenir ça en ajoutant :
      margin-left: 170p; margin-right: 170px; c'est à dire en fixant des marges égales à la largeur des deux colonnes latérales.
      Je vais tester ça, merci.

      Commentaire


      • #4
        On ne se comprend pas. Le site vers lequel tu nous diriges ne contient aucune des div qui se trouvent dans le template et la feuille de style. C'est pour ça que je te disais que ce serai bien de pouvoir y accéder. En fait, ce n'est pas un site Joomla ou Mambo, c'est pour ça que j'ai imaginé que c'était le site original, que tu essayais de porter sous Joomla. Je te repose donc ma question : ce serait bien d'avoir accès au site lui-même (sa partie publique évidemment, pas la partie admin). Si tu ne fais effectivement pas de site sous Joomla (ç'est quand même un forum dédié Joomla ici !), alors la remarque précédente s'applique quand même, c'est à dire que le source HTML du site contient bien des balises div, mais pas les id qui figurent dans l'index.php. je ne comprends plus rien d'ailleurs, car le template lui est bien au format Joomla/mambo.

        Clear:both ne peut pas te rallonger des colonnes indépendantes comme celles-ci. Si tu étais en largeur fixe, tu pourrais faire de "faux-columns" avec une image en fond, mais dans ton cas, la bonne solution c'est le javascript, avec Nifty ou sans.

        Je te joins une copie 'écran pour savoir si on parle bien du même site. Je n'y vois toujours pas deux rectangles dans l apartie supérieure !
        Fichiers joints
        Je suis toujours le développeur de sh404sef, mais il est désormais distribué par Weeblr. Je ne réponds plus aux MP sur ce composant. Merci de votre compréhension.

        Commentaire


        • #5
          oups...
          c'est pas du tout la bonne adresse: c'est l'ancien site...
          Toutes les excuses : le bon lien est http://s140245824.onlinehome.fr/dirigeantes/joomla

          Pour Nifty, je ne parviens pas l'utiliser...
          On dirait que ça ne fonctionne pas.
          Dernière édition par Mar.mack à 02/09/2006, 12h23

          Commentaire


          • #6
            Oui, c'est déjà plus clair comme cela. Je vois que tu n'as pas encore mis en oeuvre les suggestions de mon premier post, j'attendrais donc que tu l'ais fait pour voir ce que cela donne.
            En passant, tu n'utilises pas la dernière version de NiftyCorners (même si cette version devrait marcher sans pb). Je n'ai pas le lien exact, mais cherche niftycube dans google, et cela va t'y amener directement.

            PS: je ne vois toujours pas les deux rectangles orange en haut de page !
            Je suis toujours le développeur de sh404sef, mais il est désormais distribué par Weeblr. Je ne réponds plus aux MP sur ce composant. Merci de votre compréhension.

            Commentaire


            • #7
              J'ai procédé à la mise à jour du thème (j'ai fait des tests en local hier soir)...
              J'ai mis à jour le zip aussi.

              J'ai récupéré le NiftyCube situé à cette adresse (tout en bas de la page). Je pense que c'est la dernière.
              Mais j'obtiens ne parviens à obtenir d'arrondis... (pour mes tests: colonne de droite)

              Pour ce qui est de tes recommandations pour le centrage, j'ai fait comme tu m'as recommandé, mais ça ne marche pas...

              Pour les colonnes, j'ai pas encore essayé car Nifty ne fonctionne pas correctement...

              Pour les blocs du bas, j'ai du m'y prendre comme un manche, je pense.
              Dernière édition par Mar.mack à 31/08/2006, 11h59

              Commentaire


              • #8
                Si tu veux lire cet article de Pompage http://pompage.net/pompe/margesnegatives/ tu trouveras ton bonheur quand à la mise en page 3 colonnes fluides en div.
                xemple fini : http://pompage.net/IMG/html/margesne.../exemple5.html n'hésite pas à regarde le code source.

                Il présente :
                • l'astuce pour faire croire que les colonnes sont de la même taille,
                • renvoyer le bas de page en dessous de la plus longue colonne.

                Nico
                cours de SVT - infos scientifiques : www.nicolas-ogier.fr
                pas de demandes d'aide par mp, elles seront systématiquement refusées !

                Commentaire


                • #9
                  Asctucieux cette méthode pour utiliser les "faux-columns" avec clear:both. Je retire ce que j'ai dit, c'est mieux que le javascript!
                  Je suis toujours le développeur de sh404sef, mais il est désormais distribué par Weeblr. Je ne réponds plus aux MP sur ce composant. Merci de votre compréhension.

                  Commentaire


                  • #10
                    Merci pour ces astuces opware2000.

                    Tu as oublié de citer une autre astuce : l'imbrication des div pour qu'elles soient positionnables par groupe de 2.
                    C'est une chose qui pour moi n'a jamais été évidente...

                    Je vais essayer d'appliquer la même méthode aux rectangles en haut de la page et aux éléments en bas de la colonne centrale.

                    Il me reste à centrer le menu de la barre sous le logo.
                    Pour IE c'est bon.
                    Mais pour Firefox... non : j'ai pourtant suivi les recommandations de shumisha.

                    Commentaire


                    • #11
                      tu as deux façon, ca dépend comment est codé ton menu :
                      soit
                      Code HTML:
                      <div id="menu">
                            <div class="centre"> 
                                   texte de ton menu 
                            </div>
                      </div>
                      avec le css suivant :
                      Code HTML:
                      #menu { width: 100%; }
                      #menu .centre { width : 300px; margin-left: auto; margin-right:auto;}
                      ou alors si tu as

                      Code HTML:
                      <div id="menu">
                            texte de ton menu 
                      </div>
                      avec le css suivant :
                      Code HTML:
                      #menu { width: 100%; text-align:center;}
                      avec un bon vieux text-align:center;
                      cours de SVT - infos scientifiques : www.nicolas-ogier.fr
                      pas de demandes d'aide par mp, elles seront systématiquement refusées !

                      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