[Résolu] Centrage horizontal : div de diff. largeur, pb de centrage

Bonjour,

j'ai parcouru la FAQ avant de poster, mais n'ayant pas trouvé mon bohneur (ou ayant mal cherché), je me permets de vous poser ma question ici.

Voici : j'ai un problème de centrage sous IE. Un DIV est d'une largeur supérieure aux autres, et du coup IE centre le tout à partir de ce div plus large, comme cela peut se voir sur le printscreen que j'ai joint.

Une âme charitable pourrait-elle m'aider ?

Je vous remercie !

Pascal.


Pour plus de clarté, ci-dessous, le code du DIV plus large :

#main_pece {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 877px;
	height: 422px;
	background-image: url(main_pece_full.jpg);
}

Le code complet (duquel j'ai enlevé pour plus de lisibilité tout ce qui concerne les hover)

* { padding: 0; margin: 0; }

body {

	background: url(bg_main.png); 
	font-family: Arial, Helvetica, sans-serif;

}


/**** Layout ****/


#wrapper {
	margin: 0 auto;
	width: 805px;
}


/**** Menu ****/


#menu_left {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 542px;
	height: 80px;
	background-image: url(menu_left.png);
}


#menu_right {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 263px;
	height: 80px;
	background-image: url(menu_right.png);
}


/**** Header ****/


#header {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 805px;
	height: 328px;
	background-image: url(header.jpg);
}


/**** PéCé ****/


#main_pece {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 877px;
	height: 422px;
	background-image: url(main_pece_full.jpg);
}


/**** Services ****/


#main_services {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 805px;
	height: 380px;
	background-image: url(main_services_full.jpg);
}


/**** PC Occasion ****/


#main_occas {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 805px;
	height: 446px;
	background-image: url(main_occas_full.jpg);
}


/**** Tags ****/


#tags {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 805px;
	height: 373px;
	background-image: url(main_tags_full.png);
}


/**** Footer ****/


#footer {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 805px;
	height: 195px;
	background-image: url(footer_full.png);
}


/**** Clear That Shit Gurl! ****/


.clear {
	clear: both;
}


/**** Fin ****/

Modifié par swit (16 May 2008 - 18:27)

Hello

swit a écrit :
Voici : j'ai un problème de centrage sous IE. Un DIV est d'une largeur supérieure aux autres, et du coup IE centre le tout à partir de ce div plus large, comme cela peut se voir sur le printscreen que j'ai joint.

Je ne vois pas de bug sur ta capture d'écran, à quel niveau se situe ton problème et que souhaites-tu obtenir au final ?

BeliG a écrit :
Hello


Je ne vois pas de bug sur ta capture d'écran, à quel niveau se situe ton problème et que souhaites-tu obtenir au final ?

Hello, merci d'avoir répondu à ma requête

Mon problème est que IE centre le layout à partir du DIV le plus large, tandis que sous Firefox, le layout est correctement centré, comme le montre la capture d'écran ci-dessous. Vois-tu ce dont je veux parler ?

swit a écrit :
le layout est correctement centré, comme le montre la capture d'écran ci-dessous.

Pour comprendre ton problème il est plus utile que tu fournisses une capture d'écran du bug

Sinon je vois de quoi tu veux parler. En général pour éviter ce genre de problème je ne fais que des boites de même largeur, en me basant sur la taille de la plus large, puis je centre les fonds grâce au background-position :

background-image:url(...) no-repeat [b]center center[/b];

Petite incohérence également dans ton code :

#wrapper {
...
width: 805px; }

#main_pece {
...
width: 877px; }

Conteneur global de 805px qui englobe une <div> de 877px ?

Comment réagi IE avec le code suivant (tu dois également enlever tous les width de tes conteneurs) :

#wrapper {
...
width: 877px; }

#main_pece, #header, #main_services, #main_occas, #tags, #footer {
width:100%;
background-position:center center; }

EDIT :
Après test, ma solution fonctionne mais il se peut que le positionnement des fonds soit différent de center center. Si tu remarques un décalage essaie de trouver le bon compromis avec des px :

#main_pece, #header, #main_services, #main_occas, #tags, #footer {
width:100%;
background-position:[b]XXXpx[/b] center; }

Modifié par BeliG (29 Apr 2008 - 15:53)

Merci d'avoir fait quelques tests!

Cependant, et à moins que j'ai fais une erreur, cela me donne le résultat que tu peux voir dans la capture d'image ci-dessous. A noter que mon code est correctement lu par Firefox (capture n°1 dans mon 1er mesasge) et que c'est bel et bien seulement sous IE que le problème se pose (cf capture n°2 dans mon second message).

Ta solution, du coup, décale le tout, excepté le menu de navigation, pour lequel il y a deux DIV, et ça casse tout, autant sur FF que sur IE.

En fait, le problème est le suivant : sous IE, le layout se centre à partir du DIV le plus large, de 877px. Sous FF, et ce même si la largeur du wrapper n'est que de 805px, le layout se centre à partir de cette largeur, 805px.

J'aimerais juste faire en sorte que sous IE, le layout se centre lui aussi à partir de cette largeur, 805px.

Rha la la, j'ai peur de pas être super clair, mais bon vala, peut pas mieux expliquer

