-2
Hallo Ich habe eine feste div, die links unten von meiner nav bar verbindet. Ich kann es nicht auf dem Karussell sehen. Bilder verstecken es irgendwelche Ideen ???Fixed div oben auf bootstrap Karussell bleibt versteckt
Wie bekomme ich dieses feste div auf dem Karussell schweben?
<div class="container-fluid topnav">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="callnow-btn">
<a href="tel:12178207597">Call Now (217) 820-7597</a>
</div>
</div>
</div>
</div>
jede Hilfe würde sehr geschätzt werden!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container" id="custom-nav">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="./" class="navbar-brand"></a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Gallery</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Careers</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div class="container-fluid topnav">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="callnow-btn">
<a href="tel:12178207597">Call Now (217) 820-7597</a>
</div>
</div>
</div>
</div>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<!-- Overlay -->
<div class="overlay"></div>
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<h1>We are creative</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<!-- Overlay -->
<div class="overlay"></div>
<div class="slide-2"></div>
<div class="hero">
<hgroup>
<h1>We are smart</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<!-- Overlay -->
<div class="overlay"></div>
<div class="slide-3"></div>
<div class="hero">
<hgroup>
<h1>We are amazing</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
/* Above Navbar */
.topnav {
top: 51px !important;
position: fixed;
background-color: #fff;
height: 30px;
width: 100%;
}
.callnow-btn {
border-bottom-right-radius: 10px;
font-family: Arial;
color: #Ef7800;
font-size: 14px;
background: #192F42;
padding: 5px 0px 5px 0px;
text-decoration: none;
width: 197px;
height: 35px;
}
.callnow-btn a {
border-bottom-right-radius: 10px;
font-family: Arial;
color: #Ef7800;
font-size: 14px;
background: #192F42;
padding: 5px 20px 5px 20px;
text-decoration: none;
width: 197px;
height: 35px;
}
.callnow-btn:hover a:hover{
text-decoration: none;
color: #008000;
}
.no-padding {
padding: 0px;
}
/* Custom Navbar */
#custom-nav { margin-left: 0px;}
.navbar-inverse {
background-color: #192F42;
}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #192F42}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #192F42}
.dropdown-menu { background-color: #192F42}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #192F42}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none;}
.navbar-inverse { border-color: #192F42}
.navbar-inverse .navbar-brand {
height: 50px;
width: 142px;
background: url(../images/brand.jpg) no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EF7800}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #EF7800}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
top: 51px;
position: relative;
height: 300px;
}
.fade-carousel .carousel-inner .item {
height: 300px;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 300px;
z-index: 3;
background-color: #080d15;
opacity: .7;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 300px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../images/carousel/znc-slider1.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../images/carousel/znc-slider2.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../images/carousel/znc-slider3.jpg);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
Fügen Sie bitte Ihren Code in Ihren SO-Post ein. –
Bitte verwenden Sie keine Snippet-Tools, die einen Login/Account erfordern. Es wird empfohlen, das Snippet-Tool von SO zu verwenden. ('<>' Knopf). –