26664 sujets

CSS et mise en forme, CSS3

Bonjour,
Avant toute chose bravo pour ce super forum ! Smiley smile

Je débute en web et je rencontre un problème inréglable pour moi. J'ai un menu avec quatre boutons horizontaux alignés. L'un d'entre eux possède un sous menu avec deux liens (construit avec une sous-liste). Mon menu étant en footer, j'ai essayé de ruser pour placer le sous menu au dessus du bouton avec un "top: -13em;". Cependant, une barre de scroll vertical apparaît, comme si mon sous-menu était encore en bas et allongeait donc la page. Je n'arrive pas à dire à mon code d'ignorer en quelque sorte cet espace.. Je précise que mon footer n'est pas trop grand, il fait la bonne taille et est fixé en bas de page.

Voici la partie html du menu :


    <nav>
    <footer>
        <div onclick="window.location.href='./Pages_libres/3_inscription.html'"><i id="arrow_left"></i></div>
        <ul class="niveau1">
        <li><button class="menu" onclick="window.location.href='./accueil.html'">Accueil</button></li>
        <li><button class="menu" onclick="window.location.href='./Page_imposée/Livre_Petit/livre_v2.xhtml'">Partie imposée</button></li>
        <li><button class="menu" id="presentation" onclick="window.location.href='./Pages_libres/1_presentation.html'">Présentation</button><ul class="sous_menu"><li><a href="./Pages_libres/la_mission.html">La mission</a></li><li><a href="./Pages_libres/videos.html">Vidéos</a></li></ul></li>
        <li><button class="menu" onclick="window.location.href='./Pages_libres/2_galerie.html'">Galerie</button></li>
        <li><button class="menu" onclick="window.location.href='./Pages_libres/3_inscription.html'">Inscription</button></li>
        </ul>
        <div onclick="window.location.href='./Page_imposée/Livre_Petit/livre_v2.xhtml'"><i id="arrow"></i></div>
    </footer>
    </nav>


Et la partie CSS (désolé c 'est le bazar un peu) :


_header {background-color: #505359}
_section {background-color: green;}
_footer {background-color: black;}

html:hover{cursor: default}

/*Idée couleur : #061630  */

@keyframes fadeIn {
  0%{
    opacity: 0.4;
  }
  100%{
    opacity: 1;
  }
}

body {
  display: flex;
  flex-direction: column;
  overflow: auto;
  animation: fadeIn 4s ease;
}

/* Header */

header {
  display: flex;
  justify-content: center;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 1.1em;
  font-style: italic;
  padding: 0.5em;
  color: white;
}

div>a>img {
  height: 40px;
  position: absolute;
  left: 1600px;
  padding: 0px 30px;
  top: 5px;
}

/*Section*/

#video {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-content: space-around;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 1.3em;
  height: 15em;
  color: white;
  margin-top: 5em;
}

a {
  color: white;
}

.accueil {
  display: flex;
  justify-content: center;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 2em;
  color: white;
}

.accueil_subtitle {
  display: flex;
  justify-content: center;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 1.5em;
  color: white;
}

/*Footer*/

footer {
  display: flex;
  height: 10em;
  margin-top: 15em;
}

.niveau1 {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  width: 100%;
}

.menu {
  margin: 2em;
  color: white;
  background-color: transparent;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 1.5em;
  cursor: pointer;
  transition: 0.6s;
  border-style: solid;
  border-color: white;
  height: 3em;
  width: 8em;
}

.sous_menu {
    color: white;
    position: relative;
    top: -13em;
    list-style-image: url(../Images/icon.png);
}

.sous_menu>li>a {
    text-decoration: none;
}

.sous_menu_liste {
    list-style-type: none;
    list-style-image: url(../Images/icon.png);
}

#arrow {
  height: 2em;
  width: 2em;
  margin: 60px;
  transition: 0.6s;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  cursor: pointer;
  border: solid white;
  border-width: 0 3px 3px 0px;
  display: flex;
  padding: 3px;
}
#arrow_left {

  height: 2em;
  width: 2em;
  margin: 60px;
  transition: 0.6s;
  transform: rotate(45deg);
  -webkit-transform: rotate(133deg);
  cursor: pointer;
  border: solid white;
  border-width: 0 3px 3px 0px;
  display: flex;
  padding: 3px;
}

#arrow:hover {opacity: 1;height: 3em;width: 3em;margin: 55px}
#arrow_left:hover {opacity: 1;height: 3em;width: 3em;margin: 55px}

@media only screen and (min-width: 1601px) {
    .menu:hover {background-color: #232323;height: 3.5em;width: 8.5em;margin: 35px;}
    .sous_menu>li:hover {font-size: 1.2em;transition: 1s;}
    .sous_menu>li{margin: 0.5em;}
}

@media only screen and (max-width: 1600px) {
    .menu {
        margin: 0.3em;
    }
    .menu:hover {background-color: #232323;height: 3.1em;width: 8.1em;}
    .sous_menu>li:hover {font-size: 1.2em;transition: 1s;}
    .sous_menu>li{margin: 0.5em;}
    .sous_menu {top: 0em;}
    footer {
        margin-top: 0em;
    }
}

@media only screen and (max-width: 1020px) {
    .sous_menu {
        top: 0em;
    }
    .sous_menu>li:hover{font-size:1.1em;transition: 1s;}
    .sous_menu>li{margin: 0em;}
}


Si vous pouvez m'aider... Merci d'avance et bonne soirée ! Smiley smile
Modifié par Hadrons (07 Dec 2018 - 21:08)
Et l'eau,

Je te réponds rapidement (j'ai pas vraiment le temps).
Pourquoi utilises tu des <button> avec du JS ? N'est il pas plus judicieux d'utiliser des <a> ? Comment veux tu que ton sous menu fonctionne puisque ton parent renvoie vers une autre url ? Pourquoi <i> ? C'est quoi cette manie d'utiliser cet élément pour un autre contexte (ce n'est pas parce que les autres font ainsi que c'est une bonne pratique....) ? Smiley ohwell
Modifié par niuxe (10 Dec 2018 - 12:12)