1
Hallo Ich habe ein Problem mit der Position in der Navigationsleiste. Ich möchte, dass sich das Bild oben wie die Navigationsleiste ausdehnt, wenn Sie die schwarze Linie sehen, so dass es aussieht, als wäre sie zusammen. Das Karussell sollte näher an der Navigationsleiste liegen, damit zwischen Navbar und Karussell kein Platz ist.Twitter-bootstrap Banner und Bildposition
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
/*.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
*/
/*navbar colour*/
.navbar-default {
background-color: #177f5e;
border-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #000000;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #000000;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
}
/*bildspel*/
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
overflow:hidden;
}
.item.active img {
/*Hur lång bilden ska spelas*/
transition: transform 5000ms linear 0s;
transform: scale(1.05, 1.05);
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* scrollUp */
#scrollUp {
bottom: 20px;
right: 20px;
padding: 10px 20px;
background: #555;
color: #fff;
}
/*Google maps*/
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container" id="banner">
<img class="img-responsive center-block" src="http://puu.sh/ropPN/eb19c8f85b.jpg" alt="logo">
</div>
<!--Navigeringsfält.-->
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Om oss</a>
</li>
<li><a href="textiltryck.html">Textiltryck</a>
</li>
<li><a href="transfertryck.html">Transfertryck</a>
</li>
<li><a href="brodyr.html">Brodyr</a>
</li>
<li><a href="digitaltryck.html">Digitaltryck</a>
</li>
<li><a href="tampotryck.html">Tampotryck</a>
</li>
<li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Navigeringsfält slut.-->
<!--bildspel-->
<br>
<div class="container">
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner carousel-zoom">
<div class="active item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="lokal">
<div class="carousel-caption">
<h2>Vi har en kapacitet av ca. 2-300 tryck i timmen.</h2>
<a href="textiltryck.html" class="btn btn-info" role="button">Läs mer</a>
</div>
</div>
<div class="item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="tampotryck">
<div class="carousel-caption">
<h2>Tampotryck (pad printing på engelska) inkluderar tre komponenter.</h2>
<a href="tampotryck.html" class="btn btn-info" role="button">Läs mer</a>
</div>
</div>
<div class="item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="brodyr">
<div class="carousel-caption">
<h2>Man kan få upp till 15 olika färger i en och samma brodyr.</h2>
<a href="brodyr.html" class="btn btn-info" role="button">Läs mer</a>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
</div>
Vielen Dank! Sie haben mir sehr geholfen – user6860260