Header responsive,impossible!!

max30
Les bases HTML/CSS

Bonjour, je galère à rendre mon header entièrment responsive. Uniquement le menu dynamique est responsive.
Les div class=icons et li class= connexion et inscription ne peuvent pas s'inclure dans le navn ni le bouton dépôt annonce.

Comme vous pouvez le voir en photo:
[(https://imgur.com/a/raHm9GP)]

Objectifs:
1-Tout ajouter dans le header et le rendre complètement responsive avec la barre de recherche.
2-Ajouter la saisie vocale dans rectangle de la barre de recherche, qu'il ne dépasse pas des bordures.

Voici le code CSS:

"<head>
<meta charset="utf-8">
<style>
//photo header/

  html,

body {
margin: 0;
padding: 0;
}
/ ------------------------------- /
/ MENU /

menu {

position: relative;
width: 100%;

}

menu ul, menu li, menu li a {

position: relative;
margin: 0;
padding: 0;
box-sizing:border-box;
list-style: none;
z-index:1;
}

menu ul {

width: 100%;
background:#FFA500;/orange/
font-weight: bold;
}

menu ul li a {

display: block;
color:#873600;/dark orange/
padding: 20px 30px;
position: relative;
text-decoration: none;
height:100%;
}
/ --------------- /
/ MENU : niveau 1 /

menu nav > ul > li > a {

color: white;
}
/ --------------- /
/ MENU : niveau 2 /

menu ul ul {

color:white;
background:#f4d03f;/jaune-orange/
}

menu ul ul li > a {

padding: 15px 30px;
font-size: 10px bold;
color:white;/dark orange/
}

/ --------------- /
/ HOVER : afficher/masquer les SOUS-MENUS/

menu ul li > ul {

display: none; /on masque le SOUS-MENU/
}

menu ul li:hover > ul {

display: block; /on affiche le SOUS-MENU/
}

menu nav > ul > li.active > a, / MENU : niveau 1 ACTIF / menu ul li:hover > a {

color:#21618c;/bleu/
background: silver;
}

menu nav > ul > li.active > a:before, / MENU : niveau 1 ACTIF / menu nav > ul > li:hover > a:before {

position:absolute;
content:'';
display:block;
top:0; left:0;
width:100%;
height:5px;
background:#f4d03f;/jaune-orange/
}

/ ---------- responsive --------- /
/ DESKTOP : menu horizontal /
@media screen and (min-width: 769px) {

menu nav > ul { 
display: -webkit-flex;
display: flex;

}
/ niveau 1 /

menu nav > ul > li { 
-webkit-flex: 1 1 1%; /* astuce : 1% pour même largeur */
flex: 1 1 1%;

}

menu nav > ul > li > a {

}
/ niveau 2 /

menu nav > ul ul { 
position: absolute;
width: 200%;

}
}
/ ------------------------------- /
/ PHONE : menu vertical /
@media screen and (max-width: 768px) {

menu { 
width: 100%;
margin:0 auto;

}
}
/ ------------------------------- /
/ MENU burger /
nav input[type=checkbox],
nav label {
display:none;
}
@media screen and (max-width: 768px) {
/ input /
input#menu-mobile {
position: absolute;
/xxleft: -9999em;/
opacity:0; / invisible /
}
label[for="menu-mobile"] {
display: block;
text-indent: .25em;
background: #EEE;
border: 1px solid #CCC;
margin: 1px;
cursor: pointer;
height:48px;
line-height:48px;
}
label[for="menu-mobile"]:before {
content: "\2630";
display: block;
position: absolute;
top: 0;
right: 0;
width: 1em;
text-align: center;
text-indent: 0;
font-size: 1em;
font-weight: bold;
color: #069;
}
/ on traite la liste menu /

menu-mobile:not(:checked) ~ ul { 
display: none;
position: absolute;
left: -1px;
width: 100%;
margin: 0;
padding: 0;
border: inherit;
background: #FFF;

}

menu-mobile:checked ~[for="menu-mobile"]:before { 
content: "\2716";

}
}
.service{
display: inline-block;
margin-left: 80%;

}

a {
color: black;
text-decoration: none;
outline: none !important;
}

.submit_bt{
font-size: 14pt;
color: #ffffff;
background-color: #69c934;
border: 0px;
height: 50px;
padding: 0px 20px;
margin-top: 30px;
}
.submit_bt a:hover{ color: #000; }

.search_main{ width: 100%; float: right; }

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

"

<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"><span class="micro"><i class="fas fa-microphone"></i></span></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'] );

// Si il n'y a pas de sous-catégories
if( empty($sous_categories) )
{
echo " <option value='".$C['id']."'>".$C['nom']."</option>".";
}
// 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>

"

3 réponses

Arzou

Hello !
Peux tu reformater ton code stp ? Histoire qu'on y comprenne quelque chose ? :)

Merci à toi

popotte

Le mode code ne se fait pas avec des ", mais avec des backticks (AltGr+7), il en faut 3 en haut 3 en bas :p
(Faudrait que Grafikart ajoute une balise pour les blocs de code, c'est pas la première fois que je vois un message cassé :/)

<head>
<meta charset="utf-8">
<style>
//photo header/

  html,

body {
margin: 0;
padding: 0;
}
/ ------------------------------- /
/ MENU /
menu {

position: relative;
width: 100%;

}
menu ul, menu li, menu li a {

position: relative;
margin: 0;
padding: 0;
box-sizing:border-box;
list-style: none;
z-index:1;
}
menu ul {

width: 100%;
background:#FFA500;/orange/
font-weight: bold;
}
menu ul li a {

display: block;
color:#873600;/dark orange/
padding: 20px 30px;
position: relative;
text-decoration: none;
height:100%;
}
/ --------------- /
/ MENU : niveau 1 /
menu nav > ul > li > a {

color: white;
}
/ --------------- /
/ MENU : niveau 2 /
menu ul ul {

color:white;
background:#f4d03f;/jaune-orange/
}
menu ul ul li > a {

padding: 15px 30px;
font-size: 10px bold;
color:white;/dark orange/
}

/ --------------- /
/ HOVER : afficher/masquer les SOUS-MENUS/
menu ul li > ul {

display: none; /on masque le SOUS-MENU/
}
menu ul li:hover > ul {

display: block; /on affiche le SOUS-MENU/
}
menu nav > ul > li.active > a, / MENU : niveau 1 ACTIF / menu ul li:hover > a {

color:#21618c;/bleu/
background: silver;
}
menu nav > ul > li.active > a:before, / MENU : niveau 1 ACTIF / menu nav > ul > li:hover > a:before {

position:absolute;
content:'';
display:block;
top:0; left:0;
width:100%;
height:5px;
background:#f4d03f;/jaune-orange/
}

/ ---------- responsive --------- /
/ DESKTOP : menu horizontal /
@media screen and (min-width: 769px) {
menu nav > ul {

display: -webkit-flex;
display: flex;

}
/ niveau 1 /
menu nav > ul > li {

-webkit-flex: 1 1 1%; /* astuce : 1% pour même largeur */
flex: 1 1 1%;

}
menu nav > ul > li > a {

}
/ niveau 2 /
menu nav > ul ul {

position: absolute;
width: 200%;

}
}
/ ------------------------------- /
/ PHONE : menu vertical /
@media screen and (max-width: 768px) {
menu {

width: 100%;
margin:0 auto;

}
}
/ ------------------------------- /
/ MENU burger /
nav input[type=checkbox],
nav label {
display:none;
}
@media screen and (max-width: 768px) {
/ input /
input#menu-mobile {
position: absolute;
/xxleft: -9999em;/
opacity:0; / invisible /
}
label[for="menu-mobile"] {
display: block;
text-indent: .25em;
background: #EEE;
border: 1px solid #CCC;
margin: 1px;
cursor: pointer;
height:48px;
line-height:48px;
}
label[for="menu-mobile"]:before {
content: "\2630";
display: block;
position: absolute;
top: 0;
right: 0;
width: 1em;
text-align: center;
text-indent: 0;
font-size: 1em;
font-weight: bold;
color: #069;
}
/ on traite la liste menu /
menu-mobile:not(:checked) ~ ul {

display: none;
position: absolute;
left: -1px;
width: 100%;
margin: 0;
padding: 0;
border: inherit;
background: #FFF;

}
menu-mobile:checked ~[for="menu-mobile"]:before {

content: "\2716";

}
}
.service{
display: inline-block;
margin-left: 80%;

}

a {
color: black;
text-decoration: none;
outline: none !important;
}

.submit_bt{
font-size: 14pt;
color: #ffffff;
background-color: #69c934;
border: 0px;
height: 50px;
padding: 0px 20px;
margin-top: 30px;
}
.submit_bt a:hover{ color: #000; }

.search_main{ width: 100%; float: right; }

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

<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"><span class="micro"><i class="fas fa-microphone"></i></span></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'] );

                    // Si il n'y a pas de sous-catégories
                    if( empty($sous_categories) )
                    {
                    echo " <option value='".$C['id']."'>".$C['nom']."</option>".";
                    }
                    // 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>
            <!-- Te manque un </div> Ici... -->
      </div>
    </div>
  </form>
</div>
max30
Auteur

Bonjour Arzou, Bonjour Popotte :)
Concernant le formatage du code, je pense que Popotte vient de le faire,merci à lui.
C'est noté Popotte. En fait je suis nouveau sur le forum et c'était mon premier message.