width:100% ne fonctionne pas

**toffffe** · 16/09/2013, 08h35

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 ?

**bagou01** · 16/09/2013, 08h47

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

**toffffe** · 16/09/2013, 09h07

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

**bagou01** · 16/09/2013, 09h39

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...

**PhilJ** · 17/09/2013, 19h37

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

**bagou01** · 19/09/2013, 08h36

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

**PhilJ** · 19/09/2013, 14h45

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

**PhilJ** · 22/09/2013, 01h01

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%;

width:100% ne fonctionne pas

width:100% ne fonctionne pas

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association