Colorer un fond avec display et taille bouton

**francky74** · 19/10/2014, 17h42

Bonjour,

Je suis en train de faire un ti truc pour le plaisir, et je me heurte à la couleur de fond de ma page (body) !
J'ai utilisé "display: black" et l fond est noir mais lorsque je veux utiliser la couleur #F0E68C cela ne fonctionne pas. Et j'aimerai utiliser cette couleur.

De plus, j'ai trouvé comment modifier la largeur du bouton (il n'y en a qu'un ..) mais je n'ai pas trouvé la façon de modifier la hauteur du bouton, et j'aimerai bien connaitre cela !

Voici le code que j'utilise :

index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="style.css" />
<title>Jeu</title>
</head>
<body>
		<div id="div_border">
			<div>
				<h1>Bienvenue ! Voulez-vous jouer ?</h1>
				<h3>Inscris ton pseudo :</h3>
 
			</div>
 
			<form id="monForm" method="post" action:"jeu.php">
		    	<p>
	            	<label for="form_pseudo">Pseudo : </label>
	            	<input type="text" id="form_pseudo" name="pseudo" required placeholder="Entrer votre pseudo"/>
	        	</p>
	        	<div class="left">
	        		<button type="button" style="width:300px">JOUER !</button>
			    </div>
			</form>
		</div>
</body>
</html>

style.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body
{
    background-color: black;
}
#div_border{
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	margin-top:150px;
	width: 800px;
 
	border:4px solid red;
	background:#F0E68C;
	color:blue;
 
	text-align:center;
}
#form_pseudo{
	margin-bottom:20px;
}
h1{
	padding-top:10px;
}
.left{
	margin-bottom:30px;
}

Merci pour vos aides !!!

**NoSmoking** · 19/10/2014, 18h10

Bonjour,

...je veux utiliser la couleur #F0E68C cela ne fonctionne pas...

aucune raison que cela ne fonctionne pas.

j'ai trouvé comment modifier la largeur du bouton (il n'y en a qu'un ..) mais je n'ai pas trouvé la façon de modifier la hauteur...

tu n'as pas eu la curiosité d'essayer height attendu que tu as utilisé width pour la largeur...

**francky74** · 19/10/2014, 21h56

Bonsoir !

Merci pour votre réponse !

Effectivement, la couleur fonctionne .... en fait je faisait des modifications sur un fichier qui n'était pas sauvegardé .... méa culpa !

Par contre, j'avais bien essayé height et cela ne fonctionne pas. Voici le code que j'ai fait :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="style.css" />
<title>Jeu</title>
</head>
<body>
		<div id="div_border">
			<div>
				<h1>Bienvenue ! Voulez-vous jouer ?</h1>
				<h3>Inscris ton pseudo :</h3>
 
			</div>
 
			<form id="monForm" action:"jeu.php" method="post">
		    	<p>
	            	<label for="form_pseudo">Pseudo : </label>
	            	<input type="text" id="form_pseudo" name="pseudo" required placeholder="Entrer votre pseudo"/>
	        	</p>
	        	<div class="left">
	        		<button type="submit" value="valider" style="width:300px style="height:80px">JOUER !</button>
			    </div>
			</form>
		</div>
</body>
</html>

et j'ai aussi essayé ceci en ligne 22 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit" value="valider" style="width:300px, height:80px">JOUER !</button>

et ce qui est bizare c'est que lorsque j'écris height tout seul ca fonctionne bien pour la hauteur du bouton comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit" value="valider" style="height:80px">JOUER !</button>

J'ai aussi essayé ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit" value="valider" style="height:300px" "width:300px">JOUER !</button>

puis cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit" value="valider" style="height:300px", "width:300px">JOUER !</button>

mais sans succès !
Merci !

**francky74** · 19/10/2014, 22h21

Je viens de trouver la solution :

J'ai décris une classe pour ce bouton, et j'ai renseigné la classe dans le css ...
ligne 22 du fichier 'index.html' :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button class="bouton" type="submit" value="valider">JOUER !</button>

style.css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.bouton{
	height:300px;
	width:300px;
}

Voilà !

Colorer un fond avec display et taille bouton

CSS

Discussions similaires

Partager

Partager