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 /
position: relative;
width: 100%;
}
position: relative;
margin: 0;
padding: 0;
box-sizing:border-box;
list-style: none;
z-index:1;
}
width: 100%;
background:#FFA500;/orange/
font-weight: bold;
}
display: block;
color:#873600;/dark orange/
padding: 20px 30px;
position: relative;
text-decoration: none;
height:100%;
}
/ --------------- /
/ MENU : niveau 1 /
color: white;
}
/ --------------- /
/ MENU : niveau 2 /
color:white;
background:#f4d03f;/jaune-orange/
}
padding: 15px 30px;
font-size: 10px bold;
color:white;/dark orange/
}
/ --------------- /
/ HOVER : afficher/masquer les SOUS-MENUS/
display: none; /on masque le SOUS-MENU/
}
display: block; /on affiche le SOUS-MENU/
}
color:#21618c;/bleu/
background: silver;
}
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) {
display: -webkit-flex;
display: flex;}
/ niveau 1 /
-webkit-flex: 1 1 1%; /* astuce : 1% pour même largeur */
flex: 1 1 1%;}
}
/ niveau 2 /
position: absolute;
width: 200%;}
}
/ ------------------------------- /
/ PHONE : menu vertical /
@media screen and (max-width: 768px) {
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 /
display: none;
position: absolute;
left: -1px;
width: 100%;
margin: 0;
padding: 0;
border: inherit;
background: #FFF;}
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>
"
Hello !
Peux tu reformater ton code stp ? Histoire qu'on y comprenne quelque chose ? :)
Merci à toi
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é :/)
Le code php:
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.