28173 sujets

CSS et mise en forme, CSS3

[résolu] Là, je ne comprends pas la réaction de Firefox

ni d'opéra d'ailleurs Smiley lol

ayant le code suivant :


<head>	
	<style type="text/css">
		*{margin:0;padding:0;border:0;}
		#contenu{width:780px;text-align:right;}	
		#contenu p{width:200px;}
	</style>
</head>

<body>
	<div id="contenu">
		<p>texte</p>
	</div>
</body>


Pourquoi lorsque je défini une largeur à mon paragraphe, celui-ci ne reste pas aligner à droite sur Firefox et Opéra alors que cela agit correctement sur Ie 6 et Ie7 ?
Quelqu'un pourrait-il m'éclairer ??
Modifié par Noisequik (21 Mar 2007 - 10:17)
La propriété "text-align:right" ne s'applique normalement que sur les éléments "inline". Donc pas sur un paragraphe. Smiley smile
ok c'est clair, donc en gros dès que j'attribue une largeur à mon paragraphe celui-ci se transforme en bloc...

C'est donc Ie qui se trompe ?!
Modifié par Noisequik (07 Dec 2006 - 11:53)
Tu fixe une largeur de 200px au paragraphe et celui-ci est un bloc, il n'est pas aligné à droite avec le text-align:right, il reste donc à gauche.
text-align est une propriété héritée (elle s'applique aux éléments enfants), elle s'applique donc au contenu du p, le texte du paragraphe est donc aligné à droite dans le paragraphe qui à une largeur de 200px.

en fait IE 6 et 7 adoptent le même comportement en mode de rendu strict. ici tu n'a pas mis de doctype donc ces navigateurs sont en mode de rendu "compatible" (comprendre "à l'ancienne") ils alignent donc les blocs horizontalement avec text-align:right, comme le faisait à l'époque IE5.
Noisequik a écrit :
ok c'est clair, donc en gros dès que j'attribue une largeur à mon paragraphe celui-ci se transforme en bloc...

C'est donc Ie qui se trompe ?!


Non un paragraphe est un bloc par défaut
MrPatate a écrit :
T

en fait IE 6 et 7 adoptent le même comportement en mode de rendu strict. ici tu n'a pas mis de doctype donc ces navigateurs sont en mode de rendu "compatible" (comprendre "à l'ancienne") ils alignent donc les blocs horizontalement avec text-align:right, comme le faisait à l'époque IE5.


Malheureusement j'ai bien mis le bon doctype en faisant mes tests et cela ne change rien pour IE qui garde le même alignement
Si tu veux obtenir le même résultat avec tous ces navigateurs, il faut préciser
#contenu p {margin-right: auto;}
[b]ou[/b]
#contenu p {margin-left: auto;}
Eldebaran a écrit :
Si tu veux obtenir le même résultat avec tous ces navigateurs, il faut préciser
#contenu p {margin-right: auto;}
[b]ou[/b]
#contenu p {margin-left: auto;}



Ah oui excellent cela fonctionne bien, merci !! J'avais mis float:right mais c'était moins élégant je trouve.

Peut-on lire quelque part des explications sur ce point??
Sujet clos
Aller à