Le code que j'ai utilisé, à partir de tes infos :

* { padding: 0; margin: 0; }

body {

	background: url(bg_main.png); 
	font-family: Arial, Helvetica, sans-serif;

}


/**** Layout ****/


#wrapper {
	margin: 0 auto;
	width: 877px;
}


/**** Menu ****/


#menu_left {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 542px;
	height: 80px;
	background-image: url(menu_left.png);
}


#menu_right {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 263px;
	height: 80px;
	background-image: url(menu_right.png);
}


/**** Header ****/


#header {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width:100%;
	background-position: 50px center;
	height: 328px;
	background-image: url(header.jpg);
}


/**** PéCé ****/


#main_pece {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width:100%;
	background-position: 50px center;
	height: 422px;
	background-image: url(main_pece_full.jpg);
}


/**** Services ****/


#main_services {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width:100%;
	background-position: 50px center;
	height: 380px;
	background-image: url(main_services_full.jpg);
}


/**** PC Occasion ****/


#main_occas {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width:100%;
	background-position: 50px center;
	height: 446px;
	background-image: url(main_occas_full.jpg);
}


/**** Tags ****/


#tags {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width:100%;
	background-position: 50px center;
	height: 373px;
	background-image: url(main_tags_full.png);
}


/**** Footer ****/


#footer {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width:100%;
	background-position: 50px center;
	height: 195px;
	background-image: url(footer_full.png);
}



/**** Clear That Shit Gurl! ****/


.clear {
	clear: both;
}


/**** Fin ****/

Salut,

Sans le html et le rendu que tu recherches, je ne suis pas sur d'avoir tout saisi mais si ce que tu recherches correspond au décrochage à droite de ton image pourquoi ne pas garder le même width à ce bloc et y positionner ton image (en png) en absolute avec un right négatif ?

ghost a écrit :
pourquoi ne pas garder le même width à ce bloc et y positionner ton image (en png) en absolute avec un right négatif ?

J'y avais pensé également, mais cette solution nécessite une <div> (ou une balise <img>) supplémentaire + l'image de fond de #main_pece à redécouper + une correction de la transparence pour IE6.

Si ce genre de solution ne pose pas de problème je t'en propose une autre : retoucher tes images en rajoutant de la transparence à gauche et à droite jusqu'à avoir 877px (de sorte à ce que tout tes fonds aient la même largeur).

Concernant ce que je t'ai proposé au dessus et qui ne fonctionne pas (mais qui a l'avantage de ne modifier en rien tes images et ton code XHTML), il me faudrait une page en ligne pour trouver ce qui cloche...

A toi de voir

Bonjour à tous,

Il me semble que l'adresse perso correspond au site en question

L'image survolée est mise en background du lien :

a#xp:hover {
background-image:url(xp_hover.jpg);
cursor:help;
}

Pourquoi ne pas faire la même chose sur le lien "au repos" ?

Je ne suis pas sûr qu'il faille utiliser une quelconque transparence pour se faire.

Cdt,
Sylvain

6l20 a écrit :
Il me semble que l'adresse perso correspond au site en question

En effet...

6l20 a écrit :
Pourquoi ne pas faire la même chose sur le lien "au repos" ?

+1

Déjà, fais en sorte que l'image du lien "au repos" soit indépendante du fond (placée en background de a#xp). Puis suis le conseil de ghost : garder le même width (805px) à ce bloc (#main_pece) et y positionner ton lien (a#xp) en absolute avec un right négatif (+ position:relative sur #main_pece).

Sur les captures d'écran que tu as fourni il était impossible de voir que l'image du package était en fait un lien non-décoratif. J'aurais dû demander une page en ligne plus tôt on aurait gagné du temps
Modifié par BeliG (30 Apr 2008 - 10:49)

BeliG a écrit :
J'y avais pensé également, mais cette solution nécessite une <div> (ou une balise <img>) supplémentaire + l'image de fond de #main_pece à redécouper + une correction de la transparence pour IE6.

Dit autrement: c'est la bonne solution, mais ça demande un peu de travail.

Florent V. a écrit :
Dit autrement: c'est la bonne solution, mais ça demande un peu de travail.

C'est en effet la bonne solution dans ce cas, mais il était possible d'éviter le "peu de travail" si l'image faisait partie intégrante de l'image de fond (image non-significative).

D'abord, merci à tous pour vous êtes penché sur mon problème

Je vais essayer la méthode de rajouter de la transparence de chaque côté des images afin qu'elles fassent toutes 877px de large. Étant au travail je testerais ça dans la soirée et je vous tiens au courant.

Merci encore de votre aide !

swit a écrit :
Je vais essayer la méthode de rajouter de la transparence de chaque côté des images afin qu'elles fassent toutes 877px de large.

a écrit :
Déjà, fais en sorte que l'image du lien "au repos" soit indépendante du fond (placée en background de a#xp). Puis suis le conseil de ghost : garder le même width (805px) à ce bloc (#main_pece) et y positionner ton lien (a#xp) en absolute avec un right négatif (+ position:relative sur #main_pece).

C'est mieux...

Avec pas mal de retard, je voulais vous remercier de votre aide, tout marche bien maintenant

Mieux vaut tard que jamais