28172 sujets

CSS et mise en forme, CSS3

Problème de compatibilité pour centrer mon site

Bonjour,

Tu as un centrage de BODY (en width: 960px) avec les marges automatiques. Pas sûr que ça passe correctement avec tous les navigateurs, effectivement.
Il faudrait plutôt appliquer ces styles (largeur et marges auto) sur un conteneur DIV global.

Par ailleurs, tu as:
- un div#global vide (?);
- un <div align="center">...</div>.
Ça fait un peu bricolage...
Florent V. a écrit :
Bonjour,

Tu as un centrage de BODY (en width: 960px) avec les marges automatiques. Pas sûr que ça passe correctement avec tous les navigateurs, effectivement.
Il faudrait plutôt appliquer ces styles (largeur et marges auto) sur un conteneur DIV global.

Par ailleurs, tu as:
- un div#global vide (?);
- un <div align="center">...</div>.
Ça fait un peu bricolage...


Ok tu peux me dire ca un peu plus clairement ? Je débute en CSS
Smiley confused
Merci
Eh bien dans ta page l'élément BODY a l'identifiant "page_bg". Les styles suivants s'appliquent donc à BODY:
/* Ligne 52 de template.css */
#page_bg {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 960px;
}

/* Ligne 878 de template.css */
#page_bg {
	background: #EBEBEB;
	margin: auto;
}

Alors voilà:
1. Déjà, séparer le code pour un même sélecteur en deux endroits, ce n'est pas très malin. Tu prends le risque de t'embrouiller considérablement. Il faudrait rassembler ça au même endroit.
2. Ensuite, ce code est normalement suffisant pour obtenir un bloc de 960px de large qui soit centré (on peut virer le text-align: center inutile). Si la page est valide, et c'est le cas ici, le centrage sera pris en compte par tous les navigateurs, y compris Internet Explorer (versions 6 et 7).
3. Par contre, je ne suis pas sûr que tu puisse appliquer ce code à l'élément BODY, qui a un statut un peu particulier pour les navigateurs. Il est plus sûr, pour centrer un cite, de créer un conteneur global comme ceci:
<body>
	<div id="conteneur-global">
		<!-- Tout le contenu du site ici. -->
	</div><!-- #conteneur-global -->
</body>

Et, côté CSS:
#conteneur-global {
	width: 960px;
	margin: 0 auto;
}


Ensuite, je mentionnais le fait que, dans ton code, tu as des choses comme ceci:
<div id="global"></div>
<div class="center" align="center">
<!-- Ici le contenu du site -->
</div>

Déjà, tu as un DIV vide qui porte l'identifiant "global". Comme aucun style n'est défini pour cet élément, je suppose que tu peux le supprimer.
Ensuite, tu as un DIV qui contient l'ensemble des contenus du site, avec une classe "center" qui sert juste à appliquer un text-align: center, et un align="center" qui fait sensiblement la même chose. Sauf erreur de ma part, ce bloc est parfaitement inutile, et peu être supprimé également.

Au final tu devrais avoir quelque chose comme ceci côté HTML:
<body>
	<div id="global">
		<div id="wrapper">
			...
		</div><!-- #wrapper -->
		<div id="sgf">...</div>
	</div><!-- #global -->
</body>

Et des propriétés pour le centrage uniquement appliquées à #global.
Ah, ça au moins ce sont des explications claires, Merci Smiley biggrin

Effectivement il y avait 2x l'élément #page_bg, c'était par défaut dans le template..

Pour la div global, elle est de trop, j'avais fait un chipotage qui a foiré et oublié de l'enlever ;o)

J'ai suivi toutes tes recommandations mais dans IE ca ne fonctionne tjs pas ou alors c'est mon pc qui devient Smiley biggol lol
Sujet clos
Aller à