18041 sujets

Questions générales et questions de débutants

Comment aligner 3 boutons ?

Bonjour,

Voila mon problème j'ai fait un code, un système de bouton à deux images. Normal et Survol.

mais je n'arrive pas à les aligner sur la meme ligne ( ça ces de la phrase ).

Si quelqu'un peux m'aider cela serai super.

Voici mon code :

<span id="cata"><a href="#"></a></span>
<span id="habi"><a href="#"></a></span>
<span id="date"><a href="#"></a></span>

<style type="text/css">
#cata a {display:block;width:250px;
height: 50px;background-image:url(http://ispra-securite.fr/wp-content/uploads/2015/07/bt_Cata_Normal_v2.png);}

#cata a:hover{display:block;width:250px;
height: 50px;background-image:url(http://ispra-securite.fr/wp-content/uploads/2015/07/bt_Cata_Vol_v2.png);}
img{
border:0;
}
</style>

<style type="text/css">
#habi a {display:block;width:250px;
height: 50px;background-image:url(http://ispra-securite.fr/wp-content/uploads/2015/07/bt_Habi_Normal_v2.png);}

#habi a:hover{display:block;width:250px;
height: 50px;background-image:url(http://ispra-securite.fr/wp-content/uploads/2015/07/bt_Habi_Vol_v2.png);}
img{
border:0;
}
</style>

<style type="text/css">
#date a {display:block;width:250px;
height: 50px;background-image:url(http://ispra-securite.fr/wp-content/uploads/2015/07/bt_date_Normal_v2.png);}

#date a:hover{display:block;width:250px;
height: 50px;background-image:url(http://ispra-securite.fr/wp-content/uploads/2015/07/bt_date_Vol_v2.png);
}
img{
border:0;
}
</style>


Merci
Modifié par DeeDeePac187 (24 Aug 2015 - 10:20)
Salut DeeDeePac,
ben ! parce que tes id sont en display:block.

Mais à ce stade de méconnaissance du css, tu ne recevras pas l'entière solution toute cuite ... Na !
Modifié par pictural (24 Aug 2015 - 10:57)
Modérateur
Salut,

Effectivement tes boutons sont en "display:block;" ce qui les empêche de s'aligner. Jette un œil à la propriété inline-block (http://www.alsacreations.com/article/lire/1209-display-inline-block.html).

Au passage tu peux nettoyer un peu ton code, il n'y a pas besoin de toutes ces balises ni de tous ces styles :
<a href="#" id="cata" class="boutton"></a>
<a href="#" id="habi" class="boutton"></a>
<a href="#" id="date" class="boutton"></a>


.boutton{
    /* Style commun a tout tes bouttons*/
}
    .boutton:hover,
    .boutton:focus{
        /* Style commun a tout tes bouttons*/
    }
#cata{
    /* Style spécifique à l'id */
}
#habi{
    /* Style spécifique à l'id */
}
#date{
    /* Style spécifique à l'id */
}


Et si tu commences juste, je te conseille de passer par un bon gros tuto qui te fera voir toutes les bases : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3



pictural a écrit :
ben ! parce que tes id sont en display:block.
Mais à ce stade de méconnaissance du css, tu ne recevras pas l'entière solution toute cuite ... Na !
wtf ? Altruisme++ Laisse au moins une piste, un article ou un tuto...
Modifié par _laurent (24 Aug 2015 - 11:14)
Super Grand Merci...

Enfet quand j'ai essayé inline-block j'ai pas écrit block à la suite juste {display:inline;


Laurent la de suite j'ai pas le temps de regarder pour nettoyer le code. Je reviendrai... MDR

Merci
Modifié par DeeDeePac187 (24 Aug 2015 - 14:48)
_laurent a écrit :
(...) *** ? Altruisme++ Laisse au moins une piste, un article ou un tuto...
C'était juste te laisser le faire, alors sois-en heureux sans être ingrat.
Merci. Je ne voulais pas le dire dans ce sens la. Pardon je ne voulais pas faire l'ingrat, en tout cas merci pour votre aide.
Sujet clos
Aller à