TEXT-ALIGN dans Google Chrome

Version imprimable

21/09/2010, 16h14
Aquellito

TEXT-ALIGN dans Google Chrome
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:

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
21/09/2010, 17h12
Invité
Bonjour,

Citation:

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 :
1. on définit la largeur du bloc ;
2. on lui attribue des marges horizontales automatiques.
Concrètement :
Code:

1 2 3 4 5 #element { width : 150px; margin-left : auto; margin-right : auto; }
Cordialement,
21/09/2010, 17h20
kohsaka

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.
21/09/2010, 19h10
Aquellito

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 :cry:
Bref, c'est la cata partout et je doit laisser tomber le côté 'CSS fait maison' et me plonger dans ses vrais concepts :aie:

Citation:

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.

tu viens de donner la reponse alors ;)

Code:

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:

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>

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:

1 2 3 4 5 6 7 8 <div id="fd_body"> <div id="profil">  <br /> <br />  </div> </div>
code CSS
Code:

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; }

22/09/2010, 14h45
kohsaka

1 pièce(s) jointe(s)

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.
22/09/2010, 16h34
Aquellito
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:

1 2 3 4 5 6 7 8 <div id="profil">  <br /> <br /> <span style="float:right; margin:5px;">  </span> </div>
23/09/2010, 21h28
Aquellito

éééé 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 :cry:

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...