Bonjour/Bonsoir,
Je me tourne vers le forum pour que quelqu'un puisse trouver mon problème. Je réalise un site web de vente factice dans un projet d'iut. Les langages utilisés ne peuvent être que de l'html/css. Mon problème est le suivant : J'ai un menu dans mon header, créé grâce aux div et au display flex. Tout se passait bien jusqu'à l'implémentation d'un sous menu. En effet malgré une class spécifique, mes sous menu ne veulent pas se ranger en colonne sous le div du menu parent, ils se mettent soit sur le côté ou sur le div parent, tout dépend de la valeur de "position" que j'attribue.
Pour mieux comprendre le problème j'ai temporairement hébergé le site ici : https://mumulesang.000webhostapp.com/
Ici mon code html (je vous raccourci le lorem ipsum pour plus de visibilité):
et le css :
Je vous remercie d'avance pour votre aide.
Antoine.
Modifié par Healthpower (14 Oct 2017 - 15:35)
Je me tourne vers le forum pour que quelqu'un puisse trouver mon problème. Je réalise un site web de vente factice dans un projet d'iut. Les langages utilisés ne peuvent être que de l'html/css. Mon problème est le suivant : J'ai un menu dans mon header, créé grâce aux div et au display flex. Tout se passait bien jusqu'à l'implémentation d'un sous menu. En effet malgré une class spécifique, mes sous menu ne veulent pas se ranger en colonne sous le div du menu parent, ils se mettent soit sur le côté ou sur le div parent, tout dépend de la valeur de "position" que j'attribue.
Pour mieux comprendre le problème j'ai temporairement hébergé le site ici : https://mumulesang.000webhostapp.com/
Ici mon code html (je vous raccourci le lorem ipsum pour plus de visibilité):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/boutique.css" />
<title>Hoverboard !</title>
</head>
<body>
<header>
<nav>
<div>
<div class="menu">
<a href="produit.html">Shop</a>
</div>
<div class="menu">
<a href="Equipe.html">Equipe</a>
</div>
<div class="menu">
<a href="presse.html">Presse</a>
</div>
<div id="logo">
<a href="index.html"><img src="image/logo.png" alt="logo"></a>
</div>
<div class="menu">
<a href="contact.html">Contact</a>
</div>
<div class="menu">
<a href="nousrejoindre.html">Nous rejoindre ?</a>
<div class="sousmenu">
<a href="Metier1.html">Métier 1</a>
</div>
<div class="sousmenu">
<a href="Metier2.html">Métier 2</a>
</div>
<div class="sousmenu">
<a href="Metier3.html">Métier 3</a>
</div>
</div>
</div>
</nav>
</header>
<main>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante diam, pellentesque vitae turpis eu, consequat hendrerit tortor. Sed malesuada venenatis lorem ut scelerisque. Curabitur commodo ligula sit amet odio convallis, nec pretium lacus commodo. Vestibulum non diam consequat, cursus tellus non, volutpat massa. Etiam mauris eros, tempor id dictum ornare, semper a tellus. Proin at vehicula tellus, et varius nisi. Maecenas consequat felis sit amet nibh euismod tincidunt.
Praesent convallis dolor et condimentum posuere.</a>
</main>
<footer>
<div>
<a href="FAQ.html"> F.A.Q </a>
<a href="rejoindre.html"> Nous rejoindre </a>
</div>
</footer>
</body>
</html>
et le css :
@font-face
{
font-family: Boutique;
src: url(font/LemonMilklight.otf);
}
@font-face
{
font-family: Walk;
src: url(font/Walk.ttf);
}
@font-face
{
font-family: hover;
src: url(font/Dopestyle.ttf);
}
header
{
height: 8%;
position: fixed;
right: 0px;
left: 0px;
top: 0px;
background-color: beige;
display: flex;
align-items: center;
border-bottom: 2px solid red;
}
nav
{
width: 100%;
text-align: center;
}
header div div
{
display: inline-flex;
padding: 5px;
flex-direction: row;
justify-content: space-around;
flex-grow: 1;
}
header div .menu a, header div .topmenu a
{
display: inline-block;
text-align: center;
color: black;
font-size: 200%;
margin: auto;
-webkit-transition: 0.5s ease-in-out;
text-shadow: 1px 1px black;
padding: 10px;
font-family: "Boutique", "Arial";
}
header div .menu a:hover, header div .topmenu:hover a
{
color: white;
-webkit-transform:scale(1.05);
}
header div #logo
{
margin-top: 10px;
}
header div #logo img
{
height: 59px;
width: 165px;
-webkit-transition: 1s ease-in-out;
}
header div #logo img:hover
{
transform: rotateY(360deg);
}
.sousmenu
{
display: none;
position: absolute;
}
.sousmenu a
{
color: black;
text-decoration: none;
display: flex;
flex-direction: column;
text-align: left;
}
.menu:hover .sousmenu
{
display: flex;
flex-direction: column;
}
/*.menu:hover > .sousmenu
{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
*/
main
{
margin-top: 110px;
margin-bottom: 10px;
}
main a, footer a
{
font-family: "Boutique", "Arial";
}
a:link
{
text-decoration: none;
}
Je vous remercie d'avance pour votre aide.
Antoine.
Modifié par Healthpower (14 Oct 2017 - 15:35)