Bonjour à tous,

Suite à la lecture et la mise en pratique du tutoriel http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS sur mon site internet ( http://www.jamesbond-fr.com ), je rencontre quelques problèmes :
Lorsque je suis en 800*600 le bloc principal de ma page (qui est en position absolue) est trop grand pour la résolution. De ce fait, le bloc est découpé à part égale à gauche et à droite.

Voilà le code CSS du bloc central :
#pagecell1{
	background:#FFFFFF url('fond.gif') repeat-y center; position:absolute;
	top: 183px;
	left: 50%;
	width: 982px;
	margin-left: -491px;
	min-height: 1465px;
	height: 1465px;
}


Je rencontre ce problème seulement sous Internet Explorer.
Comment faire pour que le cadre central, lorsqu'il est supérieur à la résolution, soit calé à gauche et que l'on puisse utiliser la barre de défilement horizontale pour accéder au menu de droite par exemple ?

Merci pour vos réponses ! Smiley cligne
Pour obtenir le comportement que tu souhaites, il faut utiliser une technique de centrage horizontal moins radicale que le positionnement absolu. Ça tombe bien, il en existe une toute simple à utiliser et bien compatible comme il faut avec les navigateurs (seul IE 5 pour windows recquiert un petit bidouillage… mais rien de méchant).

Cette technique, c'est l'utilisation des marges calculées automatiquement (ou marges automatiques).

Tu remarqueras que toute la première partie du tutoriel que tu cites utilise cette technique. Smiley eek Donc je ne remet pas le lien… Smiley lol
Merci déjà pour ta réponse Smiley cligne
J'avais essayé ça en premier mais le problème est que le coté gauche de la partie central était centré.
En d'autres termes, on voit une moitié en fond dégradé rouge et la première moitié de la page sur la droite Smiley rolleyes

C'est donc pour ça que je me suis dit qu'il fallait que j'essai en marges négatives. Smiley lol

C'est possible qu'il y ait un problème dans mes conteneurs étant donné que j'ai pris comme "conteneur" les deux blocs principaux qui strucutrent mon site (le header et toute la colonne blanche en dessous).

Voilà donc je vais encore réessayer en marge automatique mais c'est pas encore gagné.
En y repensant je me demande si j'ai pas oublié quelque chose du style width Smiley ravi
Modifié par CrazyCow007 (23 Apr 2006 - 15:13)
CrazyCow007 a écrit :
J'avais essayé ça en premier mais le problème est que le coté gauche de la partie central était centré.
En d'autres termes, on voit une moitié en fond dégradé rouge et la première moitié de la page sur la droite Smiley rolleyes

Houlà, pas sûr d'avoir compris ce que ça veut dire… Le côté gauche de la partie centrale, d'accord. Ensuite, centré je veux bien, mais centré par rapport à quoi ?

Enfin bon, avec un code normal (et une largeur fixe) les marges automatiques devraient fonctionner correctement.

Sinon, petite suggestion : mon validateur me donne 8 erreur et 323 avertissements pour ta page. Il y a peut-être deux ou trois choses à épurer dans le code, non ?

Pour finir, tu peux aussi réfléchir à l'accessibilité et essayer de faire des blocs de contenu autrement qu'avec des tableaux à neuf cellules (dont une seule cellule de contenu…).
Cf http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Bon courage Smiley biggrin
Modifié par mpop (23 Apr 2006 - 16:06)
a écrit :
Enfin bon, avec un code normal (et une largeur fixe) les marges automatiques devraient fonctionner correctement.


D'après ce que j'ai lu dans le tutoriel justement lors de l'utilisation de "position: absolu" sur un bloc les marges automatiques ne fonctionnent plus. Et effectivement sur mon site ça ne marche pas. Voila l'aperçu du site lorsque j'utilise les marges automatiques :
upload/6237-auto.jpg

On voit donc bien la structure des pages du site sur ce screenshot. La partie supérieure qui elle réagit bien à la technique des marges automatiques s'appelle row1.
La partie centrale de la page, celle qui pose problème fait 982 pixels de large et s'apelle pagecell1.
Voila le code CSS correspondant à ce bloc lorsque j'utilise des marges automatiques :
#pagecell1{
	background:#FFFFFF url('fond.gif') repeat-y center; position:absolute;
	top: 183px;
	width: 982px;
	margin-left: auto;
	margin-right: auto;
	min-height: 1465px;
	height: 1465px;
}


Donc un résumé, en marges automatiques le bloc central qui est en position absolue reste sur la gauche, en marges négatives comme conseillé dans le tutoriel pour les blocs en position absolue, les hautes résolutions marchent bien mais dès que la largeur de l'écran est inférieur à 982 pixels (800*600 par exemple) une partie de la page ne peut pas être visionnée (à gauche).

En espérant qu'il existe une solution en CSS pour mon problème... Smiley ohwell
Merci beaucoup par avance ! Smiley cligne
Modérateur
bonjour,

Ton lien ne fonctionne plus , erreur 403.

pour centrer l'ensemble du site en horizontal, il convient de la place dans un conteneur principale , de dimensionné sa largeur , d'appliqué un "margin:auto;" et enfin d'user d'un doctype valide pour que ça marche aussi dans IE par exemple (text-align:center peut aussi etre utiliser/ajouter pour IE).
Les elements positioné en absolute, ont toute les chances d'ignorer ce conteneur., alors evitons les positions "absolute" inutiles, en as tu reellement besoin ?.

Pour un centrage vertical et un maximun de compatiblité on ne peut pas vraiment utiliser "display:table et compagnie", mais un tableau d'une seule cellule fera l'affaire ... comme conteneur principale.
(html, body, table {height:100%;})

ceci dit , combien de pages du sites seront si courte que l'alignement verticale deviennent une preoccupation majeure Smiley smile .

un exemple visuel en css: http://gcyrillus.free.fr/trucs_css/centrons-un-site-sans-marges-negatives.html

++
Modifié par gcyrillus (03 May 2006 - 15:17)