-1
Hallo, ich arbeite an einer Website, wo ich Inhalt in der Body-Tag in einem div. Will.Inhalt Positionierung funktioniert nicht
machte ich die div im Inneren des Körpers, aber das Ergebnis ist folgendes:
Hinweis, wie der Inhalt im Inneren des Schiebers geht. Ich möchte, dass dies nach dem Schieberegler platziert wird.
Ich benutze Bootstrap.
Hier ist mein 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>ich beschlossen, eine Geige zu schaffen, aber aus irgendeinem Grund das Ergebnis ist gut, wenn ich jsfiddle verwenden. Ich habe nichts geändert, es ist der gleiche Code mit einer anderen Ausgabe.
https://jsfiddle.net/xyvvf56b/
das ist, weil Schieber 'position: absolute; 'try' Position: relativ 'als Antwort gegeben von @ El0din. Jsfiddle überschreibt einfach Ihre CSS mit seiner eigenen weniger Datei und daher ist es absolut positioniert. Siehe [hier] (http://i.imgur.com/F4d4BIG.jpg) – mkawa