Design Extensible

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

  • Design Extensible

    Bonjour tout le monde !

    Voilà je me retrouve face à un problême qui n'en est peut être pas un, mais je commence à avoir un peu de mal à m'y retrouver.

    Je suis en ce moment en période de stage, et l'on m'a demandé de créer un site web pour une compagnie théâtrale.

    Voici déjà l'adresse pour accéder au site :
    www.cie-candide.com/index.php

    Tout n'est pas encore en place, et quelques éléments du design manquent encore en haut de page, mais ce n'est pas là le sujet.

    Je commence à bloquer sur un problême au niveau de mon bas de page sur internet : les zones que j'ai prévu afin qu'elles soient extensibles en hauteur ne vont :
    - soit pas jusqu'en bas (la zone de contenu principale)
    - soit vont trop bas... (l'herbe sur les côtés)

    Si l'on regarde bien, l'espace "en trop" de l'herbe en bas correspond à l'espace qui la sépare en haut du haut du contenu
    (j'espère que vous me suivez, mais c'est pas très difficile il n'y a qu'à regarder le haut et le bas de la page)

    Mon design est construit avec des div contenant chacune une image, mais pour le contenu j'ai du ruser afin que l'herbe s'étende de la même hauteur que la zone de contenu, je l'ai donc incluse dans une même div avec le contenu.

    Voici le code qui vous parlera sûrement plus :
    • Dans index.php :
      Code:
      <div class="global">
      
      <div class="zone_contenu">
      	<div class="stretch_herbeg">
      	</div>
      	<div class="stretch_basg">
      	</div>
      		<?php mosMainBody(); ?>
              <div class="stretch_basd">
      	</div>
              <div class="stretch_herbed">
      	</div>
      </div>
      
      </div>
      (la balise global est celle dans laquelle tout est contenu, je n'ai pas recopié les éléments "div" qui n'étaient pas nécessaires à mon problême)
    • Dans template_css.css :
      Code:
      .global {
      	height: 100%;
      	width: 955px;
      	margin-right: -477.5px;
      	position: static;
      	max-width: 1600px;
      	min-width: 955px;
      	top: 0px;
      	right: 50%;
      	z-index: 1;
      }
      .stretch_basg {
      	background:url(../images/index_08.png);
      	background-repeat:repeat-y;
      	height: 100%;
      	width: 164px;
      	position: absolute;
      	top: 429px;
      	left: -195px;
      }
      .stretch_herbeg {
      	background:url(../images/index_09.jpg);
      	background-repeat:repeat-y;
      	height: 100%;
      	width: 31px;
      	position:absolute;
      	top: 429px;
      	left: -31px;
      }
      .zone_contenu {
      	background-color:#EDEDED;
      	max-width: 1298px;
      	min-width: 644px;
      	position: absolute;
      	top: 171px;
      	left: 195px;
      	right: 116px;
      }
      .stretch_herbed {
      	background:url(../images/index_11.jpg);
      	background-repeat:repeat-y;
      	height: 100%;
      	width: 28px;
      	position:absolute;
      	top: 429px;
      	right: -28px;
      }
      .stretch_basd {
      	background:url(../images/index_12.png);
      	background-repeat:repeat-y;
      	height: 100%;
      	width: 88px;
      	position:absolute;
      	top: 429px;
      	right: -116px;
      }


    Voilà pour la partie qui m'intéresse, j'espère avoir été assez explicite, et merci de ne pas m'insulter si mon code n'est pas tout à fait valable.
    Je suis là pour apprendre

    Et merci d'avance !!

    PS : si vous avez besoin de plus amples informations ou du code complet, n'hésitez pas à demander !
    Dernière édition par Derzone à 27/07/2008, 18h32

  • #2
    le site "clignote". (Firefox 3)
    Jean-Marie Simonet / infograf768
    Joomla co-fondateur. Joomla Production Working Group.
    Sauf demande explicite de ma part, merci de ne pas utiliser de Message Privé pour poser des questions. Le forum est là pour ça.

    Commentaire


    • #3
      Envoyé par infograf768 Voir le message
      le site "clignote". (Firefox 3)
      Est-ce que tu pourrais détailler davantage stp ?

      Je suis également sous Firefox 3 et je ne vois pas le problême dont tu parles ?
      Si tu évoques le ciel étoilé, c'est un fond en flash extensible avec des étoiles qui scintillent effectivement.


      Et si quelqu'un trouve une réponse à mon problême original, je suis toujours preneur, ma période de stage se finissant dans peu de temps cela serait assez urgent sans vouloir être mal poli

      Commentaire


      • #4
        De mon côté, ça ne clignote pas sous firefox 3.
        Perso, je ne parle pas trop cette langue.
        Par contre, ça peut, peut-être, t'aider mais il semble y avoir aussi un décalage entre ton image de fond et le contenu ; voir image jointe.
        Fichiers joints
        @ +
        Snoopy44

        Commentaire


        • #5
          Envoyé par Snoopy44 Voir le message
          Par contre, ça peut, peut-être, t'aider mais il semble y avoir aussi un décalage entre ton image de fond et le contenu ; voir image jointe.
          Non non, en fait il manque juste 2 images que je vais caler plus tard, ceci n'est pas un problème.

          Mon seul problème réside dans le bas de la page, comme expliqué dans mon premier post.

          Merci tout de même de t'être penché sur mon cas

          Commentaire


          • #6
            hello,
            je me permet un ptit up, je suis toujours en train de chercher une solution à mon problême, et je crois avoir une piste.

            En fait, l'herbe sur les côtés va plus bas que la zone de contenu car je lui ai dit de s'étaler sur 100% de sa hauteur.

            Hors, je lui ai également dit de commencer plus bas que la zone de contenu afin de concorder avec mon design initial.

            Code:
            .stretch_herbeg {
            	background:url(../images/index_09.jpg);
            	background-repeat:repeat-y;
            	height: 100%;
            	width: 31px;
            	position:absolute;
            	top: 429px;
            	left: -31px;
            }
            De là vient mon problême, la solution parfaite serait de pouvoir mettre dans le code une opération mathématique telle que
            height: (100% - 429) px ;

            Dans ce cas, l'herbe prendrait bien la valeur qui correspond aux 100% du contenu en hauteur (car bien entendu cette valeur varie selon le contenu), et supprimerait les 429px fixes du contenu, qui dépassent de la zone d'herbe tout en haut.

            Mais malheureusement c'est impossible à faire, et il me faudrait donc une solution alternative.


            J'ai également un autre problême qui est sûrement plus simple à régler, c'est que sur une page dont le contenu est très restreint, la zone blanche ne s'étire pas jusqu'en bas de la page internet.
            Par exemple :
            http://www.cie-candide.com/index.php...d=49&Itemid=78

            Est-ce qu'il y aurait un moyen de dire au site d'avoir une zone minimale à remplir ?


            Encore merci d'avance, j'espère avoir été plus explicite !
            Dernière édition par Derzone à 27/07/2008, 12h21

            Commentaire


            • #7
              Bon et bien après plusieurs heures d'essais en tout genre, j'ai enfin réussi à régler mes 2 problèmes.

              Ca serait un peu difficile à expliquer du fait de la spécificité de ce cas, mais en gros j'ai superposé plusieurs zones à peu près similaires, qui se complètent afin de prendre toute la hauteur de la page.

              Encore merci à ceux qui sont passés dans le coin !

              Commentaire


              • #8
                Apparemment, le "pouet" vous sauve.

                C'est le flash qui fait clignoter sur FF3 Macintosh.
                Safari montre deux bandes noires du côté intérieur des "falaises"
                IE6 tue la bête totalement.

                Il va sans doute vous falloir au moins adapter des CSS spécifiques pour IE7 car ce template est bien compliqué.
                Jean-Marie Simonet / infograf768
                Joomla co-fondateur. Joomla Production Working Group.
                Sauf demande explicite de ma part, merci de ne pas utiliser de Message Privé pour poser des questions. Le forum est là pour ça.

                Commentaire


                • #9
                  Envoyé par infograf768 Voir le message
                  Apparemment, le "pouet" vous sauve.

                  C'est le flash qui fait clignoter sur FF3 Macintosh.
                  Safari montre deux bandes noires du côté intérieur des "falaises"
                  IE6 tue la bête totalement.

                  Il va sans doute vous falloir au moins adapter des CSS spécifiques pour IE7 car ce template est bien compliqué.

                  Et beyh, j'avoue pour le pouet c'était pendant les tests et bon vu que je supprimais / rajoutais des divs toutes les 5sec. j'y ai été à la va-vite, je vais renommer tout ça

                  Par contre est-ce que tu aurais quelques explications quant à la façon de modifier le CSS en fonction des différents navigateurs ? Car je ne m'attaquerais vraiment à la programmation web que pendant mes études de l'année prochaine, cette année nous avons vraiment survolé la chose en apprenant les bases.

                  Pour la partie flash je pense la retirer, j'ai noter un très gros ralentissement de la page si celle ci restait ouverte pendant un certain temps. (dommage je trouvais sympa l'effet de scintillement des étoiles snif)

                  Dernière chose, est-ce qu'il y a un moyen pour passer Internet Explorer en version 6 afin de vérifier ce genre de choses justement ?
                  Sous IE7 je n'ai pas noté de problème au niveau de la mise en page, elle est similaire à Firefox 3.

                  enfin moi qui croyait m'en être sorti pas trop mal... plus qu'à recommencer tout ça !
                  Merci beaucoup en tout cas!
                  Dernière édition par Derzone à 27/07/2008, 18h40

                  Commentaire


                  • #10
                    Je me répond hein, ça fait un peu de distraction

                    Alors en premier lieu, j'ai terminé la mise en place du design (il manquait les planches sur les côté du contenu). J'ai décidé de virer l'animation flash des étoiles qui brillaient afin d'alléger la page.

                    Secundo, j'ai téléchargé Opera 9.51, Safari 3.1.2, et testé tout ça en affichant mon site. Et je n'ai pas vu de problème flagrant mise à part peut être le texte en surgras des menus sous Safari.

                    Sous Firefox 3 je suis sous Windows Vista, je ne peux donc pas vérifier par moi-même les désagréments que tu rencontres.

                    Sous IE7, tout fonctionne impeccablement chez moi, et pour IE6 je n'ai toujours pas trouvé le moyen d'installer les deux versions à la fois, si quelqu'un a une solution simple mise à part l'installation d'un nouveau système d'exploitation
                    Dernière édition par Derzone à 27/07/2008, 22h49

                    Commentaire


                    • #11
                      Code:
                      <div class="stretch_herbed2"></div>
                      est-il nécessaire?
                      Sur un écran à haute def (1680) le div apparait sur la droite en extension maxi.
                      Jean-Marie Simonet / infograf768
                      Joomla co-fondateur. Joomla Production Working Group.
                      Sauf demande explicite de ma part, merci de ne pas utiliser de Message Privé pour poser des questions. Le forum est là pour ça.

                      Commentaire


                      • #12
                        En fait c'est avec ces deux divs que j'ai du "ruser".
                        Si je les supprime, cela ne va pas se voir sur la page d'accueil ou d'autres pages très longues.

                        Mais en y regardant de plus près sur d'autres pages avec moins de contenu (un contenu qui ne dépasse pas la hauteur de l'écran), voilà ce que ça donne :


                        (cliclic pour agrandir)

                        C'est un peu des bouches-trous... et c'est le moyen que j'avais trouvé pour justement que sur les pages trop courtes, il n'y ai pas cette bande noire en dessous du contenu.
                        Les balises "stretch_herbeg2", "stretch_herbed2", et "bgmilieu" servent à remplir une hauteur d'écran.
                        Alors que les balises similaires dans la div "zone_contenu" servent à s'étendre jusqu'en bas de la zone de contenu.

                        (par contre le fait qu'elles aillent se balader n'importe où à haute résolution n'est pas voulu, je vais regarder ça)


                        J'imagine qu'il y aurait un moyen pour que les deux propriétés se rejoignent (vérifier que les blocs prennent une hauteur d'écran quoi qu'il se passe, et qu'ils aillent aussi bas que la zone de contenu en même temps).
                        Mais comme je l'ai dit plus haut je ne suis pas encore très calé dans ce domaine là, et c'est pourquoi j'ai besoin d'aide.


                        Merci de continuer à suivre mon topic en tout cas, vous m'aider à avoir plus de rigueur dans mon code.

                        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