This is my code below. When I resize the size of my window and navbar collapse. On dropdown of the menu, the contents appeared to be below carousel. How do I bring it to forward? here is my code:
html:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>APT - Aviation | Travel | Hospitality</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered">
<img src="images/apt-logo.gif">
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li class="dropdown">
Academy<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Training programs</li>
<li>APT - 360 training</li>
</ul>
</li>
<li class="dropdown">
Admission<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Admission guide</li>
<li>Apply now</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Placement<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Companies</li>
<li>Highlights</li>
</ul>
</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Our story</li>
<li>Training Methadology</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
and css:
body{
background: #f8f8f8;
}
.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 160px;
text-align: center;
background-color: transparent;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}
nav{
height: 100px;
}
.navbar{
border-bottom: none;
}
#media only screen and (max-width: 500px){
.navbar-brand-centered {
left: 30%;
}
}
.navbar-header button{
margin-top: 50px;
}
.nav{
margin-top: 25px;
}
#apply{
padding-left: 19px;
font-weight: 600;
color:#419044;
}
#apply:hover{
text-decoration: none;
}
I didn't look to long at your code but I did not see a z-index attribute anywhere. Did you try that? Place z-index: 1 in the css class you want to be on top.
Related
For my school I have to do a website with a video slider. I chose to work with bootstrap 4.0. So far I got a template from it and tried to put a video inside it on one of the sliders. Unfortunately the video won't be shown full. I would like to have it fitting in the slider. (and of course that in the left and in the right of the video will be only the arrows to slide right or left)
Right now it looks like that:
So in the width its full, but the height you cant see anything
what i would like to have is that:
it fits in the slider with his whole width and height. if you scale the window, the white blocks should get smaller
Here is the code I'm using:
/*!
* Start Bootstrap - Half Slider (https://startbootstrap.com/template-overviews/half-slider)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-half-slider/blob/master/LICENSE)
*/
#charset "UTF-8";
/* Body */
body {
width: 50%;
margin: auto;
}
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-item iframe {
margin-top: 55px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tales {}
.iframe {
max-height: 40% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Half Slider - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/half-slider.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Fact Attack</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<!--Carousel Wrapper-->
<div id="video-carousel-example2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#video-carousel-example2" data-slide-to="0" class="active"></li>
<li data-target="#video-carousel-example2" data-slide-to="1"></li>
<li data-target="#video-carousel-example2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="carousel-item active">
<!--Mask color-->
<div class="view">
<!--Video source-->
<div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class="mask rgba-indigo-light"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive text-dark">Light mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.First slide -->
<!-- Second slide -->
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<!--Video source-->
<div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class="mask rgba-indigo-light"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Super light mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.Second slide -->
<!-- Third slide -->
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<!--Video source-->
<div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class="mask rgba-indigo-light"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Strong mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.Third slide -->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--Carousel Wrapper-->
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1>Half Slider by Start Bootstrap</h1>
<p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the
<code>half-slider.css</code> file.
</p>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your Website 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Thank you for your help, and just tell me if you need to know something more :)
First you need to fix your layout. All the content of the body should be inside a container, row, and col-12.
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
All of the carousel related code should go inside the col-12. Doing so, the carousel's width is the same as that of the nav, and there are free space on both sides of it.
The controllers are positioned absolute. Two of their parents are positioned relative. If you do not have enough information on CSS positioning, read this post.
There are a couple of ways to get the controllers outside of the carousel.
Method 1
Put the two controllers code below the container.
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Put all the above code inside an another element with position-relative class.
<div class="position-relative">
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Check this pen
Method 2
Override the position property of carousel and the col-12 using the code below. They are relatively positioned.
.position-initial {
position: initial !important;
}
<div class="postion-relative">
<div class="container">
<div class="row">
<header class="col-12 position-initial">
<!--Carousel Wrapper-->
<div id="video-carousel-example2" class="carousel slide carousel-fade position-initial" data-ride="carousel">
</div>
</header>
</div>
</div>
</div>
Now, since the div with position-relative class has full width and the controllers are absolutely positioned, the controller are inside the full-width div.
Check this pen
There is an grey area (shown below in the image) right of the images. If I center the image inside the carousel, the grey area is evenly divided left and right of the image. Is there a way to remove this and make the carousel same size as the images.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.item {
max-height: 400px;
}
</style>
</head>
<body>
<!------------nav bar ---------------------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav navbar-nav">
<li>GALLERY</li>
<li>REFERENCES</li>
</ul>
</div>
</nav>
<!--------------Centering div --------------->
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
</div>
<div class="item">
<img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Extra space
Based on your images is 800px wide, this rule fixes that
#myCarousel {
margin: 0 auto;
max-width: 800px;
}
Stack snippet
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.item {
max-height: 400px;
}
#myCarousel {
margin: 0 auto;
max-width: 800px;
}
</style>
</head>
<body>
<!------------nav bar ---------------------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav navbar-nav">
<li>GALLERY</li>
<li>REFERENCES</li>
</ul>
</div>
</nav>
<!--------------Centering div --------------->
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
</div>
<div class="item">
<img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
One quick fix, add this css:
.carousel-control.right,
.carousel-control.left {
background: transparent!important;
}
The gray areas are background colors for the control buttons. Even if the image is aligned left, it is still there, it's just harder to see.
Check here
The navbar works properly in full screen, but when i make the window small the toggle options doesn´t show correctly.
Was wondering if anyone knew how to fix it.
here is the css of the navbar
.navbar {
border-radius: 0;
}
.navbar-new {
background-color: white;
height: 120px;
padding-left: 20px;
}
.navbar-new .navbar-brand,
.navbar-new .navbar-brand:hover,
.navbar-new .navbar-brand:focus {
color: #FFF;
}
.navbar-new .navbar-nav > li > a {
color: #FFF;
}
.navbar-new .navbar-nav > li > a:hover,
.navbar-new .navbar-nav > li > a:focus {
background-color: #fcf8e3;
}
.navbar-new .navbar-nav > .active > a,
.navbar-new .navbar-nav > .active > a:hover,
.navbar-new .navbar-nav > .active > a:focus {
color: #FFF;
background-color: #fcf8e3;
}
.navbar-new .navbar-text {
color: black;
}
.navbar-new .navbar-toggle {
border-color: #0FA6A1;
}
.navbar-new .navbar-toggle:hover,
.navbar-new .navbar-toggle:focus {
background-color: #fcf8e3;
}
.navbar-new .navbar-toggle .icon-bar {
background-color: #FFF;
}`enter code here`
.navbar-new .navbar-toggle .icon-bar {
background-color: #FFF;
}
And Here is the html file
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="footer, address, phone, icons" />
<title>IMC chile</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/index.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-new navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" style="color:black;" href="index.html"><img class="img-responsive" width="100%;" max-height="100px;" src="img/logo/logosmall.jpg" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div id="nav">
<ul class="nav navbar-nav">
<li>
<b>Sobre Nosotros</b>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" style="color:black;" aria-haspopup="true" aria-expanded="false"><b>Productos</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>IMCtext</li>
<li>IMCplastic</li>
<li>IMCcontención</li>
<li role="separator" class="divider"></li>
<li>Absorventes</li>
</ul>
</li>
<li>
<b>Contacto</b>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<!-- carousel -->
<header>
</header>
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- IMC secciones -->
<div class="container" id="nuestrosclientes">
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<hr>
<h1><b>Nuestros clientes</b></h1>
<hr>
<!-- Title -->
<div class="container">
<ul class="bxslider">
<li><img src="img/clientes/14.jpg" /></li>
<li><img src="img/clientes/15.jpg" /></li>
<li><img src="img/clientes/16.jpg" /></li>
<li><img src="img/clientes/17.jpg" /></li>
<li><img src="img/clientes/18.jpg" /></li>
</ul>
</div>
<!-- /.row -->
</div>
<!-- FOOTER -->
<footer class="footer-distributed">
<div class="footer-left">
<div class="container">
<img class="img-responsive" src="img/logo/logosmall.jpg" alt="">
<br>
<p class="footer-company-name"> IMC chile © 2016</p>
</div>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p style="color:black;"><span>La Senda de Don Juan Francisco 5300,</span> Peñalolén, Santiago.</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p style="color:black;">+56 9 5688 6169</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p style="color:black;">ventas#imcchile.cl</p>
</div>
</div>
<div class="footer-right">
<p style="color:black;" class="footer-company-about">
<span style="color:black;">Sobre la compañia</span>
Comercializadora Importadora y Exportadora IMC Chile Limitada. <br>Rut: 76.296.444-9.
</p>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-github"></i>
</div>
</div>
</footer>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- carousel script -->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 600,
minSlides: 2,
maxSlides: 3,
slideMargin: 10,
speed: 1000
});
});
</script>
</body>
</html>
Hello try the below Html for navbar I just edited some classes for bootstrap and it seems working .Hope It helps you.
"Just ignore the code see the fiddle below" .
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li>
<b>Sobre Nosotros</b>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data- toggle="dropdown" href="#"
role="button" style="color:black;" aria-haspopup="true" aria-
expanded="false"><b>Productos</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>IMCtext
</li>
<li>IMCplastic</li>
<li>IMCcontención</li>
<li role="separator" class="divider"></li>
<li>Absorventes</li>
</ul>
</li>
<li>
<a href="#" style="color:black;">
<b>Contacto</b></a>
</li>
</ul>
</div>
See the below Fiddle
Side Bar Fiddle
Well, if you add, for example, background-color: #fff to nav with the class "navbar ", you will have the desired result - a text with a color behind. But I think the problem is that you've overridden some bootstrap classes or missed adding one to your html code. Moreover your next problem (after background-color) will be fixing the position of the navbar, so it would be nicely viewable on mobile devices. Try to read this part of bootstrap documentation for more information.
So, I'm working on making a slideshow using the bootstrap carousel. I want to have buttons that are inside the image, instead of buttons that are outside of the image. The code is below, you'll have to put it in a folder with images called photo1.jpg photo2.jpg and photo3.jpg.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Graphic design</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale-1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item a > img {
width:70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Carter Goff Graphic Design</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<ul class = "nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
<div class = "container">
<br>
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="photo1.jpg" alt="photo" width="500">
</div>
<div class="item">
<img src="photo2.jpg" alt="photo" width="500">
</div>
<div class="item">
<img src="photo3.jpg" alt="photo" width="500">
</div>
</div>
<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>
</body>
</html>
Thanks!
You could do it with absolute positioning or you could just make the background of the element your picture and then you can put whatever you want over it:
.item1{
background: url(pathtothebackground);
//any other css for your item
}
I'm trying to use a Bootsnipp snippet in my page.
Namely, collapsible-tree-menu-with-accordion.
However the entire thing is being rendered in a 'flat' way. The collapse/expand mechanism is working fine, but the list items are not indented, nor are they surrounded with a box.
I imagine this is a CSS issue, but I can't figure it out.
Here is the HTML (generated from django templates), with the snippet pasted as-is:
<!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.0">
<title></title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 class="navbar-brand" href="#">Hasadna: Community</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>admin</li>
</ul>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li>Users</li>
<li class="active">Lucid</li>
</ol>
<div class="well">
<center>
<img src="http://www.gravatar.com/avatar/8b1d41ccb353509f6c864b1faddf3202?d=blank?s=140" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
<h3 class="media-heading">Lucid</h3>
<h3 class="media-heading"><small>עמרי דור | Omri Dor</small></h3>
<span><strong>Skills: </strong></span>
<span class="label label-warning">Baking Cookies</span>
</center>
<hr>
<p class="text-left"><strong>Email: </strong><br>
a#b.c</p>
<hr>
<center>
<p class="text-left"><strong>Bio: </strong><br>
Hi guys.
</p>
</center>
<hr>
<p class="text-left"><strong>Code Contributions: </strong></p>
<ul class="list-group">
<li class="list-group-item"><strong>Total Commits:</strong> 7</li>
</ul>
<div class="container">
<div class="row">
<div class="span12">
<div class="menu">
<div class="accordion">
<!-- Áreas -->
<div class="accordion-group">
<!-- Área -->
<div class="accordion-heading area">
<a class="accordion-toggle" data-toggle="collapse" href=
"#area1">Área #1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil" data-toggle=
"dropdown" href="#" style="font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar equipamento -->
<li>
<a href="../equipamento/add.php"><i class=
"icon-plus"></i> Adicionar equipamento</a>
</li>
<li class="divider"></li><!-- Editar área -->
<li>
<a href="../area/edit.php"><i class=
"icon-pencil"></i> Editar área</a>
</li>
<li class="divider"></li><!-- Remover área -->
<li>
<a class="danger" href="#remove"><i class=
"icon-remove"></i> Remover área</a>
</li>
</ul>
</div>
</div><!-- /Área -->
<div class="accordion-body collapse" id="area1">
<div class="accordion-inner">
<div class="accordion" id="equipamento1">
<!-- Equipamentos -->
<div class="accordion-group">
<div class="accordion-heading equipamento">
<a class="accordion-toggle" data-parent=
"#equipamento1-1" data-toggle="collapse" href=
"#ponto1-1">Equipamento #1-1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil"
data-toggle="dropdown" href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar ponto -->
<li>
<a href=
"../ponto/add.php"><i class="icon-plus">
</i> Adicionar ponto</a>
</li>
<li class="divider"></li>
<!-- Editar equipamento -->
<li>
<a href=
"../equipamento/edit.php"><i class=
"icon-pencil"></i> Editar
equipamento</a>
</li>
<li class="divider"></li>
<!-- Remover equipamento -->
<li>
<a class="danger" href=
"#remove"><i class=
"icon-remove"></i> Remover
equipamento</a>
</li>
</ul>
</div>
</div><!-- Pontos -->
<div class="accordion-body collapse" id="ponto1-1">
<div class="accordion-inner">
<div class="accordion" id="servico1">
<div class="accordion-group">
<div class=
"accordion-heading ponto">
<a class="accordion-toggle"
data-parent="#servico1-1-1"
data-toggle="collapse" href=
"#servico1-1-1">Ponto
#1-1-1</a>
<div class="dropdown edit">
<a class=
"dropdown-toggle icon-pencil"
data-toggle="dropdown"
href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar servico -->
<li>
<a href=
"../servico/add.php">
<i class=
"icon-plus"></i>
Adicionar
servico</a>
</li>
<li class="divider">
</li><!-- Editar ponto -->
<li>
<a href=
"../ponto/edit.php">
<i class=
"icon-pencil"></i>
Editar ponto</a>
</li>
<li class="divider">
</li><!-- Remover ponto -->
<li>
<a class="danger"
href=
"#remove"><i class=
"icon-remove"></i>
Remover ponto</a>
</li>
</ul>
</div>
</div><!-- Serviços -->
<div class=
"accordion-body collapse" id=
"servico1-1-1">
<div class="accordion-inner">
<ul class="nav nav-list">
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-1</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-2</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-3</a>
</li>
</ul>
</div>
</div><!-- /Serviços -->
</div>
</div>
</div>
</div><!-- /Pontos -->
</div><!-- /Equipamentos -->
</div>
</div>
</div>
</div>
</div><!-- /accordion -->
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p></p>
</footer>
</div>
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And this is the additional CSS file, '/static/css/style.css', containing the CSS snippet that's supposed to go along with the HTML snippet:
body {
padding-top: 80px;
padding-bottom: 20px;
}
.menu .accordion-heading { position: relative; }
.menu .accordion-heading .edit {
position: absolute;
top: 8px;
right: 30px;
}
.menu .area { border-left: 4px solid #f38787; }
.menu .equipamento { border-left: 4px solid #65c465; }
.menu .ponto { border-left: 4px solid #98b3fa; }
.menu .collapse.in { overflow: visible; }
Any ideas?
So it turns out I had two problems:
I was using Bootstrap v3.1.0, which was incompatible with this snippet.
Even after switching to v2.3.2, the files sat in the same exact (django served /static/) path, and my browser kept using the cached version (3.1.0).
About (1):
Unfortunately if I go back to 2.3.2 then my navbar is no longer rendered correctly. I would really like to migrate the snippet to Bootstrap 3.1.0, but my CSS is far too poor for me to be able to do it.
About (2):
A quick workaround was to indicate the version number somewhere in the path (i.e. boostrap/2.3.2/css/...).
A cleaner solution is django-cachebuster, which adds a meaningless get parameter for your static resources (i.e. /static/my.css?v=9393939). This parameter can be set to be the file's last modification date, so that ought to do it.
Thanks for your help guys!