Sujet Précédent Sujet Suivant

Pseudos bouton avec une balise p

Résolu/Fermé
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 20 nov. 2013 à 23:30
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 24 nov. 2013 à 22:21
Bonjour,

J'ai des pseudos bouton avec une balise p et du texte et si je veux les colorer en blanc, je fais: 
color:#fff;
mais comme les liens de ma page ont une couleur différente, il prennent donc cette couleur.
Si j'interviens directement sur ma balise p en faisant : 
<p style="color:#fff">

ça fonctionne mais je souhaite savoir comment faire pour faire en sorte que ça fonctionne dans ma feuille de style sans intervention sur ma page (à part pour mettre ma classe)

Merci de votre aide.

6 réponses

Réponse 1 / 6
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
21 nov. 2013 à 08:13
Salut

c est tres simple , tu donne une class a tes p de bouton 
<p class="bouton">
        <a href="#">bouton</a>
      </p>


et tu style les a de cette class dans ta css ! 
 .bouton a{.........
}

exemple 

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    <!--
    #global{
      width: 200px;
      margin: 100px auto;
    }

    .bouton a{
      text-decoration: none;
      font-size: larger;
      color: #FF0000;
      padding: 5px;
      text-align: center;
      border: medium solid #99FFFF;
      border-radius: 26%;
      -webkit-border-radius: 26%;
      -moz-border-radius: 26%;
      background-color: #CCFFFF;
    }

    .bouton a:hover{
      background-color: #FFFF99;
      color: #000066;
      border: medium solid #FFFF61;
    }
    -->
    </style>
  </head>
  <body>
    <div id="global">
      <p>
        <a href="#">lien Normal</a>
      </p>
      <p class="bouton">
        <a href="#">Bouton</a>
      </p>
    </div>
  </body>
</html>


a+
0
Réponse 2 / 6
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 110
21 nov. 2013 à 17:35
C'est bien ce que je fais mais cela ne fonctionne pas pour le texte (lien) 


.bouton {
	text-decoration:none;
	color:#fff;
	margin:0;
	padding:10px 20px 10px 20px;
	border-radius:12px 0 12px 0;
	border:1px solid #7F9DB9;
	background: linear-gradient(to top, #66CCFF, #009BC7);
    text-shadow: 0.1em 0.1em 0.1em #393939, 0.1em 0.1em 0.1em #393939;
	font-family: Verdana, Geneva, sans-serif;
	font-weight:normal;
	font-style:normal;
	font-size: 90%;
	line-height: 50px;
	}
.bouton:hover{
    box-shadow: 0px 2px 2px #393939, 2px 2px 2px #393939, -2px -2px 2px #393939 ;
	}

Et sur ma page: 

<a class="bouton" href="modif.php?id=<?php echo $row_Recordset1['id']; ?>">Modifier</a>
0
Réponse 3 / 6
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
21 nov. 2013 à 18:55
?? moi je n ai pas de problemes ?

il ni a pas de css apres celui ou ce trouve le bouton !
meme une autre css insere apres celle ci ? ?

par contre Attention si tu style directement le <a> en bouton ,sur IE < 10 on ne verras pas de couleur de background sur le bouton !
0
Réponse 4 / 6
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 110
21 nov. 2013 à 21:46
Ok merci.
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
21 nov. 2013 à 22:24
si tu style directement le <a> en bouton tu lui ajoute un 
display: inline-block;
pour ie
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 110
Modifié par barale61 le 23/11/2013 à 17:07
Oui mais en fait c'est le paragraphe que tu style pas le <a> sinon cela ne fonctionne pas et c'est ce que je voudrais faire.

Par contre si je fais 


     <acronym  class="bouton">
        <a href="#">Bouton</a>
</acronym>
Ça fonctionne mais est-ce propre ?
0
Réponse 6 / 6
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 110
24 nov. 2013 à 22:21
Cela fonctionne bien.
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
signification de mkdir -P
cessoune -
cessoune -

3 réponses
signification du smiley :-P
elocheri -
maiscestgenial -

4 réponses
que veut dire :p
monica -
piratesdescaraibes -

6 réponses