[Résolu] Layout de 960px de large ne rentre pas sur du 1024

Bonjour à tous,

Je me suis aperçu hier que le dernier site dont je me suis occupé ne passe pas parfaitement sur un écran de résolution 1024*768. En effet, il provoque l'apparition d'une barre de défilement horizontale alors qu'il occupe une largeur de 960px de large.

Quelqu'un a-t-il une idée de ce qui peut causer ce problème désagréable?

Cordialement,
Benjamin
Modifié par Benjamin D.C. (28 Nov 2006 - 11:56)

Avant de pointer le problème, j'aimerais rappeler que tu aurais sans doute pu le remarquer toi-même en faisant un minimum de debugging. Par exemple, avec la barre d'outils Web Developer pour Firefox, en faisant « Entourer > Entourer les éléments de type bloc », on remarque que le bloc de pied de page est trop large.

Il suffit alors de se plonger dans le code CSS relatif à ce bloc, et on peut trouver ceci :

#footer li:last-child {
	width:100%;
	margin-left:30px;
}

Avec la largeur à 100%, on « fige » la largeur du bloc. Et si on rajoute une marge, le bloc est donc décalé, mais sa largeur ne se réduit pas.

Deux solutions. La plus propre :

#footer li:last-child {
	width: auto;
	clear: left;
	margin-left: 30px;
}

Et en gardant le « bricolage » du width: 100% :

#footer li:last-child {
	width:100%;
	padding-left: 30px;
}

Bonjour mpop,

Merci beaucoup pour ta réponse rapide et claire: le width:auto associé au clear:left corrige en effet le problème (problème logique en fait).

Je développe sur Safari et ai pris la mauvaise habitude de ne limiter mon utilisation de la barre Web Developer qu'à certaines fonctions limitées (essentiellement "désactiver tous les styles"). Entre parenthèses, tu as une version française de cette barre d'outils?

Encore merci

Benjamin

[quote=Benjamin D.C.Je développe sur Safari et ai pris la mauvaise habitude de ne limiter mon utilisation de la barre Web Developer qu'à certaines fonctions limitées (essentiellement "désactiver tous les styles"). Entre parenthèses, tu as une version française de cette barre d'outils?
On doit en trouver une version française sur Geckozone. Allez, tant que j'y suis, je vais trouver ça... hop :
http://extensions.geckozone.org/WebDeveloper

mpop a écrit :
On doit en trouver une version française sur Geckozone. Allez, tant que j'y suis, je vais trouver ça... hop :
http://extensions.geckozone.org/WebDeveloper

Merci beaucoup