0
J'ai construit avec SO aider une mise en page HTML HTML Grid/Flexbox compaqué avec assez progrès. Mais maintenant, j'ai un problème avec l'affichage d'un div additionnel nommé mobile_nav.Afficher HTML DIV entre deux autres DIVs
Il devrait être activé lorsque l'utilisateur clique sur SWITCH (je peux google, donc pas partie de la question) et été affichée entre DIV <div class="section site-menu"> et DIV <div class="section site-header"> (ce qui est ce que je veux et qui ne fonctionne pas). Donc, mieux l'appeler comme la navigation mobile.
Quelqu'un peut-il voir ce qui ne va pas avec?
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.site-wrapper {
position: relative;
display: grid;
grid-template-columns: 1fr;
}
.site-menu {
background-color: #000;
color: #fff;
position: absolute;
/* padding: 8px 20px 9px; */
width: 100%;
z-index: 1;
}
.hero {
background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
background-size: cover;
background-position: center;
width: 100wh;
height: 100vh;
display: flex;
}
.hero-content {
background-color: #000;
color: #fff;
display: block;
align-items: center;
justify-content: center;
text-align: center;
flex-directon: column;
margin: auto;
}
.bottom-right {
position: absolute;
right: 0;
margin-top: -1.2em;
background: black;
color: white;
}
#nav,
#left_side,
#top_nav,
#bottom_nav {
display: flex;
}
#nav {
border-bottom: 1px solid grey;
}
#title {
margin-left: 10px;
}
#menu_switch {
margin-right: 10px;
}
#left_side {
flex-direction: column;
width: 100%;
}
#top_nav {
display: flex;
justify-content: flex-end;
height: 60px;
border-bottom: 1px solid grey;
align-items: center;
}
.left {
margin-right: auto;
}
#bottom_nav {
align-items: center;
height: 38px;
}
.nav_item {
padding: 5px;
}
.nav_item:first-child {
background-color: red;
margin-left: 10px;
}
#logo {
background-color: black;
margin-left: 24px;
height: 100px;
}<div class="site-wrapper">
<div class="section site-menu">
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title" class="nav_item left">TITLE OF PAGE</div>
<div id="menu_about" class="nav_item right">ABOUT</div>
<div id="menu_signup" class="nav_item right">SIGN UP</div>
<div id="menu_follow" class="right nav_item">FOLLOW</div>
<div id="menu_switch" class="right nav_item">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">AZURE</div>
<div class="nav_item">SHAREPOINT</div>
<div class="nav_item">BI & DWH</div>
<div class="nav_item">.NET DEVELOPMENT</div>
<div class="nav_item">MOBILE DEVELOPMENT</div>
<div class="nav_item">WORDPRESS</div>
<div class="nav_item">NOTES</div>
</div>
</div>
</div>
</div>
<div class="section mobile_nav">
<div>dlfdh afj hdslf</div>
<div>bla bla bla</div>
</div>
<div class="section site-header">
<div class="hero">
<div class="hero-content">
<h1>If you can dream it, you can do it...</h1>
<p class="subhead">lets do it !</p>
</div>
</div>
<div class="bottom-right">
<span>This text should be positioned at the bottom right of the Hero Image</span>
</div>
</div>
<div class="section undefined">
<div class="undefined-content">
<p>Lots of content will go in here</p>
</div>
</div>
<div class="section site-footer">Footer</div>
</div>
Votre div 'mobile_nav' est sous votre div' site-menu'. Réglez simplement 'z-index' sur' 2' et vous verrez votre texte. En outre, si vous souhaitez activer dynamiquement certains éléments, vous pouvez utiliser au moins les requêtes JavaScript ou multimédia (https://www.w3schools.com/css/css3_mediaqueries_ex.asp) –
En général oui, lorsque je définis 'z-index: 2' je peux voir le texte. Mais c'est placé au-dessus de la navigation. Je veux l'avoir entre la navigation et l'image du héros. – 9Lx
Eh bien là, vous avez juste besoin de mettre l'attribut 'position' de' .site-menu' à 'relative' –