Problème étrange de largeur totale [RESOLU]

Yop,


J'ai mis un panorama pour voir comment se comportait le site lorsque la photo centrale est très large. Bon beh comme vous pouvez le voir il y a un bug - c'est p'tête pas un bug d'ailleurs : dès l'instant où l'on dépasse la largeur de la fenêtre du navigateur, le menu_top, l'ombre_menu_top et la photographie ne s'élargissent pas (en scrollant vers la droite, le background devient uniforme.)

Dans mon malheur j'ai une certaine chance : le soucis est présent sous ie et sous firefox...

Quelqu'un sait comment corriger ça ? Mes éléments sont déclarés en "width=100%", je ne vois pas quoi faire d'autre.

Merci beaucoup.
Modifié par parappa (08 Mar 2009 - 20:20)

parappa a écrit :
Quelqu'un sait comment corriger ça ? Mes éléments sont déclarés en "width=100%", je ne vois pas quoi faire d'autre.

Ne pas bloquer la largeur de ces éléments afin qu'ils puissent naturellement prendre toute la largeur, par exemple ?

Au fait, c'est width: 100% en CSS, pas width=100%.


Edit : en supprimant les width: 100% inutiles, je n'arrive pas à avoir le bon résultat. Étrange.
Edit 2: il semblerait après tests que les images trop larges ne déforment pas les blocs, mais se contentent de dépasser du bloc. Dans le cas d'IE6, le bloc parent de l'image est élargi, mais les autres blocs se limitent donc à la largeur de body.

Si on définit en pixels la largeur du bloc contenant l'image, ça ne redimensionnera que ce bloc. Il faudrait dimensionner en pixels (en fonction de la largeur de l'image) un bloc contenant tous les autres : conteneur global ou body lui-même.
Modifié par mpop (11 Jan 2007 - 23:01)

J'ignorais que par défaut ils prenaient toute la largeur. Merci !

Edit : ah mince j'avais pas vu l'edit, effectivement ça ne fonctionne pas sous IE.
Modifié par parappa (11 Jan 2007 - 23:03)

mpop a écrit :

Si on définit en pixels la largeur du bloc contenant l'image, ça ne redimensionnera que ce bloc. Il faudrait dimensionner en pixels (en fonction de la largeur de l'image) un bloc contenant tous les autres : conteneur global ou body lui-même.

La largeur du bloc contenant l'image n'est pas renseignée, étant donné que je ne connais pas cette largeur au moment de la charger. Du coup je ne vois pas comment dimensionner un bloc contenant tout le reste en fonction de cette largeur que je ne connais pas.

Je ne pensais pas que ce serait si compliqué.

Ah, détail intéressant : si le haut ne se dimensionne pas convenablement, le bas lui est correct. Il doit y avoir un truc

Bonjour,

Je ne pense pas que la solution soit en css pur, je ne vois que 2 possibilités peut être passer en full table ou un peu de php (ou JS) te permettant d'indexer le width d'un div conteneur à la dimension du width de ta photo.

mpop a écrit :

Si on définit en pixels la largeur du bloc contenant l'image, ça ne redimensionnera que ce bloc. Il faudrait dimensionner en pixels (en fonction de la largeur de l'image) un bloc contenant tous les autres : conteneur global ou body lui-même.

Si je comprends bien il faudrait modifier mon body et lui dire quelque part "largeur = largeur de la photo" ? Le problème c'est que je ne connais pas suffisamment pixelpost pour savoir comment faire...
Je vais demander sur leur forum. Cela dit j'ai un doute : si la photo n'est pas un panorama (et qu'elle fait 200px de large mettons), ne risque-t-on pas de s'exposer au même problème, mais avec des photos étroites ? (Au delà des 200px de large de la photo, il n'affiche plus l'interface.)

En fait il ne faut pas dire au body de faire la largeur de la photo, il faut lui dire de faire au minimum cette largeur...

ghost a écrit :
Bonjour,

Je ne pense pas que la solution soit en css pur, je ne vois que 2 possibilités peut être passer en full table ou un peu de php (ou JS) te permettant d'indexer le width d'un div conteneur à la dimension du width de ta photo.

Passer en full table ? Ce serait un tel gâchis... J'ai passé tellement de temps sur ce premier "exercice" en CSS que je n'arriverais pas à revenir en arrière à ce point.
Quant au PHP je n'y connais rien du tout.

Il semblerait qu'on bute sur une limite de HTML+CSS, ici. J'avoue ne jamais m'être penché sur ce genre de cas.

Une solution en javascript serait peut-être intéressante, si on peut avoir quelque chose de simple. Tout dépendra je suppose des moyens disponibles (ou non !) pour récupérer la largeur de body ou d'un div#global par exemple, et la largeur de l'image. Mais là, ça me dépasse...

Si une telle solution t'intéresse, il faudrait ouvrir un sujet sur le salon DOM/Javascript, en indiquant ce sujet-ci pour référence.

Suite à ma suggestion ci-dessus, sujet ouvert dans le salon DOM/Javascript :
http://forum.alsacreations.com/topic-5-21646-1-Probleme-de-largeur-totale.html

Suite à ma découverte je vous invite tous ( pour une fois ) à tirer votre chapeau à IE 6 qui est LE SEUL à agrandir le body du fait de la taille de l'image ...
Modifié par CNeo (13 Jan 2007 - 21:57)

parappa a écrit :
Passer en full table ? Ce serait un tel gâchis... J'ai passé tellement de temps sur ce premier "exercice" en CSS que je n'arriverais pas à revenir en arrière à ce point.

Salut
Tu peux mettre un tableau à une cellule qui sera simplement le conteneur général, c'est pas méchant et ça suffira pour ce que tu souhaites obtenir.

Bonjour,

Rien de compliqué en php et ça évite JS

<style>
#conteneur{

overflow: hidden;
border: 1px solid black;
margin: auto;
} 




