Kevin Kevin - 29 days ago 8
CSS Question

Content positioning not working

Hello all i'm working on a website where i want content inside the body tag in a div.

I made the div inside the body but the result is this:

enter image description here

notice how the content goes inside the slider. I want this to be placed after the slider.

Im using bootstrap.

Here's my code:



header {} .carousel {
position: absolute;
top: 0;
height: 50%;
}
a.navbar-brand {
font-family: 'Pacifico', cursive;
text-align: center;
}
nav.navbar.navbar-inverse {
border-radius: 0;
background-color: rgba(255, 255, 255, 0.8);
border: none;
margin-bottom: 0;
z-index: 100;
top: 0;
}
nav.navbar.navbar-inverse a {
color: rgb(232, 192, 163);
}
nav.navbar.navbar-inverse a:hover {
background-color: rgb(232, 192, 163);
transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
background-color: rgb(232, 192, 163);
}
.footer-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: ;
text-align: center;
color: black;
background-color: white;
z-index: 100;
}
.footer-bottom a {
color: rgb(232, 192, 163);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">


<header>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href="#">Beauty Salon Lisa</a>
<br/>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Page 1</a>
</li>
<li><a href="#">Page 2</a>
</li>
<li><a href="#">Page 3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
</ul>
</div>
</div>
</nav>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">

<div class="item active">
<img src="resources/header.jpg" alt="Chania">
</div>

<div class="item">
<img src="resources/header.jpg" alt="Chania">
</div>

<div class="item">
<img src="resources/header.jpg" alt="Chania">
</div>

<div class="item">
<img src="resources/header.jpg" alt="Chania">
</div>

</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>


</div>

</header>


<div class="row">
<div class="col-md-4">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#"></a>
</p>
</div>
<div class="col-md-4">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#"></a>
</p>
</div>
<div class="col-md-4">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#"></a>
</p>
</div>
</div>



<div class="footer-bottom">

<div class="container">


<div class="row">

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

<div class="copyright">

Copyright Beeldmateriaal: Maria Galland©, Neoderma ©

</div>

</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

<div class="design">

<a href="#">Neem contact op </a> | <a target="_blank" href="#">Maak direct een afspraak</a>

</div>

</div>

</div>

</div>

</div>





I decided to create a fiddle, but for some reason the result is good when i use jsfiddle. I didn't change anything its the same code with a different output.

https://jsfiddle.net/xyvvf56b/

Answer

Change the position of carousel to relative:

header {} .carousel {
  position: relative;
  top: 0;
  height: 50%;
}
Comments