L'élément continue de se placer derrière l'autre élément

Les diapositives se trouvent derrière l'élément de navigation. Je commence juste avec hmtl et css et je me demande comment rester séparé. Ce que j'essaye de réaliser est n'importe quelle largeur la navigation est le corps s'ajustera à la gauche mais n'ira pas derrière elle. Tout conseil sera apprécié Merci! L'élément continue de se placer derrière l'autre élément

Le code CSS pour la page

body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
} 

.body-content { 
    transition: margin-left .5s; 
} 

input, 
select, 
textarea { 
    max-width: 280px; 
} 

.carousel-caption p { 
    font-size: 20px; 
    line-height: 1.4; 
} 

.carousel-inner .item img[src$=".svg"] { 
}

Navigation css pour la page

.sidenav { 
    margin-right: 20px; 
    float: left; 
    height: 100%; 
    width: 250px; 
    position: fixed; 
    z-index:1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s; 
} 

    .sidenav a { 
     padding: 8px 8px 8px 32px; 
     text-decoration: none; 
     font-size: 25px; 
     color: #818181; 
     display: block; 
     transition: 0.3s 
    } 

     .sidenav a:hover, .offcanvas a:focus { 
      color: #f1f1f1; 
     } 

    .sidenav .closebtn { 
     position: absolute; 
     top: 0; 
     right: 25px; 
     font-size: 36px; 
     margin-left: 50px; 
    } 

@media screen and (max-height: 450px) { 
    .sidenav { 
     padding-top: 60px; 
    } 

     .sidenav a { 
      font-size: 18px; 
     } 
} 

@media screen and (max-width: 767px) { 
    /* Hide captions */ 
    .carousel-caption { 
     display: none; 
    } 
}

HTML pour la page

<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Computer Repair</a> 
    </nav> 
    <section id="sideNavigation" class="sidenav"> 
     <a asp-area="" asp-controller="Home" asp-action="Index">Home</a> 
     <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a> 
     <a asp-area="" asp-controller="Home" asp-action="About">About</a> 
     <a id="btnShowHide">Close</a> 
    </section> 
    <section id="main" class="body-content"> 
      @RenderBody() 
      <hr /> 
      <footer> 
       <p>&copy; 2017 - Test</p> 
      </footer> 
    </section> 

     <environment names="Development"> 
      <script src="~/lib/jquery/dist/jquery.js"></script> 
      <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
      <script src="~/js/site.js" asp-append-version="true"></script> 
     </environment> 
     <environment names="Staging,Production"> 
      <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" 
        asp-fallback-src="~/lib/jquery/dist/jquery.min.js" 
        asp-fallback-test="window.jQuery" 
        crossorigin="anonymous" 
        integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk"> 
      </script> 
      <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js" 
        asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" 
        asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" 
        crossorigin="anonymous" 
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"> 
      </script> 
      <script src="~/js/site.min.js" asp-append-version="true"></script> 
     </environment> 
     @RenderSection("Scripts", required: false) 
</body>

Source

2017-02-28 David Wruck

S'il vous plaît mettre à jour votre question. Ayez votre code source HTML et css. Nous ne pouvons pas vous aider de cette façon. – AHBagheri

s'il vous plaît partager votre code HTML et CSS? –

J'ai accidentellement posté une question quand j'ajoutais css et html. –

position fixe est toujours calculer (haut en bas à droite -left) au navigateur, vous devez aussi ajouter margin-left à la classe body-content

.body-content{ 
 
    margin-left: 250px; 
 
}

laissez-moi savoir si cela ne fonctionne.

Source

2017-02-28 06:56:12

Cela fonctionne dans le fait qu'il aligne mon contenu sur le côté de la navigation, mais quand je raccourcir mon nav, il ne va pas suivre. –

Ce n'est pas mal car je peux utiliser javascript mais je me demandais s'il y avait une meilleure façon de rendre le contenu principal plus malfaisant. –

@DavidWruck si vous voulez une largeur dynamique pour le contenu (et le soutien de l'ancien navigateur) son ok pour utiliser javascript pour calculer la largeur lorsque l'utilisateur redimensionner leur navigateur –

ok Je crois que cela vous aiderait. la largeur de votre sidenav est 250px de façon à donner la largeur panneau coulissant ou le contenu à droite de votre corps comme

width:calc(100% - 250px); 
float:right;

Source

2017-02-28 07:06:52

L'élément continue de se placer derrière l'autre élément

Répondre

Questions connexes