Problème entre centrage et barre de scroll horizontale

Bonjour à tous,

Voici mon problème : sur cette page :
http://egypte.webou.net/test/gabarit_homepage.html
Si je redimensionne ma fenêtre pour qu'elle rentre dans un format 1024x768, une barre de scroll horizontale apparaît. Aussi si je change "margin : 0pt auto" en "margin : 0 0", elle disparaît, mais le site n'est plus centré...

Ah oui j'oubliais... : à tester sur Firefox ou Safari, parce que j'ai pas encore testé sous IE... parce que je n'ai pas IE ! (d'ailleurs si quelqu'un veut me faire un petit screenshot, je suis preneur... pour voir le carnage ! )

Bonjour,

montoumes a écrit :
j'ai pas encore testé sous IE... parce que je n'ai pas IE ! (d'ailleurs si quelqu'un veut me faire un petit screenshot, je suis preneur... pour voir le carnage ! )

Rassure-toi, la présentation sous IE est certes un peu sobre, voire dépouillée, mais en tous cas irréprochable quand à la qualité du rendu HTML .


(Plus sérieusement: le rendu est nu dans IE, à cause de ta syntaxe de la règle @import. Toutes les feuilles de styles sont ignorées. Supprimer les mentions des medias (inutiles) dans les @import)
Modifié par Laurent Denis (02 Jan 2008 - 15:43)

Ah oui tiens, j'ai cru que c'était le PC et IE qui marchaient plus... snif (pas taper !).

Et pour le problème de barre de scroll horizontale, pas d'idée ?

Bonjour montoumes,

Outre les corrections que Laurent préconise sur tes règles d'import :

@import url("styles-reset.css") [#blue]screen, print[/#];
@import url("styles-global.css") [#blue]screen, print[/#];
@import url("styles-colonne.css") [#blue]screen, print[/#];
@import url("styles-print.css") [#blue]print[/#];

La modification de la valeur overflow devrait règler le problème :

div#pageContent {
	margin:0 auto;
	padding:0;
	width:990px;
	text-align:left;
	background: #ffffff url('img-body-bg.gif') scroll repeat-y 0 0;
	clear:both;
	min-height:100%;
	overflow:[#red]visible[/#]; [#blue]hidden peut-être ?[/#]	}

Une autre petite erreur à corriger :

div#rightColumn .encart ul.vignettes li a:link {
	border:1px solid #E7E3D7;	
             display:block;
	width:70px;
	height:70px;
	border:1px solid #e7e3d7;
	background:[#blue]none[/#] url('../img/img-body-bg.gif') scroll no-repeat 0 0;
	padding:0;
	margin:0;
	}

Cdt,
Sylvain

ah oui tiens ça fonctionne ! merci tous les deux.

Par contre, pour éviter de rester bête, 6l20, tu peux m'expliquer ce qui change quand on modifie le overflow (sur ma mise en page, parce que le principe global j'ai compris ) de visible à hidden ? Y'a un débord transparent ?

Merci bien

En espérant que ces liens te donneront les réponses à tes interrogations :

yoyodesign
Laurent Denis
Florent V.

Cdt,
Sylvain
Modifié par 6l20 (02 Jan 2008 - 23:05)

Là ça va être difficile de faire mieux ! C'est on ne peut plus clair ! Merci à tous

(Donc en fait c'est bien le carnage sur IE, et je vais devoir re-potasser les formatage de polices en em.. )