Sujet Précédent Sujet Suivant

Centrer un bouton css dans une div

Résolu/Fermé
Séb41100 - 17 déc. 2013 à 11:59
uniuc Messages postés 224 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 4 avril 2025 - 18 déc. 2013 à 16:53
Bonjour à tous

voila je bloque la dessus depuis déjà longtemps et je ne suis pas encore très doué surtout au niveau css

j'ai un bouton CSS placé dans une div qu'il m'est impossible de changer

Sachant que j'ai repris le CSS utilisé pour les boutons du menu de mon site .

voila mon html :

<div class="bouton">
<p><a href="services.html"><b >Retour Menu</b></a></p>
</div>

et le Css :

p{
font-family: Arial,sans-serif;
font-size: medium;
width: 200px;
height: 43px;
padding-top: 7px;
color: #000;
background: transparent;
}
.bouton a {
text-align: center;
font-size: medium;
display:block;
width:210px;
line-height:50px;
vertical-align:middle;
background:url(images/boutonnoir.png) no-repeat;
color:white;
text-decoration:none;
}
.bouton a:hover {
background:url(images/boutonnoir2.png) no-repeat;
color: #000;
}

Merci de votre aide

A voir également:

11 réponses

Réponse 1 / 11
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
Modifié par Pitet le 17/12/2013 à 14:27
Salut,

Pour commencer, tu appliques ton style à la balise <p>, donc tous les paragraphes de ta page feront 200px de largeur. Je ne pense pas que c'est ce que tu souhaites.

Pour faire au plus simple, pas besoin d'utiliser autant de balise pour encapsuler ton lien, seule la balise <a> suffit. Par exemple :

CSS 
a.mybutton {
 /* display et dimensions */
 display: inline-block;
 width: 200px;
 height: 50px;
 /* centrage vertical */
 line-height: 50px;
 vertical-align: middle;
 /* centrage horizontal */
 text-align: center;
 /* font style */
 font-family: Arial,sans-serif;
 font-size: medium; 
 color: white;
 text-decoration: none;
 font-weight: bold;
 /* background style */
 background: blue;
}

a.mybutton:hover { background: red; color: black; }


HTML 
<a href="services.html" class="mybutton">Retour Menu</a>


N'ayant pas tes images, j'ai remplacé les background par une couleur.

Bonne journée
6

Discussions similaires

Cliquer sur un bouton pour faire apparaitre un paragraphe/image
Utilisateur anonyme -
nass6906 -

Bonjour,
J'ai besoin d'aide, je suis en train de faire un site web. Mon problème est le suivant, je voudrais que lorsque l'on clique sur un des deux boutons suivant (Materiel ----) un paragraphe s'affiche en dessous selon le bouton sur lequel on vient de cliquer.

Mon but est de faire un espace boutique et lorsque je clique sur un des deux boutons ça m'affiche les articles associés.







Configuration: Windows / Firefox 52.0

16 réponses
[HTML/CSS] Position bouton.
Bassre -
CHAMBAH -

Bonjour,

Mon problème c'est que je n'arrive pas a bouger un bouton convenablement, il change de position en fonction de l'écran ou si je zoom ou de zoom, j'utilise position absolute.

Si vous voyez le problème sa serait cool de me dire quoi :)

15 réponses
Faire de jolies boutons de site web avec CSS
joelxax -
Furixx -

Salut a tous.

Pour mon site, j'aimerais faire de jolie boutons comme ceux qui sont sur commentcamarche (">>Posez votre question", "J'ai une réponse" "Liste des messages"...). Je sais que c'est possible avec CSS, mais je ne sait pas coment m'y prendre.
Merci pour votre aide


Configuration: windows xp sp2
firefox 3

Qui fait le malin tombe dans le ravin

A quoi sert Internet Explorer ? >>> A télécharger Mozilla Firefox

15 réponses
Agrandir Button (input) en CSS
bouboul-IV -
Mike -

....
Désoler pour les fotes d'aurtografe http://bouboul-IV.legtux.org Mon site perso

1 réponse
Changer l'arrière plan d'un bouton (CSS)
nico3fr -
122 -

Bonjour,

Je souhaiterais créer un bouton dans un formulaire qui change d'état lorsque l'on passe la souris dessus.
Rien de vraiment dur dis comme ca...

Les contraintes :
- Que ca marche sous IE et Firefox
- Pas de javascript

Et voici mes problèmes plus en détails, ca expliquera certainement mieux ce que je souhaite et les problèmes rencontrés.

Tout d'abord du code qui marche sous firefox... Mais pas sous internet explorer

12 réponses
HTML remonter en haut d'une page
miklb -
ufuly -

Bonjour,

J'ai une question simple :

J'ai une page html qui affiche des JPG les un en dessous des autres.
Pour pouvoir remonter en haut de la page, le seul moyen est il de relancer la page ou existe il par un bouton une fonction qui permet de remonter en haut directement ?

Merci !

10 réponses