Partage
  • Partager sur Facebook
  • Partager sur Twitter

je n'arrive pas a selectionner mon bouton

12 juillet 2019 à 11:02:47

Bonjour, je n arrive pas a selectionner mon bouton en html/css pour le modifier... voici mon codes html entier
<!DOCTYPE html>
<html>
  <head>
  	<title>H-Story: Connexion ou Inscription</title>
  	<meta charset='utf-8'>
  	<link type='text/css' rel='stylesheet' href='connexion.css'/>
  </head>
  <body>
  	<header>
    <div class="header">
    <div class="story">
  		<img src="../images/logo.png" alt='logo H-Story'/>
  		<h2>"Ecrivons notre histoire"</h2>
    </div>
    <div class="connexion" >    
        <form method='post' action='traitement.php'>

  		  <label for='pseudo'>Pseudonyme</label>
  		  <input type='text' name='pseudo' id='pseudo' placeholder="Pseudonyme" size="30" maxlength="10" required />

  		  <label for='password'>Mot de passe</label>
  		  <input type='password' name='password' id='password' placeholder="Mot de passe" size="30" maxlength="10" required/>
           
          <input type="submit" value="connexion" id="connexion"/>

  	    </form>
      </div>
      </div>
  	</header>
  	<section>
  		<div class="inscription">
  			<form method="post" action="inscription.php">

  				<label for="newpseudo">CHOISIS UN PSEUDO</label>
  				<input type="text" name="newpseudo" id="newpseudo" placeholder="CHOISIS UN PSEUDO" required/>

  				<label for="newpassword">TON NOUVEAU MOT DE PASSE</label>
  				<input type="password" name="newpseudo" id="newpassword" placeholder="TON NOUVEAU MOT DE PASSE" required/>


  				<label for="confirmpassword">CONFIRMES-LE</label>
  				<input type="password" name="confirmpassword" id="confirmpassword" placeholder="CONFIRMES-LE" required/>

  				<label for="email">ENTRE TON NOUVEL EMAIL</label>
  				<input type="email" name="email" id="email" placeholder="ENTRE TON ADRESSE MAIL" required/>

          <input type="submit" value="INSCRIPTION"/>

  			</form>
  		</div>
  		<article>
  			<p>
  				Peu importe l'âge, la couleur,<br>
  				la nationalité, le sexe...<br>

  				Car tant qu'on s'amuse,<br> c'est l'important, non ?<br>

  				Alors rejoins-nous ! Tu es le/la bienvenu(e) sur<br>

  				H-STORY 
  			</p>
      </article>
    </section>
      <footer>

        <p>2019 - 2020<br>
        H-STORY - Tout droits réservés.</p>
        <p>H-STORY est un projet à but non lucratif<br>
          qui n'est en aucun cas affilié ou offert à Sulake LTD. Pour plus de renseignement: </p>

        </footer>

</body>
</html>

et voila mon code css entier:

@font-face {
	font-family: alpha_echo;
	src: url("../polices/alpha_echo/alpha_echo-webfont.eot"),
	     url("../polices/alpha_echo/alpha_echo-webfont.svg"),
	     url("../polices/alpha_echo/alpha_echo-webfont.ttf"),
	     url("../polices/alpha_echo/alpha_echo-webfont.woff");
}

@font-face {
	font-family: black_jack;
	src: url("../polices/black_jack/blackjack-webfont.eot"),
	     url("../polices/black_jack/blackjack-webfont.svg"),
	     url("../polices/black_jack/blackjack-webfont.ttf"),
	     url("../polices/black_jack/blackjack-webfont.woff");
}

header h2 {
	font-family: black_jack;
	font-size: 3em;
	margin-top: -5px;

}

.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: -20px;
	margin-left: 5px;
}

.connexion {
	margin-top: 30px;
	display: flex;
	flex-direction: row;
	margin-right: 30px;
}

header {
	background: rgb(35,93,255);
	height: 150px;
	border-bottom: rgb(19,43,177) solid 5px;


}

body {
	margin: 0;
}

.story {
	margin-top: 30px;
}

label {
	position: absolute;
	left: -9999em;
}

.connexion input {
	border-radius: 5px;
	height: 26px;
	font-size: 0.7em;
}

.connexion #connexion {
	width: 150px;
	background: rgb(0,57,104);
	border:  2px rgb(0,39,157) solid;
	font-weight: bold;
	color: rgb(0,39,157);
	font-size: 1em;
}

.inscription input {
	display: flex;
	flex-direction: column;
	width: 350px;
	height: 50px;
	margin: 30px;
	position: relative;
	left: 70px;
	top: 30px;
}

section {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
  • Partager sur Facebook
  • Partager sur Twitter
12 juillet 2019 à 11:25:23

Bonjour,

 Si tu essaye ceci : 

input[type="submit]{
...
}



  • Partager sur Facebook
  • Partager sur Twitter

#Avgeek

12 juillet 2019 à 15:29:52

Bonjour, ca a marcher ! Merci beaucoup, cependant j'ai une question: pour quoi est ce que quand j'ai cible le bouton avec un id ou avec un class je n'ai pas reussi a le seletionner? par exemple :

section .inscription .bouton_insc {
     ...
}

je n'ai pas reussi avec ca

-
Edité par KillianTy 12 juillet 2019 à 15:33:07

  • Partager sur Facebook
  • Partager sur Twitter
12 juillet 2019 à 18:27:47

KillianTy a écrit:

Bonjour, ca a marcher ! Merci beaucoup, cependant j'ai une question: pour quoi est ce que quand j'ai cible le bouton avec un id ou avec un class je n'ai pas reussi a le seletionner? par exemple :

section .inscription .bouton_insc {
     ...
}

je n'ai pas reussi avec ca

-
Edité par KillianTy il y a environ 1 heure


Bonjour KillianTy,

Pour moi, cela fonctionne tu as le code html + css qui ne fonctionne pas?

Exemple :

https://codepen.io/Zonecss/pen/NZmYMX

  • Partager sur Facebook
  • Partager sur Twitter
Découvrez les Css avec la zonecss.fr
15 juillet 2019 à 9:28:40

Re

Je ne sais pas pour quoi ca n'a pas marche quand j'ai essaye...

-
Edité par KillianTy 15 juillet 2019 à 9:29:08

  • Partager sur Facebook
  • Partager sur Twitter
15 juillet 2019 à 18:21:15

Bonjour KillianTy,

Dans ton code dans ta demande initiale, la class n'est pas assigné au bouton

Cela ne viendrait pas de là?

<input type="submit" value="INSCRIPTION" class="bouton_insc"/>



  • Partager sur Facebook
  • Partager sur Twitter
Découvrez les Css avec la zonecss.fr
16 juillet 2019 à 13:31:49

AliasDmc a écrit:

Bonjour KillianTy,

Dans ton code dans ta demande initiale, la class n'est pas assigné au bouton

Cela ne viendrait pas de là?

<input type="submit" value="INSCRIPTION" class="bouton_insc"/>



Re,

Non, quand j'ai essayé de cibler le bouton j'ai bien fait attention à assigner la class au input...

  • Partager sur Facebook
  • Partager sur Twitter