28172 sujets

CSS et mise en forme, CSS3

[Résolu]Center un floatant

Bonjour à tous ,
J'ai un soucis avec un bouton que je n'arrive pas centrer dans ma page. Je sais bien que les floatant sortent du flux de la page et donc qu'on ne peut les centrer avec les méthodes habituelles.
Actuellement le seul moyen que j'ai de centrer ce bouton est de le place rdans un conteneur de taille fixe que je centrer par exemple avec des margin auto :

<div class="clear centrer" style="width:170px" >
  <a class="ActionLien" href="menu.php" onclick="this.blur();"><span><img src="images/picto/back.gif" alt="Icône Retour" /><?php echo $lang_config['retour'] ?></span></a>     
</div>


Le problème étant que ce bouton est fait pour s'adapter à son contenu et donc sa largeur est variable. De plus comme le site sur lequel je travail est multilangue je ne peut absolument pas prévoir la dimension que va prendre le bouton.

Pour illustrer voici à quoi ressemble le bouton (le premeir est en rollhover) :
http://img397.imageshack.us/img397/7820/btwj4.png

Auriez vous une idée de comment procéder ?
Merci

Le code CSS du bouton : 

a.ActionLien {
    float: left;   
    background: transparent url('images/bouton/btn_actionLiens_normal_B.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    font: normal 12px arial, sans-serif;
    height: 45px;
    margin: 0 0 0 0;
    padding-right: 0px; 
    text-decoration: none;
}

a.ActionLien span {
    background: transparent url('images/bouton/btn_actionLiens_normal_A.gif') no-repeat;
    background-position: top left;
    display: block;    
    line-height: 35px;              /* Doit être égale à la hauteur de a.button - (padding-top + padding-bottom) */
    padding: 4px 18px 5px 18px;
    _padding: 5px 18px 11px 18px;   /* hack IE6 */
    font-weight: bold;
} 

a.ActionLien:hover {
    background-position: right -45px;
}

a.ActionLien:hover span {
    background-position: left -45px;
}

a.ActionLien:active {
    background-position: right -90px;
    color: #000;
    outline: none;                    /* cache les pointillés dans Firefox */
}

a.ActionLien:active span {
    background-position: left -90px;
    padding: 6px 18px 4px 18px;       /* décale de texte de 1px en bas */
    _padding: 6px 18px 10px 18px;   /* hack IE6 */    
}

a.ActionLienOFF, a.ActionLienOFF:hover, a.ActionLienOFF:active {
    background-position: right -135px;
    color: #9ea2b4;
    cursor: default;    
}

a.ActionLienOFF span, a.ActionLienOFF:hover span, a.ActionLienOFF:active span {
    background-position: left -135px;
    padding: 5px 18px 11px 18px;        
}

a.ActionLien span img {
  vertical-align: -6px;
  margin-top: 5px;
  padding-right: 10px;  
}

Modifié par grunky (26 May 2008 - 08:39)
Bonjour,

Si l'élément est flottant: on ne pourra pas le centrer.
Si l'élément est en display: block: on ne peut le centrer que s'il a une largeur fixe (ou éventuellement un max-width).

Donc: ne pas utiliser float ou display: block, ou bien ne pas chercher à centrer l'élément.

Parmi les types de rendu qui permettent de centrer un élément de largeur variable:
- display: table (non supporté par IE 6-7);
- display: inline-block (supporté par IE 6-7 uniquement pour les éléments de type en ligne, et non supporté par Firefox avant la version 3);
- display: inline.

Dans le premier cas le centrage se fait avec les marges automatiques (même en l'absence de largeur fixe ou de max-width). Dans les deux cas suivant, le centrage se fait en donnant text-align: center au bloc conteneur.
Shemu a écrit :
Peut être cela va t'aider :
http://www.babylon-design.com/site/index.php/2007/09/24/192-boutons-extensibles-css-compatibles-tous-navigateurs

Exemples :
http://www.babylon-design.com/exemples/boutons-extensibles/



Merci , j'ai finalement opté pour cette solution. Elle comporte une image de plus que la mienne mais à le mérite d'être "centrable" sans aucun problème !

En revanche j'ai un problème de décalage lorsque je clique sur un bouton : 

<a href="#" class="ActionLiens"><span><span><span><img src="image" /> Texte</span></span></span></a>


Quand je clic sur le bouton avec le css suivant : 
a.ActionLiens:active span{
 background-position:left -90px /*Je décale mon image de base pour avoir l effet enfoncé */
}
a.ActionLiens:active span span{
 background-position:right -90px /*Je décale mon image de base pour avoir l effet enfoncé */
}
a.ActionLiens:active span span span{
 background-position:left -90px /*Je décale mon image de base pour avoir l effet enfoncé */
}


Mon bouton se décale vers la gauche (ou plutôt il se centre correctement) de la taille de l'image qu'il contient. En revanche si c'est un bouton avec du texte pur ,il n'ya pas de décalage.
Une idée ?
Modifié par grunky (23 May 2008 - 14:45)
Je n'ai pas la page complète à te montrer (intranet) mais j'ai uploadé un extrait avec le bouton :
http://www.lanforums.com/bouton/

Le problème n'est visible que sous Firefox puisque je n'arrive pas a faire marcher le :active sur les autre navigateur pour le moment.
Une fois cliquer le bouton reste décalé à moins que l'on fasse un ctrl+f5 sur la page

Merci Smiley cligne
Modifié par grunky (23 May 2008 - 15:05)
Heu... peut-être pas sur tous les liens, le outline:0, hein. À moins de s'assurer que tous les liens auront un style très facilement repérable (genre texte blanc sur fond noir) au focus...
Sujet clos
Aller à