Bonjour, 

Je suis actuellement entrain de m'entrainer en HTML/CSS, et j'ai rencontré un petit problème:

J'ai mis un header à mon site contenant un titre de niveau 1 et un titre de niveau 2 plus 2formulaires: 1pour mettre son pseudo et un pour le mdp (oui en gros c'est un formulaire de connexion)... BREF. Le fait est que quand je défini une image de fond bleu en repeat-x à ce header, il y a un petit bout blanc comme une marge à gauche qui apparaît. 

Comment puis-je faire en sorte que l'image de fond prenne toute la largeur ?

Salut,

difficile de t'aider sans ton code.

Au hasard je dirait :

body {margin:0}

-
Edité par Frogweb 9 juillet 2019 à 16:34:09

Frogweb a écrit:

Salut,

difficile de t'aider sans ton code.

Au hasard je dirait :

body {margin:0}

-
Edité par Frogweb il y a 2 minutes

Merci beaucoup ! Ca à résolu mon probleme !

Bonne journée.

Bonjour,

Je me demande pourquoi 2 formulaires pour un système de connexion? L’orque on ce connecte c'est le couple login/password qui est transmit au serveur. Pas L'un ou l'autre!! 

AbcAbc6 a écrit:

Bonjour,

Je me demande pourquoi 2 formulaires pour un système de connexion? L’orque on ce connecte c'est le couple login/password qui est transmit au serveur. Pas L'un ou l'autre!! 

Ahouis en effet, je n'ai fait qu'1 formulaire, mais deux input !

Cependant j'ai un problème concernant ce formulaire: je n'arrive pas à modifier les dimensions du bouton d'envoie, comment faire ?

merci.

Donne nous les codes html et css de ton formulaire. (utilise l'icône </> pour insérer ton code)

<div class="connexion" >    
        <form method='post' action='traitement.php'>

  		  <label for='pseudo'></label>
  		  <input type='text' name='pseudo' id='pseudo' placeholder="Pseudonyme" size="30" maxlength="10" required style="height: 20px; border-radius: 5px;" />

  		  <label for='password'></label>
  		  <input type='password' name='password' id='password' placeholder="Mot de passe" size="30" maxlength="10" style="height: 20px; border-radius: 5px;" required/>

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

  	    </form>
      </div>

Et le code CSS aussi.

Pourquoi un label vide?? /!\ Le placeholder ne remplace pas un label.

Lire :

• https://www.anysurfer.be/fr/en-pratique/directives/directive/4-1-1-les-labels-et-elements-des-formulaires-sont-intimement-lies#placeholder
• https://blog.atalan.fr/placeholder-et-accessibilite/

Quel est le soucis avec la hauteur des éléments de formulaire?

PS : n'utilise pas de style inline mais indique les styles dans un fichier .css.

J'ai mis un label vide car je ne veux pas qu'il y ai ecrit "Votre pseudo" ou "Votre mdp" en dehors du champ, mais à l'intérieur.

Le soucis avec la hauteur des elements du formulaire est que je n'arrive pas à les modifier (j'aimerai les aggrandir)

Un label est obligatoire.

Si tu ne veux pas qu'il apparaisse :

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

Et pas de display:none ou de visibilty:hidden.
Merci pour les personnes non-voyantes.

PS : et on attends toujours ton code CSS...

Hey, je lisais ce post et je suis surprise par ta réponse, Frogweb.

En effet, je ne comprends pas pourquoi

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

Plutôt que

label {
  display: none; //ou visibility: hidden;
}

Car la première solution me semble un peu moyenne alors que la deuxième serait plus propre, non ?

Du coup j'aimerais bien avoir ton retour là-dessus, savoir pourquoi tu as dit ça et essayer de comprendre ton point de vue

C'est pour l’accessibilité pour les personnes non-voyantes.

Le label en display:none ou visibillity:hidden, contrairement à position:absolute et un left négatif, ne seront pas lu par les lecteurs d'écran.

https://a11y-guidelines.orange.com/web/exemples/masquage/index.html

http://standardetaccessible.com/Masquer-du-contenu-en-CSS

Oh je comprends mieux, mais le lecteur d'écran ne lit pas le placeholder ?

Non.

D'ailleurs le placeholder est là pour mettre des exemples pas pour être une étiquette d'un input.

https://blog.atalan.fr/placeholder-et-accessibilite/

Eh bien, j'aurais appris des trucs aujourd'hui haha

Merci pour ton explication !

KillianTy a écrit:

Le soucis avec la hauteur des elements du formulaire est que je n'arrive pas à les modifier (j'aimerai les aggrandir)

Quel est ton code CSS?  Comme le demande frogweb!!

 .connexion input {
                border-radius: 5px;
                min-height: 2.5em;
            }

code html entier:

<!DOCTYPE html>
<html>
  <head>
  	<title>H-Story: Connexion ou Inscription</title>
  	<meta charset='UTF8'>
  	<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'></label>
  		  <input type='text' name='pseudo' id='pseudo' placeholder="Pseudonyme" size="30" maxlength="10" required style="height: 20px; border-radius: 5px;" />

  		  <label for='password'></label>
  		  <input type='password' name='password' id='password' placeholder="Mot de passe" size="30" maxlength="10" style="height: 20px; border-radius: 5px;" required/>

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

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

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

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


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

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

  			</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>
      <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>

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;
}

.inscription {
	display: flex;
	flex-direction: column;
}

voilà

Tu n'as rien mis dans ta CSS pour agrandir ton input.

-
Edité par Frogweb 11 juillet 2019 à 19:41:00

Bonjour passe ton code au validateur pour voir tes erreurs et pour les corriger =>   https://validator.w3.org

• Un identifiant est unique dans le document, tu ne peux avoir plusieurs id="newpseudo".
• Pour la meta charset la valeur c'est utf-8 pas UTF8.
• L'attribut text pour la balise <input> n'existe pas, c'est type.
• Tu ouvres une balise <section> mais tu ne la referme jamais.

Et donc en appliquant le style que j'indique plus haut??? Pour moi la hauteur des <input>  de connexion s’agrandisent.

Merci ! C'est bon j'ai reussi,

bonne continuation !