28172 sujets

CSS et mise en forme, CSS3

Imbrication de DIV + Centrage

Bonjour,

J'essaye quelque chose de très simple, mais alors qui refuse m'obstinemant de passer sous Firefox.
Je m'explique...

Une page construite de cette facon :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="full">

  <!-- Affichage de l'entete -->
  <div class="header">
    <img src="images/headeur.gif" width="750" height="96" />
  </div>
  <!-- Affichage de l'entete -->
  
  <!-- Affichage des messages -->
  <div class="message">
  TEST
  </div>
  <!-- Affichage des messages -->

</div>

</body>
</html>


Et ma feuille de style :


body {
	background-color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}


.message {
	text-align: center;
	color: #FF0000;
	width: 750px;
	border: 2px solid #FF6655;
}

.full {
	text-align: center;
	color: #CCCCCC;
	border: 2px solid #FFFFFF;
}
.header {
	background-color: #000000;
	text-align: center;
	border: 2px solid #BBCCDD;
}


Voici l'affichage sous firefox :
http://hiboox.com/lang-fr/image.php?img=690r33oa.jpg

Sous IE ainsi que Dreamweaver, pas de problème le div du dessous s'affiche bien centré, mais alors sous FF, impossible de le centré, je ne comprend vraiment pas pourquoi ca foire comme ca...
Salut,

Essaye avec : 


.message {
	margin-left: auto;
	margin-right: auto;
	color: #FF0000;
	width: 750px;
	border: 2px solid #FF6655;
}


Normalement ça devrait fonctionner.
Bonjour,

On ne peut théoriquement pas centrer un élément de type bloc en utilisant text-align: center sur son conteneur.

Si ça marche avec IE, c'est un comportement non standard.
Quant au rendu dans Dreamweaver, il va falloir apprendre très vite à ne pas s'y fier une seconde. Smiley cligne
Florent V. a écrit :
Bonjour,

On ne peut théoriquement pas centrer un élément de type bloc en utilisant text-align: center sur son conteneur.



Bonsoir Florent et les autres,

J'utilise pourtant ceci fréquemment mais en rajoutant sur l'élément à centrer :

margin: x auto; /* où x est une valeur à définir */


Serait-ce une hérésie que de faire ceci où peut-être n'ai-je pas compris ce que tu veux dire ?
hroiian a écrit :
mais en rajoutant sur l'élément à centrer :
margin: x auto; /* où x est une valeur à définir */

Ben voilà: ce sont les marges automatiques (associées à un width ou min-width, excepté pour les tableaux) qui réalise le centrage. Sauf pour IE 5.x, qui ne comprend pas le centrage avec les marges automatiques, mais permet effectivement de centrer un bloc en déclarant text-align: center pour son parent.

Je ne savais pas que le text-align: center restait efficace avec IE6 et 7. Quoi qu'il en soit, ça ne marche à priori pas avec les autres navigateurs, et ça n'est pas un comportement standard.

hroiian a écrit :
Serait-ce une hérésie que de faire ceci où peut-être n'ai-je pas compris ce que tu veux dire ?

Utiliser à la fois les marges automatiques (sur le bloc lui-même) et text-align: center (sur le parent du bloc) n'est pas une hérésie. C'est une stratégie de compatibilité avec IE 5.x. Comme aujourd'hui IE5 est pour ainsi dire mort (0,1-0,4%), je pense qu'on peut s'en passer et gagner deux lignes dans nos feuilles de styles CSS. Smiley cligne
Florent V. a écrit :

Utiliser à la fois les marges automatiques (sur le bloc lui-même) et text-align: center (sur le parent du bloc) n'est pas une hérésie. C'est une stratégie de compatibilité avec IE 5.x. Comme aujourd'hui IE5 est pour ainsi dire mort (0,1-0,4%), je pense qu'on peut s'en passer et gagner deux lignes dans nos feuilles de styles CSS. Smiley cligne


Hum, je sens qu'il va falloir que je me remette sérieusement à jour concernant le positionnement en css. Smiley murf

Je suis interressé par ce que tu dis là. Quelle solution utilises-tu pour centrer un élément bloc dans son parent ?

Je ne parle pas ici d'une astuce devant prendre en compte une compatibilité avec une quelconque version d'Internet Explorer (les navigateurs graphiques ne prenant pas en compte la conformité aux standards sont, pour moi et pour ainsi dire, mort Smiley ravi ) mais bien d'une solution conforme aux standards.
J'utilise: 
div#acentrer {
	width: Npx;
	margin-left: auto;
	margin-right: auto;
}
et pas 
div#parent {
	text-align: center;
}
div#acentrer {
	width: Npx;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

La deuxième solution est la même que la première, mais avec en plus l'utilisation de text-align pour la compatibilité IE 5.x.

Par ailleurs, si je veux centrer des éléments en display: inline je peux bien entendu utiliser text-align:center sur le bloc parent (et pas de marges automatiques).
Et si je veux centrer un bloc qui doit prendre disons 60% de la largeur disponible dans le parent, je n'utilise pas de centrage mais tout simplement:
margin: 0 20%;

Modifié par Florent V. (29 Mar 2008 - 14:02)
Bonsoir Florent,

Je te remercie pour ces éléments de réponse.

Florent V. a écrit :
J'utilise: 
div#acentrer {
	width: Npx;
	margin-left: auto;
	margin-right: auto;
}
et pas 
div#parent {
	text-align: center;
}
div#acentrer {
	width: Npx;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

La deuxième solution est la même que la première, mais avec en plus l'utilisation de text-align pour la compatibilité .


J'avais complètement occulté que le 
text-align:center;
dans le bloc parent était pour la compatibilité avec IE 5.x. Du coup, je l'applique systématiquement pensant qu'il fait partie intégrante de la solution. Je m'apperçoit que c'est effectivement inutile et vais m'empresser de ne plus l'utiliser.

a écrit :

Par ailleurs, si je veux centrer des éléments en display: inline je peux bien entendu utiliser text-align:center sur le bloc parent (et pas de marges automatiques).
Et si je veux centrer un bloc qui doit prendre disons 60% de la largeur disponible dans le parent, je n'utilise pas de centrage mais tout simplement:
margin: 0 20%;



Tout à fait logique pour ceci. Les styles CSS ne sont finalement que des règles de bon sens, pourvu que le navigateur les implémente correctement.
Sujet clos
Aller à