18041 sujets

Questions générales et questions de débutants

[Résolu] Problème positionnement css

Bonjour à tous,

Voilà je rencontre un petit problème d'alignement avec des éléments <button> que j'ai stylés . les boutons avec 2 lignes de textes sont décalés par rapport aux autres . Quelqu-un aurait il une solution ?
merci par avance

le html :
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link href="test.css" rel="stylesheet">
<title>test</title>
</head>

<body>
<br>
<button type="submit" onclick="window.open('http:www.google.com')">CAFE-BAR<br>RESTAURANT</button>
<button type="button" onclick="window.open('http:www.google.com')">BOUCHERIE</button>
<button type="button" onclick="window.open('http:www.google.com')">BOULANGERIE</button>
<button type="button" onclick="window.open('http:www.google.com')">FLEURISTE</button>
<button type="button" onclick="window.open('http:www.google.com')">BANQUE<br>ASSURANCE</button>
<button type="button" onclick="window.open('http:www.google.com')">COIFFURE</button>

</body>

le css :
utton
{
display: inline;
background-color: silver;
width: 170px;
height: 90px;
font-size: 20px;

}

button:hover
{
background-color: grey;
}
Salut Guipeyts,
ce qu'il faut savoir lorsque l'on débute au css, c'est que seul {display:inline-block} peut recevoir width et height, n'imposant pas le "retour automatique à la ligne" (et donc différent de {display:block}). Mais <button> échappe à cette règle (!).

Petite erreur (de frappe au clavier) : tu as écrit utton plutôt d'écrire button, évidemment ...

<br> doit s'écrire de préférence <br />

Ce sera judicieux de parcourir ceci pour t'assurer de ta page en html5 :
http://www.w3schools.com/tags/tag_button.asp
ou ceci (en français, et plus démonstratif) :
http://41mag.fr/liste-des-balises-html5/balise-button-html5

Entretemps ta solution (quoi qu'étrange !) sera :
button{vertical-align:top}
upload/59366-button5.jpg 
button{vertical-align:bottom}
upload/59366-button6.jpg 
button{vertical-align:middle}
upload/59366-button8.jpg

Sans invoquer de vertical-align, le positionnement "chaotique" justifiait ton topique :
upload/59366-button9.jpg
Modifié par pictural (19 Sep 2015 - 00:06)
Merci Pictural

tout d'abord pour tes conseils et ensuite pour ta solution à mon problème effectivement le vertical-align corrige bien mon problème
Effectivement je débute en css et donc je suis pas au top sur les régles ...
Euh juste pour infos, pourquoi tu parles de" solution étrange" ?
guipeyts a écrit :
(...) pourquoi tu parles de" solution étrange" ?
Ben parce qu'on aurait pu penser qu'elle n'agisse pas sur ce qui lui est extérieur (notamment sur les textes "et" que j'ai tenu à faire figurer).

Mais moi-même je n'ai peut-être pas tout compris de la logique de <button> ...
Modifié par pictural (19 Sep 2015 - 13:25)
Sujet clos
Aller à