Discussion :

[Ushuango]

bonjour,

voici direct mon html ( un formulaire classique )

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
 
<div class="researchform">
            <form class = "form">
                <div class="word">
                    <label for="requestfield">Entrez une recherche</label>
                    <input type="text" name="requestfield" id="requestfield" placeholder="artist/titre/album">
                </div>
                <div class="option">
                    <label for="field">Rechercher dans</label>
                    <select name="field" id="field"></select>
                </div>
                <button type="submit">Rechercher</button>
            </form>
            <p class="results">les résultats</p>
</div>

le researchform est en display: flex;mais je n'arrive pas à aligner le paragraphe d e résultats ( le <P> ) avec le input et le select du formulaire...
j'essaye un align-self sur l'élément paragraphe, mais aucune valeur ne donne le bon résultat !

Est-ce que je m'y prends bien ?

Merci et bonne soirée,
Laurent

[NoSmoking]

Bonjour,
sans le CSS que tu appliques difficile de t'aider !

Commence quand même par mettre un margin:0 à ton élément <p>.

[Ushuango]

bonjour, toujours très peu de temps , mais je réponds !

voici le css: ( je suis sur SASS ):

Code css :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}
header .researchform {
  display: flex;
  justify-content: center;
}
header .container {
  background-color: #d26767;
}
header .container h1 {
  text-align: center;
}
header .container form {
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .container form div {
  display: flex;
  flex-direction: column;
}
header .container form div label {
  padding-left: 6px;
}
header .container form div, header .container form button {
  margin-left: 3px;
  margin-right: 3px;
}
header .container form #wordfield {
  width: 15rem;
}
header .container form #requestfield {
  padding-left: 9px;
  width: 45rem;
}
header .container form button {
  font-size: 2rem;
  border: 0;
  border-radius: 5px;
  align-self: flex-end;
  background-color: #fff;
}
header .container .results {
  margin: 0;
  align-self: flex-end;
}

et tant qu'à faire, autant mettre tout mon header...:

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
 
<header>
        <div class="container">
            <h1>Muzic</h1>
            <div class="researchform">
                <form class = "musicform">
                    <div class="word">
                        <label for="requestfield">Entrez une recherche</label>
                        <input type="text" name="requestfield" id="requestfield" placeholder="artist/titre/album">
                    </div>
                    <div class="option">
                        <label for="field">Rechercher dans</label>
                        <select name="field" id="field"></select>
                    </div>
                    <button type="submit">Rechercher</button>
                </form>
                <p class="results">bonjour</p>
            </div>
 
        </div>
    </header>

le paragraphe result est rempli en javascript: une fois la réponse obtenue...je mets un mot au hasard pour tester.
Sinon, bien sûr , il faudra faire plus joli (comme d'habitude), mais après avoir résolu mon problème !!

[mathieu]

le formulaire a padding-bottom : 1rem;. enlevez le et mettez cet espace à l'élément ".container".

[Ushuango]

Et oui ! bien vu !
Je me doutais bien qu'il s'agissait d'une erreur dans ce genre (vu le faible décalage ), mais je ne regardais pas au bon endroit:
obsédé par ce paragraphe, je croyais que c'était lui le fautif !

Merci,

Laurent