TEXT-ALIGN dans Google Chrome

**Aquellito** · 21/09/2010, 16h14

Bonjour à tous,

Je suis en train d'adapter mes pages css pour Google Chrome et j'ai un soucis en particulier.

J'ai un bloc positionné comme ceci dans mon <body>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#profil
{
	float:right;
	margin-right:5px;
	margin-top:2px;
	text-align:right;
}

le problème est que Google Chrome ne prend pas en compte text-align et me positionne tous mes éléments à gauche du bloc.

Quelqu'un aurait-il une solution ?

Merci,
Axel

Invité · 21/09/2010, 17h12

Bonjour,

Envoyé par Aquellito

le problème est que Google Chrome ne prend pas en compte text-align et me positionne tous mes éléments à gauche du bloc.

La directive CSS text-align, c'est pour le texte et de façon plus générale, les éléments de type "en ligne" (inline). La confusion est assez fréquente d'autant plus que ça a fonctionné par le passé, sur certains vieux navigateurs.

Pour centrer des éléments de type "bloc" (block) et à condition que leur position soit définie sur relative, on utilise généralement l'astuce suivante :

on définit la largeur du bloc ;
on lui attribue des marges horizontales automatiques.

Concrètement :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#element {
    width : 150px;
    margin-left : auto;
    margin-right : auto;
}

Cordialement,

**kohsaka** · 21/09/2010, 17h20

si tu dois adapter ton site pour google chrome, c'est que tu as pris le problème à l'envers.

Arrange toi pour développer ton site pour firefox/chrome en premier, plus proche des standards, ca sera plus simple de faire les correctifs pour ie ensuite.

**Aquellito** · 21/09/2010, 19h10

Justement, toutes les pages CSS ont été développées pour des portails intranet d'une entreprise qui est encore sous IE6.
Le problème est qu'on va bientôt passer à IE8 et déjà beaucoup d'utilisateurs installent Google Chrome. Forcément c'est proposé à chaque ouverture de Google

Bref, c'est la cata partout et je doit laisser tomber le côté 'CSS fait maison' et me plonger dans ses vrais concepts

Pour centrer des éléments de type "bloc"

J'utilise déjà cette méthode sur d'autres pages, mais là le problème est différent : Je veux avoir un bloc flottant dont tous les éléments seraient non pas centrés mais collés à droite du bloc.

**kohsaka** · 22/09/2010, 08h57

tu viens de donner la reponse alors

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/* centrer le site */
.main {
   width: 960px;
   margin: 0 auto;
   overflow: hidden;
}
 
/* caler le bloc à droite mais par rapport aux 960px  */
.main .bloc {
   width: 300px;
   float: right;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div class="main">
    <div class="bloc">
          <p>blabla bla<br /><img src="" alt="" /></p>
          <p>blabla bla blab bla blafkzadfhzf</p>
    </div>
</div>

**Aquellito** · 22/09/2010, 09h54

Tout d'abord merci pour vos réponses,

Ok pour caller le bloc à droite, ça j'ai pas de soucis.
Mon problème est de pouvoir caller les élements à droite dans le .bloc.
Parce que là si je suis ton exemple tous les éléments de ton .bloc sont alignés à gauche.

code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="fd_body">
	<div id="profil">
		<!-- #include file='print_profil.asp' -->
		<br />
		<br />
		<!-- #include file='rechercher.asp' -->
	</div> 
</div>

code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body
{
	margin:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
	background-image:url(images/fond_bf.gif);
}
#fd_body
{
	background-image:url(images/banniere.gif);
	background-repeat:no-repeat;
	position:absolute;
	top:0px;
	left:0px;
	height:892px;
	width:100%;
}
#profil
{
	float:right;
	margin-right:5px;
	margin-top:2px;
	text-align:right;
}

**kohsaka** · 22/09/2010, 14h45

voila en PJ comment tu peux caser tes éléments à droite.

la methode varie selon que tes éléments sont de type inline ou block

Bonne chance.

**Aquellito** · 22/09/2010, 16h34

Merci bien.

Bon ba comme je le redoutais ce n'est pas possible d'utiliser 'text-align' autrement que pour du texte (vous me direz comme son nom l'indique).
J'ai donc été obligé de remettre un élément de mise en forme...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="profil">
		<!-- #include file='print_profil.asp' -->
		<br />
		<br />
		<span style="float:right; margin:5px;">
			<!-- #include file='rechercher.asp' -->
		</span>
</div>

**Aquellito** · 23/09/2010, 21h28

éééé béééé.....

Je découvre la joie de tester mes pages sous Chrome, Mozilla et IE6 et c'est de la follie.... Tout les éléments réagissent presque à chaque fois différemment

Sous Chrome (qui me pose le plus de soucis ), le "background-image" ne prend pas en compte "height" et me coupe l'image à la fin du contenu du bloc.... J'ai tellement cherché que je pense à un bug (surtout que ça marche sur IE et Mozilla) ! Malgré ça il faudrait que je puisse régler le problème vu que beaucoup de monde l'utilisent en ce moment...

TEXT-ALIGN dans Google Chrome

CSS

Discussions similaires

Partager

Partager