Mise en forme

01 nov. 2018, 23:26

Bonsoir à tous

Je but sur un problème de mise en forme de base.
Je voudrais que mon bouton input ai la forme que mes autres boutons .
J'ai attribuer pour un test la meme class que les autres mais cela ne change pas

Code : Tout sélectionner

<div class="cBtn col-xs-12">
							<ul>
							  <li class="send"><a href="webmaster.php"><i class="fa fa-share"></i>Webmaster</a></li>
							</ul>
</div>

Code : Tout sélectionner

<input type="reset" name="reset" id="reset" class="send" value="Effacer formulaire">

Code : Tout sélectionner

<input type="submit" name="envoi_message" class="send" id="submit_btn" value="Envoyer le message"/>

et voila mon code css

.forma .cBtn .clear , .cBtn .send{
	margin-bottom: 0;
	margin-top: 4px;
	padding: 10px;
	padding-right: 17px;
	padding-left: 17px
	
}
.forma .cBtn .clear  a, .cBtn .send a{
	font-family: 'Roboto', 'sans-serif';
	font-weight: 700;
}
.forma .cBtn .send{
	box-shadow: 0px 2px 0px 0px #179abf;
	background:#1fcdff ;
}
.forma .cBtn .send:hover{
	background:#2f2f2f;
	box-shadow: 0px 2px 0px 0px #000 ;
}

Par contre il y a une class fa fa-share qui n'est dans aucun de mes css class que l'on retrouve dans mes boutons en haut.

Merci par avance pour votre aide.

@+ Filou

02 nov. 2018, 00:22

Bonjour,

Utilise l'inspecteur DOM/CSS de ton navigateur pour voir quelles sont les styles CSS appliquées et t'aider à debuguer.
Pour accéder à l'inspecteur DOM/CSS, fais Ctrl+Maj+i sous Firefox ou Chrome, utilise le sélecteur en haut à gauche du volet (cf pièce jointe) et sélectionne l'élément que tu veux contrôler.

2018-11-01 23_13_44-Window.png

04 nov. 2018, 18:45

Bonjour

Merci pour ton aide, je vois que j'ai cela dans mon code bouton contact : <li class="send"><a href="contact.php"><i class="fa fa-share"></i>contact</a></li>
L'autre bouton effacer le formulaire : <input type="reset" name="reset" id="reset" class="send" value="Effacer formulaire">
Sur la page : http://yakasolutions.fr/contact.php
Dans l'inspecteur de code dans firefox cela me dit que je suis bien en classe .send pourtant ils n'ont pas la même apparence.
Comment faire si cela est possible ?

Merci par avance

@+ Filou

04 nov. 2018, 23:49

Clic avec l'inspecteur de code sur ton bouton bleu et regarde dans le panneau de debug du CSS quelles sont les propriétés qui appliquent le style sur ton bouton pour le rendre bleu par exemple.
Tu verras que ce n'est pas la class .send

05 nov. 2018, 23:11

Bonjour,
Voici mes deux codes :

Code : Tout sélectionner

<li class="send"><a href="contact.php"><i class="fa fa-share"></i>contact</a></li>

Code : Tout sélectionner

<input type="reset" name="reset" id="reset" class="send" value="Effacer formulaire">

Dans la première ligne il y a 2 class send et fa fa-share laquelle faut elle prendre.
Dans la seconde ligne il y a 1 class send

J'ai regarder l'inspecteur dans firefox j'ai essayer de changer la class dans la seconde ligne mais cela n'a rien changer.

Comment faire ?
Merci de votre aide.

@+ Filou

07 nov. 2018, 10:25

Ce ne sont pas ces class qui font le style de ton bouton.

Après avoir sélectionné ton bouton, regarde le panneau de droite de l'inspecteur de code pour voir quelles sont les propriétés CSS qui sont appliquées :
download/file.php?id=579

Je ne vais pas le faire à ta place donc il faut que tu cherches et comprennent le fonctionnement des CSS.

10 nov. 2018, 00:08

Bonsoir

Complétement perdu.
J'ai beau essayer je comprend rien, j'ai fait X tentatives en vain.
Quelqu'un peut juste me dire mon bouton a quelle class :

Code : Tout sélectionner

<div class="cBtn col-xs-12">
							<ul>
							  <li class="send"><a href="webmaster.php"><i class="fa fa-share"></i>Webmaster</a></li>
							</ul>
			  </div>

Pour moi il y a 3 class :
1- cBtn col-xs-12
2-send
3-fa fa-share

Merci par avance.

@+ Filou

10 nov. 2018, 13:03

Btn veut souvent dire bouton en abrégé, regarde de ce côté

Mise en forme

Qui est en ligne