</style>	
</head>
<body> 
 <?php
$chemin = 'image.jpg';/* chemin de ton image*/
list($width, $height, $type, $attr) = getimagesize($chemin);
?>

<div id="conteneur" style="<?php echo 'width: '.$width.'px'; ?>">
<!-- Le code de ta page --> 

</div>
</body>
</html>

Avec ça ton bloc conteneur devrait avoir le width de ta photo... à voir si la photo est plus petite que la dimension de la fenêtre ...

J'ai rapporté le bug sur le site de Mozilla, au cas où çà pourrait leur être utile ...

Et maintenant dodo.
Modifié par CNeo (13 Jan 2007 - 22:59)

CNeo a écrit :
J'ai rapporté le bug sur le site de Mozilla, au cas où çà pourrait leur être utile ...

Je ne pense pas qu'il s'agisse d'un bug, bien que je ne sois pas un expert à ce sujet. A mon avis, il s'agit du même problème que celui rencontré avec un mot trop long (Supercalifragilisticexpialidocious).

Julien Royer a écrit :
Je ne pense pas qu'il s'agisse d'un bug, bien que je ne sois pas un expert à ce sujet. A mon avis, il s'agit du même problème que celui rencontré avec un mot trop long (Supercalifragilisticexpialidocious).

C'est à dire ?

Tout contenu est censé agrandir son conteneur, non ?
Sauf si celui-ci à une taille, hors j'ai essayé une page simple avec juste l'image trop large et une bordure à body, le résultat est que le body reste à la même taille que s'il n'y avait pas d'image. J'en conclu donc que dans tous les navigateurs modernes les images ont une propriété particulière qui fait qu'elle n'agrandissent pas leurs conteneur ( ce qui paraît plutôt logique mais le problème c'est qu'il n'y a probablement aucune solution pour que les images se comportent de la même façon que les autre éléments ) ce qui n'est absolument pas prévu dans les spécifications il me semble.

Si quelqu'un a un autre avis sur la question je serais ravi de changer d'opinion.

CNeo a écrit :
J'ai rapporté le bug sur le site de Mozilla, au cas où çà pourrait leur être utile ...

Tu comptes le rapporter pour Opera, Safari, Konqueror... également ?
Quelque chose me dit qu'il s'agit d'un comportement normal. C'est un peu comme si body avait pour largeur (width) la largeur du viewport. Il faudrait vérifier ce qu'en dit la spécification...

Edit : pour info, les éléments de type bloc (div, p, img en display: block...) n'agrandissent pas plus body que les éléments de type en-ligne.
Modifié par Florent V. (14 Jan 2007 - 10:15)

Florent V. a écrit :
C'est un peu comme si body avait pour largeur (width) la largeur du viewport. Il faudrait vérifier ce qu'en dit la spécification...

Je viens de tester et en effet, body garde toujours la taille du viewport même en cas de div enfant plus grand.

A la limite que body soit de la taille du viewport tout le temps sauf si on lui donne une talle c'est pas gênant, le problème c'est qu'un div conteneur qu'on mettrait sur toute la page se comporte de la même manière ...

Après test je remarque que cet effet est le même que lorsqu'on met un texte trop long avec un

white-space: nowrap

ce qui n'est pas spécialement logique.

J'en conclu de tout çà que tous les éléments d'une page on une taille de 100% au chargement mais qu'il n'est malheureusement pas possible d'obliger un conteneur à prendre la dimension de sont contenu.
Modifié par CNeo (14 Jan 2007 - 10:33)

Tout ça me semble normal et pas spécifique à BODY : un élément DIV par exemple qui n'a pas de largeur de spécifiée s'étendra sur toute la largeur de son conteneur. Si ce DIV contient un élément qui est plus large et bien cet élément déborde. Idem dans le cas de BODY (dont HTML est le conteneur)

Bon évidemment ceci n'est pas le cas avec IE 5/6 qui gère mal l'overflow. (IE 7 a évolué à ce niveau)
D'ailleurs CNeo, avais-tu réalisé le test avec IE6 ou IE7 (en mode standard) ?

Après ça dépend du display : par exemple table se comporte différemment comme dit au dessus
Modifié par Alan (14 Jan 2007 - 11:06)

Alan a écrit :
Bon évidemment ceci n'est pas le cas avec IE 5/6 qui gère mal l'overflow. (IE 7 a évolué à ce niveau)
D'ailleurs CNeo, avais-tu réalisé le test avec IE6 ou IE7 (en mode standard) ?

Après ça dépend du display : par exemple table se comporte différemment comme dit au dessus

J'ai récupérer mes versions dans un "pack" sur internet.

Pour table j'y avais pas pensé. Pas besoin de Javascript ni de PHP ( enfin presque ), un simple

display: table-cell;

règle notre problème sous Firefox et Opera. Reste IE 7 qui n'est toujours pas à la hauteur ...

Edit : personnellement je ne trouve toujours pas cette façon d'interpréter très logique mais bon, on y peut rien.
Modifié par CNeo (14 Jan 2007 - 11:14)