while studying of bootstrap to navbar menus and carousel, i encountered this problem i tried something changing some codes but it doesnt worked. explain to me what is happen and which one is error. you can run the snippet to see what happen to my carousel
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.opaque-navbar').addClass('opaque');
} else {
$('.opaque-navbar').removeClass('opaque');
}
});
$('#myCarousel').carousel();
var winWidth = $(window).innerWidth();
$(window).resize(function () {
if ($(window).innerWidth() < winWidth) {
$('.carousel-inner>.item>img').css({
'min-width': winWidth, 'width': winWidth
});
}
else {
winWidth = $(window).innerWidth();
$('.carousel-inner>.item>img').css({
'min-width': '', 'width': ''
});
}
});
body {
background: #97744a;
}
section
{
background:yellow;
}
.banner
{
background: url(https://jonesbrotherscoffee.com/img/grindedcoffee300.jpg) fixed;
min-height:200px;
}
.banner .row
{
text-align:center;
margin-top:50px;
}
.banner h1
{
color:white;
}
.opaque-navbar {
background-color: rgba(0,0,0,0.5);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.opaque-navbar.opaque {
background-color: black;
height: 60px;
transition: background-color .5s ease 0s;
}
ul.dropdown-menu {
background-color: black;
}
#media (max-width: 992px) {
body
{
background: ;
}
.opaque-navbar {
background-color: black;
height: 60px;
transition: background-color .5s ease 0s;
}
}
.navbar-brand img {
width: 190px;
height: auto;
margin-top: -12px;
}
.active a {
background-color: #eeab1f !important;
}
/* main page */
.jumbotron {
border-top: 5px solid #cb8f50;
border-bottom: 5px solid #754b24;
border-right: 0px;
border-left: 0px;
min-height: 200px;
background-color: #422a1e;
}
.jumbotron img {
width: 500px;
height: auto;
margin: 0 auto;
display: block;
}
.jumbotron h2, h3 {
margin-top: -5px;
font-weight: bold;
color: #eeab1f;
}
.jumbotron p {
font-weight: lighter;
color: #ffffff;
font-size: 15px;
}
.jumbotron img {
width: 450px;
height: auto;
}
.right {
margin-top: 40px;
}
.right img{
width: 25px;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: 400px;
min-width: 100%;
width: 100%;
max-width: 100%;
line-height: 1;
margin: 0 auto;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Conlins Coffee World Inc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
<script src="js/jquery.min1.js"></script>
<script src="js/javascript-redirect.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/brands/artisans.png"></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="http://www.dogbehaviour.org.uk/wp-content/uploads/2016/06/EH-Dog-behaviour.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="http://www.oldnorthcanine.com/wp-content/uploads/2015/06/animal-dog-pet-sad-1920x500.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="http://0104.nccdn.net/1_5/07f/260/1be/sophiebig.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.opaque-navbar').addClass('opaque');
} else {
$('.opaque-navbar').removeClass('opaque');
}
});
$('#myCarousel').carousel();
var winWidth = $(window).innerWidth();
$(window).resize(function () {
if ($(window).innerWidth() < winWidth) {
$('.carousel-inner>.item>img').css({
'min-width': winWidth, 'width': winWidth
});
}
else {
winWidth = $(window).innerWidth();
$('.carousel-inner>.item>img').css({
'min-width': '', 'width': ''
});
}
});
body {
background: #97744a;
}
section
{
background:yellow;
}
.banner
{
background: url(https://jonesbrotherscoffee.com/img/grindedcoffee300.jpg) fixed;
min-height:200px;
}
.banner .row
{
text-align:center;
margin-top:50px;
}
.banner h1
{
color:white;
}
.opaque-navbar {
background-color: rgba(0,0,0,0.5);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.opaque-navbar.opaque {
background-color: black;
height: 60px;
transition: background-color .5s ease 0s;
}
ul.dropdown-menu {
background-color: black;
}
#media (max-width: 992px) {
body
{
background: ;
}
.opaque-navbar {
background-color: black;
height: 60px;
transition: background-color .5s ease 0s;
}
}
.navbar-brand img {
width: 190px;
height: auto;
margin-top: -12px;
}
.active a {
background-color: #eeab1f !important;
}
/* main page */
.jumbotron {
border-top: 5px solid #cb8f50;
border-bottom: 5px solid #754b24;
border-right: 0px;
border-left: 0px;
min-height: 200px;
background-color: #422a1e;
}
.jumbotron img {
width: 500px;
height: auto;
margin: 0 auto;
display: block;
}
.jumbotron h2, h3 {
margin-top: -5px;
font-weight: bold;
color: #eeab1f;
}
.jumbotron p {
font-weight: lighter;
color: #ffffff;
font-size: 15px;
}
.jumbotron img {
width: 450px;
height: auto;
}
.right img{
width: 25px;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: 400px;
min-width: 100%;
width: 100%;
max-width: 100%;
line-height: 1;
margin: 0 auto;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Conlins Coffee World Inc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
<script src="js/jquery.min1.js"></script>
<script src="js/javascript-redirect.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/brands/artisans.png"></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="http://www.dogbehaviour.org.uk/wp-content/uploads/2016/06/EH-Dog-behaviour.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="http://www.oldnorthcanine.com/wp-content/uploads/2015/06/animal-dog-pet-sad-1920x500.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="http://0104.nccdn.net/1_5/07f/260/1be/sophiebig.jpg" alt="" class="">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
Remove margin-top
.right {
margin-top: 0px;
}
Related
I am making a small webpage which is shown below . There is a footer at the end over which "Made with love by Vipul Tyagi" is written. The problem is that it is coming over the previous division(feedback form). No matter how much top property I apply to the footer, it is not moving down even a bit.
Please have a look at my code and help me to find the problem. You will find it at the very end in html just above </body> tag.
Thanks in advance!
$(document).ready(function() {
$("#notif-list li").click(function(e) {
var num = parseInt($("#notif-number").text());
$(this).remove();
$("#notif-number").html("" + num - 1 + "");
});
});
.container1 {
position: relative;
color: white;
}
.centered {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.top-left {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
}
.heading {
font-family: 'Orbitron', serif;
}
#headmain {
font-size: 50px;
position: relative;
left: -55px;
color: white;
}
#headsecondary {
position: relative;
right: 5%;
color: white;
}
#top-content {
position: relative;
top: 40px;
width: 100%;
background-color: #bbb;
padding: 10px;
}
a {
color: white;
}
.number {
position: absolute;
top: -5px;
right: -2px;
padding: 5px 10px;
border-radius: 30%;
background: green;
color: white;
}
.borderimg {
border-radius: 30%;
}
.carosel {
width: 670px;
}
.service-list {
font-family: 'Lobster', cursive;
font-size: 50px;
}
.labels {
font-size: 15px;
}
.login-box {
width: 320px;
height: 520px;
top: 290px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #1c8adb;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: #39dc79;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 14px;
color: #fff;
}
.login-box a:hover {
color: #39dc79;
}
#media screen and (max-width: 450px) {
.carosel {
width: 300px;
}
.top-left {
position: absolute;
top: 35%;
left: 55%;
transform: translate(-50%, -50%);
}
#headmain {
font-size: 30px;
position: relative;
left: -20px;
color: white;
}
#headsecondary {
font-size: 20px;
position: relative;
right: 5%;
color: white;
}
#service-list {
font-family: 'Lobster', cursive;
font-size: 30px;
}
.login-box {
width: 300px;
height: 500px;
position: relative;
top: 50px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" style="opacity: 0.9;top: 10px;">
<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="#"><img src="sankalpsoft.png" style="height: 30px; width: 30px;bottom : 10px;" /></a>
<a class="navbar-brand" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">SankalpSoft</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
About Us
</li>
<li>Why We?</li>
<li>Products</li>
<li>Services</li>
<li>Blogs</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Notification<span class="number" id="notif-number">4</span></a>
<ul class="dropdown-menu" id="notif-list">
<li style="padding: 10px 5px;">Notification 1</li>
<li style="padding: 10px 5px;">Notification 2</li>
<li style="padding: 10px 5px;">Notification 3</li>
<li style="padding: 10px 5px;">Notification 4</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="width: 100%;padding-left: 0;padding-right: 0;">
<img src="https://i.postimg.cc/PpNsdrDS/back-img.jpg" alt="Snow" style="width: 100%;height: 350px;filter: grayscale(10%) brightness(60%) contrast(1);box-shadow: 5px 15px 8px #888888;">
<div class="top-left">
<h1 class="heading" id="headmain">SankalpSoft Solutions</h1>
<h3 class="heading" id="headsecondary">We Provide intelligent business support</h3>
</div>
</div>
</div>
<div class="container carosel" style="height: 340px;top: 40px;">
<h2 style="text-align: center;" class="service-list">Services We provide</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="box-shadow: 20px 10px 8px #888888;border-radius: 10%;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active borderimg">
<img src="https://i.postimg.cc/kVQDWsY0/business.jpg" alt="business" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/XGnqL5Tp/outsourcing.jpg" alt="outsourcing" style="width:100%;">
</div>
<div class="item borderimg">
<img src="ttps://i.postimg.cc/dDLwYnmJ/webdevelopment.jpg" alt="webdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/K1T6YHRy/applicationdevelopment.png" alt="applicationdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/gn105QC9/customersupport.jpg" alt="customersupport" style="width:100%;">
</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 class="container login-box" style="position: relative;border-radius: 10%;">
<h1 class="login service-list" style="text-align: center;">Feedback here</h1>
<p class="login service-list labels">Name</p>
<input type="text" name="Name" placeholder="" id="usernm" required>
<p class="login service-list labels">Contact No</p>
<input type="password" name="password" placeholder="" id="contact" required>
<p class="login service-list labels">Message</p>
<input type="text" name="message" placeholder="" id="msg" required>
<input class="service-list" type="submit" name="submit" value="Submit" id="signupbut" class="login"></input>
</div>
<div class="container footer" style="position: relative;background-color: black;width: 100%;margin: 0;padding: 10px;">
<p style="color: white; font-size: 20px;text-align: center;">Made with <span>❤</span> by Vipul Tyagi</p>
</div>
</body>
</html>
EDIT
Although I have found the solution, but I still don't understand what was the issue? I have never seen such behaviour with top prperty!
Wrap your footer around a footer tag and use that tag to adjust the position on your page. The inline css i used is
margin-top: 50%;
I've added a js fiddle for you as well. Take a look at this link:https://jsfiddle.net/zfhassaan/5syxnme1/1/
In the style of class="container footer" , you have used position as relative. So, you can add top: some pixels (for eg: top: 200px) to your style, to keep the footer where ever you want.
For reference: https://www.w3schools.com/css/css_positioning.asp
I am wondering if it is possible to hide the Nav Menus in my navbar and put them inside the toggle icon so when my browser shrink, the users can access them only from the toggle icon? I'm a beginner in CSS/Bootstrap.
Here's my HTML code:
<div class="container">
<div class="navbar-header">
<!-- Hamburger Icon -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCol">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
-root- DOTA
</div>
<div class="collapse navbar-collapse" id="navCol">
<ul class="nav navbar-nav">
<li class="divider">
TEAMS
</li>
<li class="divider">
MATCHES
</li>
</ul>
</div>
</div>
and my CSS:
.navbar-custom .navbar-toggle{
border-color: #041809;
}
.navbar-custom .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
background-color:#000c07;
}
.navbar-custom .navbar-toggle .icon-bar{
width: 25px;
height: 3px;
}
.navbar-custom .nav .divider{
background-color: #000c07;
}
.navbar-custom .navbar-collapse{
background-color: #000c07;
border-color: #041809;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.wrapper {
max-width: 1024px;
padding: 0;
margin: 0;
}
nav { background: #eee; }
nav .wrapper { position: relative; }
.menu li { float: left; }
.menu li a {
display: inline-block;
padding: 10px 15px;
}
.menuToggle {
padding: 10px 15px;
display: none;
cursor: pointer;
}
#media screen and (max-width: 600px) {
.menu {
display: none;
position: absolute;
background: #eee;
z-index : 1;
}
.menu li { float: none; }
.menuToggle { display: inline-block; }
fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after {
content: '';
width: 25px;
height: 2px;
background: #252525;
position: absolute;
left: 0;
transition: all .2s ease-out;
}
.fh5co-nav-toggle i {
position: relative;
display: inline-block;
width: 25px;
height: 2px;
color: #252525;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #252525;
transition: all .2s ease-out;
}
.fh5co-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
background: #c6872b;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
$('.menuToggle').on('click', function(){
$('.menu').slideToggle(300, function(){
if($(this).css('display') === 'none'){
$(this).removeAttr('style');
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12">
<nav class="navbar navbar-default">
<div class="wrapper">
<div class="menuToggle">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="menu clearfix">
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12">
<h2>Carousel Example</h2>
<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="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
</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>
Hey i don't know what the hell with my code. I don't know where is margin and padding and my carousel and news block have margin at the top and sides while the below divs have no any padding or margin..
.affix{
z-index:2000;
top: 0;
width: 100%;
}
.navbar{
vertical-align: middle;
}
.hint
{
color:#FF0000;
}
#box{
//border:1px solid red;
height:440px;
}
#box:hover{
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
color: blue;
}
#mst_visited_product:hover{
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
#container #image #title
{
border: 0px solid red;
min-height: 100px;
min-width: 400px;
float: left;
}
#container img
{
height:440px;
width: 100%;
min-height: 100%;
background-size: cover;
}
#clear
{
clear : both;
}
#container
{
min-height : 100px;
width : 100%;
margin : 0px;
}
#picture
{
border : 2px solid white;
height : 281px;
width : 281px;
float : left;
margin-left : 35px;
margin-right : 35px;
margin-top : 35px;
}
#container #picture img
{
margin:0px;
z-index: -1;
width: 100%;
height: 100%;
position: relative;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
#picture:hover
{
border: 2px solid blue;
}
#header
{
border: 1px solid red;
height: 200px;
}
a
{
text-decoration: none;
}
#men_collection h2
{
margin : 10px;
}
#women_collection h2
{
margin : 10px;
}
#grooms_collection h2
{
margin : 10px;
}
#brides_collection h2
{
margin : 10px;
}
#men_collection
{
min-width: 50px;
float: left;
//border: 1px solid red;
}
#women_collection
{
float: left;
min-width: 50px;
}
#grooms_collection
{
min-width: 50px;
float: left;
}
#brides_collection
{
min-width: 50px;
float: left;
}
#home
{
float: left;
width: 50px;
}
#home img
{
height : 100%;
width : 50px;
}
#footer
{
border: 1px solid green;
height: 350px;
width: 100%;
background-color: #000000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" Content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
</head>
<body>
<div class="container-fluid" style="height:150px;">
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search.." />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<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 col-lg-3" href="#">Monaj</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav col-lg-8">
<li class="active"><span class="glyphicon glyphicon-home"> Home</span></li>
<li>Men Collection</li>
<li>Women Collection</li>
<li>Grooms Collection</li>
<li>Brides Collection</li>
</ul>
<ul class="nav navbar-nav col-lg-1 navbar-right">
<li><span class="glyphicon glyphicon-log-in"> Login</span></li>
</ul>
</div>
</nav>
<div id="main">
<div class="container-fluid col-lg-9 col-sm-9" style="min-height:100px">
<div id="container">
<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="products_images/147.jpg" alt="Pashmina">
</div>
<div class="item">
<img src="products_images/219.jpg" alt="Woolen">
</div>
<div class="item">
<img src="products_images/432.jpg" alt="Silk">
</div>
<div class="item">
<img src="products_images/343.jpg" alt="Shawl">
</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>
</div>
</div>
<div class="col-lg-3" >
<div class="col-lg-12" id="box"></div>
</div>
<div class="col-lg-12 mst"><p style="text-align:center; text-shadow:4px; font-size:39px; background:grey; margin:0; padding:0;"><strong>Most Visited Products</strong></p></div>
</div>
<div id="mst_visited_product" style="height:300px;" class="col-lg-3"></div>
<div id="mst_visited_product" style="height:300px;" class="col-lg-3"></div>
<div id="mst_visited_product" style="height:300px;" class="col-lg-3"></div>
<div id="mst_visited_product" style="height:300px;" class="col-lg-3"></div>
<div id="footer" class="col-lg-12" style="height:300px;color:black;"></div>
</body>
</html>
**
strong text
**
That's because bootstrap has it's own padding and margin styles applied when you use the col class names like col-lg, col-sm, etc
I'm sure you can manually override any padding or margin you want just by applying another class with an overriding style, probably don't have to use !important.
I found this as a kill-all padding for columns technique:
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
So now just add the .no-gutter class if you want no padding in all columns for example. Hope this helps.
1) Place your bootstrap columns inside a .row class. The .row class has a negative margin that will "negate" the padding of 15px that is applied to the left and right of the columns classes, when spanning the full width. So it should look like:
<div class="row">
<div class="container-fluid col-lg-9 col-sm-9" style="min-height:100px">
...
</div>
... all your other columns
</div>
2) The top "padding" you are seeing is actually a margin-bottom from the .navbar class. You can simply override this with:
.navbar {
margin-bottom: 0;
}
Actually bootstrap 4 applies css property line-height due to which there is a gap appears at the top and bottom of the div which seems to be padding but it is not padding its the line height which causes that issue.so if you want to remove that top and bottom space set line-height property to 1.
e.g div {line-height: 1 !important}
this will solve the issue
I have used fixed background images in my carousel of website made with bootstrap. The background images are fixed to show the parallaxing effect. But the problem is the when new slides of carouslel move to left the image already present there remains fixed. What I want is that the background image on a div move when the div moves with css transition effects.
I want this type of carousel http://www.w3schools.com/bootstrap/bootstrap_carousel.asp In other words I want the next item to push the background image of active item to the left. At present when the next item slides to the left it opaques the current item's background image.
The code is as following:
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .second {
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .third {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .fourth {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!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>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- 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.2/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 navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></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>
<div class="item active first"></div>
<div class="item second"></div>
<div class="item third"></div>
<div class="item fourth"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
How do I acheive this?
Edit: It seems like the problem is only in firefox browser. Please explain why it works in chrome browser and not in firefox browser.
I tried like this . carousel next item will appear on previous item after that the background image of active item to the left
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .second {
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .third {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .fourth {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!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>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- 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.2/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 navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></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>
<div class="item active first"></div>
<div class="item second"></div>
<div class="item third"></div>
<div class="item fourth"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
You can just add this css :
<!DOCTYPE html>
<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>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
div#mycarousel .carousel-inner .item{
padding:0 10%;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></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>
<div class="item active first"><img src="http://blog.allisonjoyce.com/wp-content/uploads/2014/02/ablog186.jpg"></div>
<div class="item second"><img src="https://i.ytimg.com/vi/MLqHuAXasTY/maxresdefault.jpg"></div>
<div class="item third"><img src="http://blog.allisonjoyce.com/wp-content/uploads/2014/02/ablog186.jpg"></div>
<div class="item fourth"><img src=""><img src="http://www.monopolycity.com/acimages/ac_beach_21_560.gif"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><i class="glyphicon glyphicon-chevron-left"></i></span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><i class="glyphicon glyphicon-chevron-right"></i></span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
But the problem is the when new slides of
carouslel move to left the image already present there remains fixed.
What I want is that the background image on a div move when the div
moves with css transition effects.
In Chrome - Your provided demo is already working as you want.
But in FireFox the issue is seen. The issue is because you are using fixed on the images which will keep it fixed, Removing this worked as required in Firefox too.
background: url(..) no-repeat fixed; // remove fixed
Edit 1: As you said removing fixed will break parallax effect you can do this way.
Add another div inside the .item div and add image to this div. So now we have a inner div with fixed image, But outer div is free to move.
Below is a working sample
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item, .carousel-inner .item > div {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first > div {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .second > div{
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .third > div{
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .fourth > div{
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!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>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- 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.2/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 navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></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>
<div class="item active first"><div></div></div>
<div class="item second"><div></div></div>
<div class="item third"><div></div></div>
<div class="item fourth"><div></div></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
background: url(../img/fav.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 500px;
Set the height to your image like heigth:500px; or you can use padding:50px 0; else it will not display your image on the background until you write anything on that particular div.
I have been messing around with this for a couple days and cannot get this section to work. I want one large div element to span two rows on the left and have two stacked div elements on the right.
Here is the code.
<!DOCTYPE html>
<html>
<head>
<title>Athenz -- DJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="_/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="_/css/mystyles.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- NAVIGATION MENU BAR -->
<div class="jumbtron">
<section class="navbar navbar-fixed-top center" role="navigation">
<ul id="top-nav" class="nav navbar-nav">
<li>Home</li>
<li>Model</li>
<li>Actress</li>
<li>DJ</li>
<li>Entreprenuer</li>
<li>Press</li>
<li>Contact</li>
</ul><!-- nav -->
</section><!-- navbar -->
<div id="djbanner" class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src='images/dj/dj1.jpg' alt="DJ Photo 1">
</div>
<div class="item">
<img src='images/dj/dj2.jpg' alt="DJ Photo 2">
</div>
<div class="item">
<img src='images/dj/dj3.jpg' alt="DJ Photo 3">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
<div id="dj-body" class="container">
<div class="row">
<div class="col-lg-6">
<div class="big-box">image</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6"><div class="mini-box">1</div></div>
<div class="col-lg-6"><div class="mini-box">2</div></div>
<div class="col-lg-6"><div class="mini-box">3</div></div>
<div class="col-lg-6"><div class="mini-box">4</div></div>
</div>
</div>
</div>
</div> <!-- container -->
<section class="navbar navbar-fixed-bottom" role="navigation">
<div class="container">
<ul id="bottom-nav" class="nav navbar-nav">
<li>Energy Wellness</li>
<li>Bookings</li>
<li><img src="images/social/facebook.png" /></li>
<li><img src="images/social/twitter.png" /></li>
<li><img src="images/social/youtube.png" /></li>
<li><img src="images/social/soundcloud.png" /></li>
</ul><!-- nav -->
</div>
</section><!-- navbar -->
<script>
$('.carousel').carousel({
interval: 4000
})
</script>
<script src="_/js/bootstrap.js"></script>
<script src="_/js/myscript.js"></script>
</body>
</html>
Thats the main page. Here is the CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* ------------ Navigation Bar Section ------------ */
.navbar.center {
text-align: center;
margin: 0 auto;
}
.navbar {
background-color: rgba(0,0,0,0.5);
background: rgba(0,0,0,0.5);
border-color: rgba(0,0,0,0.5);
}
.navbar-nav li a {
color: white;
}
ul#top-nav.nav.navbar-nav li a {
font-family: 'Raleway', sans-serif;
margin-right: 50px;
}
ul#top-nav.nav.navbar-nav {
float: none;
display: inline-block;
}
/* ----------- Home Page Section -------------*/
.quarter {
width: 50%;
height: 99.9%;
float: left;
}
.contents {
height: 50%;
width: 100%;
}
#athenz-logo {
z-index: 1050;
position: absolute;
background-image: url('../../images/logo/athenz-logo.png');
background-size: cover;
background-color: white;
top: 50%;
left: 50%;
width: 360px;
height: 225px;
margin-left: -180px;
margin-top: -112.5px;
border-left: 4px solid #468AD4;
border-top: 4px solid #468AD4;
}
#athenz-logo::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 49.5%;
border-bottom: 4px solid #468AD4;
}
#athenz-logo::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 49%;
width: 4px;
border-right: 4px solid #468AD4;
}
#home-top-left {
background-image: url('../../images/home/home_tl.jpg');
background-size: cover;
position: relative;
border-bottom: 2px solid;
border-bottom-color: #468AD4;
border-right: 2px solid;
border-right-color: #468AD4;
}
#home-top-right {
background-image: url('../../images/home/home_tr.jpg');
background-size: cover;
position: relative;
border-bottom: 4px solid;
border-bottom-color: #468AD4;
border-left: 2px solid;
border-left-color: #468AD4;
}
#home-bottom-left {
background-image: url('../../images/home/home_bl.jpg');
background-size: cover;
position: relative;
overflow: hidden;
border-top: 2px solid;
border-top-color: #468AD4;
border-right: 4px solid;
border-right-color: #468AD4;
}
#home-bottom-right {
z-index: 1051;
padding: 75px;
position: relative;
overflow: hidden;
}
/* ------------- DJ STYLING STARTS ------------- */
div#carousel-example-generic.carousel.slide {
height: 100%;
}
div#carousel-example-generic.carousel.slide div.carousel-inner div.item img {
width: 100%;
}
.big-box,
.mini-box {
background-color: #10BCFF;
color: white;
text-align: center;
margin: 2px;
font-size: 1.5em;
}
.big-box {
height: 120px;
}
.mini-box {
height: 60px;
}
/* --------- Footer Section -------- */
ul#bottom-nav.nav.navbar-nav {
float: right;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
}
section.navbar.navbar-fixed-bottom div.container {
margin-right: 0;
}
section.navbar.navbar-fixed-bottom {
height: 50px;
z-index: 1060;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
text-align: center;
font-size: 12px;
right: 0;
padding: 0;
}
ul#bottom-nav.nav.navbar-nav li a img {
width: 28px;
}
I am Pretty sure I closed everything but I cannot get it to work on my computer. Tried display, position and several other options but nothing seemed to work. Thanks for you help in advanced.
<div class="row">
<div class="col-md-6">Tall</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">Top</div>
</div>
<div class="row">
<div class="col-md-12">Bottom</div>
</div>
</div>
</div>