Discussion :

[mouls22]

Bonjour, je cherche de l'aide pour ma barre de recherche (contenant un bouton de saisie vocale), qui refuse de s'aligner avec les autres <select>:


==>L'objectif c'est de les aligner les 3 et lorsqu'on réduit la fenêtre (responsive), les éléments à l'intérieur se superposent.

De plus en réduisant la fenêtre, elle devient moins esthétique:
.
Lorsque les width étaient à 100%, elle prenait tout l'espace, j'ai dû donc les convertir en Px pour arriver au résultat ci-dessus.

Voici le 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
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
53
54
55
56
57
/*barre de recherhe*/
.search_box{
  width: 100%;
  float: left;
  background-color: #ffffff;
  height: auto;
  padding: 60px 20px;
  top: -125px;
  position: relative;
  box-shadow: 0px 0px 8px 0px;
}
 
.email_boton{
  width: 300px;
  float: left;
  margin-left: 30px;
  color: #b2b1b1;
  border: 1px solid orange;
  padding: 10px 15px;
  font-size: 14pt;
}
 
.search_bt{
  width: 150px;
  margin-left: 20px;
  float: left;
  color: #ffffff;
  background-color: orange;
  font-size: 14pt;
  border: 0px;
  height: 55px;
}
 
 
 
.search_bt:hover{
  background: #ff5722;
 }
 
 
 
@media (min-width: 768px) and (max-width: 991px) {
  .search_box { padding: 20px 20px; top: -164px; }
}
 
@media (min-width: 576px) and (max-width: 767px) { 
  .email_boton { font-size: 11pt; padding: 11px 11px;}
}
 
@media (max-width: 575px) {
  .email_boton { margin-top: 20px;}
.search_bt { width: 100%; margin-top: 20px;  }
.read_bt { width: 55%; font-size: 13pt; }
.search_box { margin-top: 20px;}
.search_box { padding: 10px 20px; }
 
}

Le code PHP/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
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<div class="containersearch">
<form action="recherche.php" method="GET" id="search-form">
 
<div class="search_box">
			<div class="rowsearch">
				<div class="col-sm-3">
					<div class="form-group">
                        <input type="text" class="email_boton" id="searchjs" placeholder=<?php echo $lang['placeholder'];?> name="q">
                        <button type="button"><i class="fas fa-microphone"></i></button>
                    </div>
				</div>
				<div class="col-sm-3">
					<div class="form-group">
          <select name="categorie" class="email_boton">
 
<option value="" disabled selected><?php echo $lang['categorie'];?></option>
<?php
// 1- on récupère les catégories principales
$categories = getCategories( 0 );       // 0 : catégories principales (niveau 0)
 
foreach($categories as $C)
{
// 2- on récupère les sous-catégories de CETTE catégorie
$sous_categories = getCategories( $C['id'] ); // (sous-)catégories dont l'id_parent est $C['id']
 
// Si il n'y a pas de sous-catégories
if( empty($sous_categories) )
{
echo "  <option value='".$C['id']."'>".$C['nom']."</option>"."\n"; // "\n" : passage à la ligne dans le code (lisibilité du code)
}
// Sinon (il y a des sous-catégories)
else
{
echo "  <optgroup label ='".$C['nom']."'> "."\n";
 
// 3 - affichage des sous-catégories
foreach($sous_categories as $SC)
{
echo "          <option value='".$SC['id']."'>".$SC['nom']."</option>"."\n";
}
 
echo "  </optgroup>";
}
}
?>
</select>
                    </div>
				</div>
				<div class="col-sm-3">
					<div class="form-group">
 
 
          <select name="villes" class="email_boton">
   <option value="" disabled selected><?php echo $lang['ville'];?></option>
   <?php  foreach($villesm as $v){
 
 
 
echo "<option value='".$v['id']."'>".$v['ville']."</option>";
 
  
}
?>
 
</select>
                    </div>
				</div>
				<div class="col-sm-3">
					<div class="form-group">
          <button class="search_bt"><?php echo $lang['rechercher'];?></button>
                    </div>
 
 
</div>
</div>
</form>
</div>

[Sparky95]

Bonjour,
Concernant votre CSS employez vous Bootstrap?
êtes vous occupé de vous en détacher?
Cela ne serra pas trop dure de résoudre le layout l'important est de commencer à s'amuser avec l'inspecteur d'élément.
Cela vous permettra plus facile de détecter d'où le problème au niveau CSS provient.

Ajout:
SI Boostrap il y a

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
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
 
 
    <style>
        .container-search{
            padding: 40px;
            box-shadow:  0 0 8px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <form action="search.php" method="get" id="search-form">
 
 
                <div class="row row-search">
 
 
                    <!-- block 1 -->
                    <div class="col-sm">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control border-warning" placeholder="placeholder">
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-outline-warning"><i class="fas fa-microphone"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
 
 
                    <!-- block 2 -->
                    <div class="col-sm">
                        <div class="form-group">
                            <select name="categorie" class="form-control border-warning">
                                <option value="" disabled selected>cathegories</option>
                            </select>
                        </div>
                    </div>
 
 
                    <!-- block 2 -->
                    <div class="col-sm">
                        <div class="form-group">
                            <select name="villes" class="form-control border-warning">
                                <option value="" disabled selected>cities</option>
                            </select>
                        </div>
                    </div>
 
 
                    <!-- block 4 -->
                    <div class="col-sm-auto">
                        <div class="form-group">
                            <button class="btn btn-warning rounded-0">search</button>
                        </div>
                    </div>
                </div>
 
 
        </form>
    </div>
</body>
</html>

Voici à priori ce que vous cherchez à faire.
Il ne vous restes plus qu'a rajouter vos classes et la partie PHP si cela vous convient.