The Slides is behind navigation element. I am just getting started with hmtl and css and I am wondering how to keep separated. What I am trying to achieve is no matter how wide the navigation is the body will adjust to the left but will not go behind it. Any advice will be appreciated Thanks!
The css for the 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 for 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 for 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>© 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="http://ift.tt/1WV0d7h"
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="http://ift.tt/2m61cFe"
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>
Aucun commentaire:
Enregistrer un commentaire