Forum d'entraide PHPFrance

Bonjour à tous,

je viens chercher de l'aide à travers vous

j'ai inséré un menu à mon site, pas encore finalisé niveu esthetique mais il est exactement comme je le souhaitais.

En revanche, j'ai un grand espace sous le menu qui s'affiche lorsqu'il n'est pas déroulé, j'ai essayé pas mal de choses mais là, ça me dépasse.

Voici le code CSS
.stretchHolder {width:750px; height:50px; margin:30px auto 250px auto; position:relative; z-index:100; box-shadow:0 2px 2px rgba(0,0,0,0.8); font-family:arial, sans-serif;}
.stretchMenu {position:relative; z-index:100; width:750px; overflow:hidden;}
.stretchDrop {padding:0; margin:0; list-style:none; width:1150px; position:relative; z-index:1}
.stretchDrop > li.slide {float:left; width:150px;
-moz-transition: 0.25s 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.stretchDrop > li.last {width:470px; float:left;}
.stretchDrop > li > a {display:block; font-weight:bold; line-height:50px; padding-left:10px; color:#000; text-decoration:none; font-size:13px; text-shadow: 0 1px 1px #fff; border-left:1px solid #fff;}
.stretchDrop > li.slide > a {border-right:1px solid #000;}
.stretchDrop > li.p1 > a {background:#09c;}
.stretchDrop > li.p2 > a {background:#c90;}
.stretchDrop > li.p3 > a {background:#0c9;}
.stretchDrop > li.p4 > a {background:#9c0;}
.stretchDrop > li.p5 > a {background:#f6c;}

.stretchDrop > li.p1 > a,
.stretchDrop > li.p2 > a,
.stretchDrop > li.p3 > a,
.stretchDrop > li.p4 > a,
.stretchDrop > li.p5 > a {
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
-webkit-box-shadow:inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
-moz-box-shadow:inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
text-shadow: 0 1px 1px #fff;}

.stretchDrop > li > div {height:0; width:469px; overflow:hidden; position:relative; z-index:1; border-radius:0 0 20px 20px; margin-left:1px;
-moz-transition: height 0.25s;
-ms-transition: height 0.25s;
-o-transition: height 0.25s;
-webkit-transition: height 0.25s;
transition: height 0.25s;
}
.stretchDrop > li.p1 > div {background:#09c;}
.stretchDrop > li.p2 > div {background:#c90;}
.stretchDrop > li.p3 > div {background:#0c9;}
.stretchDrop > li.p4 > div {background:#9c0;}
.stretchDrop > li.p5 > div {background:#f6c;}

.stretchDrop > li.p1 > div,
.stretchDrop > li.p2 > div,
.stretchDrop > li.p3 > div,
.stretchDrop > li.p4 > div,
.stretchDrop > li.p5 > div {
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(900deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
}
.stretchDrop:hover {direction:ltr;}
.stretchDrop:hover > li.slide {width:70px;
-moz-transition: 0.25s 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.stretchDrop:hover > li.slide:hover {width:470px;
-moz-transition: 0.25s 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.stretchDrop:hover > li:hover > div {height:210px;
-moz-transition: 0.25s 0.5s;
-ms-transition: 0.25s 1s;
-o-transition: 0.25s 1s;
-webkit-transition: 0.25s 1s;
transition: 0.25s 1s;
}
.stretchDrop > li > div b {display:block; width:470px; height:50px; background:#888; margin-top:-50px; box-shadow:0 2px 5px rgba(0,0,0,0.8);}
.stretchDrop > li > div dl {width:110px; float:left; padding:5px 10px; margin:12px; font-weight:bold;}
.stretchDrop > li > div dl dt {padding-left:10px; margin-bottom:5px; font-size:13px; line-height:25px; border-bottom:1px dotted #000; text-shadow: 0 1px 1px #fff;}
.stretchDrop > li.p1 > div dl dt {color:#036;}
.stretchDrop > li.p2 > div dl dt {color:#630;}
.stretchDrop > li.p3 > div dl dt {color:#063;}
.stretchDrop > li.p4 > div dl dt {color:#360;}
.stretchDrop > li.p5 > div dl dt {color:#906;}
.stretchDrop > li > div dl dd {padding:0; margin:0;}
.stretchDrop > li > div dl dd a {display:block; color:#fff; font-size:11px; line-height:20px; text-decoration:none; padding-left:10px;}
.stretchDrop > li > div dl dd a:hover {color:#fff; background:rgba(0,0,0,0.3); border-radius:5px;}

#info .stretchDrop > li > div p {width:404px; height:30px; background:#eee; position:absolute; bottom:5px; left:12px; padding:0 20px; line-height:30px; font-size:12px; margin:0; border-radius:30px;}



En gros, ce que je voudrais, c'est que le menu soit juste placé au dessus du contenu et qu'il passe au dessus du contenu lorsque je le déroule...

Si vous pouviez m'éclairer, ça serait super.
Bonne journée et bon week-end à ceux qui verront mon message en rentrant du travail

Rebonjour,
j'ai réussi à supprimer cet écart qui me paraissait inutile et surtout pas beau.

Première ligne du code CSS, remplacer relative par absolute.

Maintenant, j'ai un autre problème, le menu n'est plus centré... (par rapport au reste de la page)

Je vais continuer les recherches mais si quelqu'un a la solution, je prends

Bonjour,

Difficile de voir d'où viens le soucis sans le code html correspondant.
Peux-tu nous montrer un exemple de ton problème en utilisant un site comme jsfiddle ou codepen (ou un autre site similaire) stp ?

Au passage, le sujet aurait plus sa place dans le forum HTML/CSS que PHP

Bingo !
j'ai ajouté sur la première ligne :
position:absolute; right: 50%; left: 50%; transform: translate(-50%,-50%);

Maintenant, tout est bien centré, sur PC, sur tablette mais pas sur téléphone

Je cherche encore mais avant, petite pause

Le problème initial (grand espace sous le menu) ne viendrait-il pas du margin-bottom à 250px sur la première ligne ?

Penses à la balise [ code ] pour mettre en valeur ton code