width:100% ne fonctionne pas

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

  • width:100% ne fonctionne pas

    Bonjour,
    je sens que c'est le genre de question idiote (meme si je n'ai pas trouvé de question semblable sur le forum), mais je ne parviens pas à avoir une bande qui travers toute la largeur de la fenêtre.
    sur le site en développement http://triovet1.regiscoque.com/ je veux que la bande blanche et la bande bleue (savamment nommées #bande-blanche et #bande-bleue) fassent toute la largeur de l'écran.
    alors c'est le cas tant que je reste en grande fenetre, mais si je réduis la largeur de cette dernière, et scroll l'ascenceur vers la droite, alors il semble que, tant la bande blanche que la bleue, ne prennent plus toute la largeur...
    j'ai essayé en attribuant 100% au HTML et au body, mais je n'y parviens vraiment pas...
    quelqu'un a-t-il une idée de ce que j'ai raté?

    merci d'avance pour vos suggestions.

  • #2
    Re : width:100% ne fonctionne pas

    Salut Bagou01
    Sur quels navigateurs as-tu cela ?
    Car sous chrome, j'ai l'impression que c'est tout bon.
    Peut être as-tu trouvé ta réponse ?
    Formation Joomla agence internet https://www.stylitek.com
    Melijoy création de site Joomla compétitif https://www.melijoy.fr
    agence web spécialiste référencement http://www.agence-web-stylitek.fr

    Commentaire


    • #3
      Re : width:100% ne fonctionne pas

      hello
      sur chrome et FF le provblème est là.
      il faut quitter le mode plein écran, pour avoir uen petite fenêtre, qui apporte donc des scrolls horizontaux et verticaux, et en déplacant le scroll horizontal vers la droite, le problème apparaît.
      exemple http://www.regiscoque.com/files/width.jpg

      Commentaire


      • #4
        Re : width:100% ne fonctionne pas

        Le problème vient que tu n'as pas un site responsive. Donc la largeur ne change pas en fonction de la taille de l'écran.
        Tu pourrais ajouter des medias query pour résoudre ton problème dans le css
        Formation Joomla agence internet https://www.stylitek.com
        Melijoy création de site Joomla compétitif https://www.melijoy.fr
        agence web spécialiste référencement http://www.agence-web-stylitek.fr

        Commentaire


        • #5
          Re : width:100% ne fonctionne pas

          je ne comprends pas...
          c'est impossible de dire au CSS "prends toute la largeur, peu importe cette dernière" sans du jquery ? je n'ai jamais fait ça moi
          en attendant j'ai "contourné" en remplaçant width:100% par min-width:1050px mais ça n'est qu'une rustine...

          Commentaire


          • #6
            Re : width:100% ne fonctionne pas

            Bonjour,



            Envoyé par bagou01 Voir le message
            [...] impossible de dire au CSS "prends toute la largeur, peu importe cette dernière" sans du jquery ? je n'ai jamais fait ça moi
            ..Non non : media query (pluriel : media queries ou mediaqueries = directives pour CSS), pas jquery (= javascript).

            => Documentation : http://developer.mozilla.org/fr/docs/CSS/Media_queries
            Dernière édition par PhilJ à 17/09/2013, 19h39
            Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

            Commentaire


            • #7
              Re : width:100% ne fonctionne pas

              ah, je pensais naïvement que width:100% suffirait...
              je me pencherai donc sur ta odc, je t'en remercie.
              En attendant, penses-tu que ma rustine risque de poser problème un jour ou l'autre?

              merci

              Commentaire


              • #8
                Re : width:100% ne fonctionne pas

                Bonjour,


                Envoyé par bagou01 Voir le message
                ah, je pensais naïvement que width:100% suffirait...
                ...La question est : 100 % de quoi ?
                Ainsi, 100 % de un kilomètre c'est
                un kilomètre, mais 100 % d'un millimètre, c'est... devinez...

                Ainsi, si on regarde le code de près, on peut observer qu'il comporte plusieurs anomalies (écran de test : un banal écran standard 1024px) :

                <body ...> /* Largeur 1008 px. Donc c'est la largeur du site, ni plus ni moins. Et cette valeur correspond bien à 1024 – la largeur de l'ascenseur à droite, c'est-à-dire 16 px : 1024 – 16 = 1008, le compte est bon, et d'ailleurs, c'est la largeur standard d'un site qui respecte le standard 1024 => tout va très bien jusque là. */

                Cependant, juste après dans le code, on trouve :
                <div id="top">...</div>.Or, template.css définit le conteneur #top comme devant avoir une largeur de 1050 px. => première anomalie : c'est la grenouille qui veut se faire plus grosse que le boeuf, ou bien l'armoire normande que l'on veut faire rentrer dans le coffre d'une petite voiture. C'est bien sûr impossible, car c'est 42 px de plus que le corps du site (= balise <body> définie à 1008 px).

                Cela parait logique, en un sens, dans la mesure où ce conteneur accueille le diaporama des images, dont la largeur est justement de 1050 px, et pourtant c'est absurde, puis que le site est alors moins large que ce qu'il contient. Pour être cohérent, ces images devraient avoir une largeur de 1008 px (pas plus et pas moins puisqu'il n'y a de marge ni à gauche ni à droite).

                ...Ou bien alors il faudrait définir pour elles (= pour elles seulement) une largeur de 100% maxi, ce qui les rendrait responsive :

                Code:
                max-width: 100%;
                height: auto;


                En cas de souci avec IE 8, on peut ajouter :

                Code:
                @media \0screen {
                  img { 
                      width: auto; /* for ie 8 */
                  }
                }


                A adapter, bien sûr : le chemin de ces images est quelque chose comme :
                Code:
                div.slide a.slide-link span img

                Plus loin, on trouve :

                <div id="bande-blanche"> /* ce conteneur est défini avec width: 100%; => 100 % de la largeur du conteneur du niveau juste supérieure, c'est-à-dire <body>, qui mesure 1008 px => 100 % de 1008 px = 1008 px. C'est parfait. */

                Mais voilà...

                <div id="middle">

                ...Nouvelle anomalie, car la largeur de ce conteneur est définie avec width: 1050px : or 1050 px ne peuvent évidemment en aucun cas rentrer dans les 1008 px du conteneur #balise-blanche.

                Conteneur suivant :

                <div id="slideshow">

                ...Même chose, puisque la largeur de #slideshow est définie de même avec width: 100% : 100 % du conteneur #middle défini à 1050 px = 1050 px. => C'est toujours la même impossibilité :-\

                Voyons maintenant plus bas :

                <div id="bande-bleue"> /* La largeur de ce conteneur n'est pas définie. Donc elle peut occuper toute la largeur de <body> = 1008 px.

                Mais aussitôt après :

                <div id="bottom"> /* largeur définie : 1050 px. => Même anomalie que celle signalée ci-dessus. */

                ...Et la suite n'est pas plus cohérente, puisque #bottom accueille 3 zones dont les largeurs sont, de gauche à droite : 530 px (= #description), 330 px (= #news), et 130 px (= #social).

                L'addition s'il vous plaît : 530 + 330 + 130 = 990 px. <= une nouvelle valeur, qui n'est ni la largeur du site (= 1008 px), ni la largeur du conteneur du dessus, #bottom (= 1050 px).
                Le vide (ou le trou noir ?) à droite est donc compréhensible. Sa largeur, est facile à calculer : 1050 – 990 px = 60 px.


                =================

                La solution à vos misères devrait d'abord passer par une correction de ces anomalies, la bonne solution étant bien sûr de respecter le standard 1024, donc de tout arranger pour que le site tienne dans une largeur de 1008 px — pas plus (comme 1050) ni moins (comme 990).

                Si vous souhaitez ensuite adapter le site à des formats supérieurs (= grands écrans) et / ou à des petits formats (= smartphones & tablettes), ce sera dans une 2e étape, grâce (notamment, mais pas seulement) aux requêtes medias (media queries) reconnues par CSS.



                Amicalement,



                PhilJ








                Dernière édition par PhilJ à 22/09/2013, 00h55
                Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                Commentaire


                • #9
                  Re : width:100% ne fonctionne pas

                  Message précédent corrigé : pour s'adapter à des largeurs d'écran variées, la largeur des photos du diaporama ne doit pas être de 100%, mais de 100 % maxi :
                  max-width: 100%;
                  Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                  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