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.
Related
I have completed coding Main webpage, which looks like this:
By using the same HTML and linking with the same CSS, I have created the Photography HTML by deleting the main car image and inserting the images made with Carousel slide effect.
However, even though I am using the same CSS with same HTML format, the navigation bar is acting weird, as shown below:
As shown, the top right navigation has moved to the left while the bottom icon images not showing, but only with white background...
I thought it has to do with the image size inside Carousel, so I have adjusted the size, but nothing is working properly.
HTML Main Webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="monday.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]son</title>
</head>
<body>
<nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
HOME
</li>
<li>
PHOTOGRAPHY
<ul class="sub-menu">
<li>Colour</li>
<li>Black</li>
</ul>
</li>
<li>
CODING
</li>
<li>
ABOUT
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<div class="main_car_wrapper">
<img class="main_car" src="Photos/main_car.jpg" alt="car" width="100%" height="100%"/>
</div>
<!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
<div class ="bottom">
<div class = "logos">
<p id = "paragraph">TESTING</p>
</div>
</div>
</body>
</html>
HTML Photography:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="monday.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]son</title>
</head>
<body>
<nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
HOME
</li>
<li>
PHOTOGRAPHY
<ul class="sub-menu">
<li>Colour</li>
<li>Black</li>
</ul>
</li>
<li>
CODING
</li>
<li>
ABOUT
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!--<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-75" src="Photos/carousel.JPG" alt="First slide">
<p>November, 2019. Seattle, USA.</p>
</div>
<div class="carousel-item">
<img class="d-block w-75" src="Photos/statute.JPG" alt="Second slide">
<p>June, 2020. Kelowna, BC.</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class ="bottom">
<div class = "logos">
</div>
</div>
</body>
</html>
CSS (use it for all HTML):
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: black; /*rgb(241, 233, 233);*/
display: flex;
flex-direction: column;
min-height: 100vh;
}
nav {
display: flex;
justify-content: space-between;
/*padding-right: 2em;*/
padding-left: 2em;
padding-top: 2em;
padding-bottom: 1.5em;
align-items: center;
min-height: 8vh;
background-color: black;
/*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
font-family: 'Poppins', sans-serif;
}
.logo {
background-color: black;
color: rgb(240, 235, 235);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: bold;
font-size: 11px;
/*padding: 5px 5px;*/
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
#media screen and (max-width:950px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 45%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relative;
}
}
.nav-active {
transform: translate(0%);https://ahweb.org.uk/car.png
}
.main_car_wrapper {
background-image: url(https://ahweb.org.uk/car.png);
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: contain;
max-width: 100%;
height: auto;
padding-top: 6em;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity :1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.sub-menu {
display: none;
}
.sub-menu li a {
/*display: block;*/
text-decoration: none;
color: white;
border-top: 1px solid white;
background: rgb(221, 215, 215);
white-space: nowrap;
top: 40px;
left: 25px;
padding: 5px;
padding-top: 1px;
}
.sub-menu li a:hover{
background: rgb(10, 10, 10);
opacity: 1;
transition: all 0.5s ease;
}
li:hover ul {
display: flex;
position: absolute;
}
li:hover li {
float: none;
font-size: 8px;
}
li:hover a {
background: rgb(5, 5, 5);
}
li:hover li a:hover {
background: rgb(19, 18, 18);
}
.bottom {
margin-top: auto;
}
.logos {
display: flex;
flex-direction: row;
}
.logos a {
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
}
.carousel-inner p {
text-align: center;
color: black;
font-size: 14px;
}
.carousel-inner {
background-color: black;
}
.carousel-inner img {
display: block;
margin: 0 auto;
width: 60vw;
max-height: auto;
align-items: center;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
JavaScript
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//Toggle Nav
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if(link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.2s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
//Animate Links
}
navSlide();
The issue is caused by your HTML use a different style for nav element.
Change nav to display as flex should solve the issue.
HTML Main Webpage
nav element display as flex.
HTML Photography
nav element display as a block. This is because you used the bootstrap lib.
I am trying to design a simple website, and I have made a div's with a frosted glass effect, now I can position it left and right yet I can't seem to move it up!? the div in question has the name of product panel.
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<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="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>
Bearing in mind i just started out with web design some help and input is greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<style>
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
/*
Start of Code - Laxmikant Killekar
*/
body{
overflow-x: hidden;
}
/*
End of Code - Laxmikant Killekar
*/
</style>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<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="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<!-- Start of Code - Laxmikant Killekar -->
<div class="fluid-container">
<div class="row">
<div class="col-md-6">
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</div>
<div class="col-md-4 pull-right">
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</div>
</div>
</div>
<!--End of Code - Laxmikant Killekar-->
</body>
</html>
here
is the codepen, tell me if it solved your problem
put your
<div class="frosted-glass" id="product-panel">
before<div class="frosted-glass" id="contact-details">
Add top:(value)px to this
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
and you can change position to it
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<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="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>
When you use more than one items in a line, it should satisfy the width proportion
So, give width percentage '%' instead of pixel 'px',
here you can use float:left to include more than one item in a line.
Try to use width in percentage, it is the way most developers use
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:70%;
height: 400px;
text-align:left;
float:left;
}
#contact-details{
width:30%;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
float:left;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<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="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</body>
</html>
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;
}
I'm currently working on a new bootstrap markup for a website and it looks completely as wanted in the Google Chrome - but when I switch to IE11 it looks like the grid system is screwed.
I've specified viewport, IE=edge etc. and tried to include respond.js as various google searches suggested. The website looks fine with xs screen size but for bigger screen sizes the container overflows the window, thus not adapting to the size of the screen.
Can you help me out? The website is available at
thyrace.dk/etape and the markup right beneath.
Thank you very much.
#-ms-viewport { width: device-width; }
#viewport { width: device-width; }
html, body {
height: 100%;
}
body {
background-image: url("../img/bg.png");
background-repeat: repeat;
font-size: 13px;
}
.wrapper {
height: 100%;
display: table;
}
.navbar {
background-color: white;
}
.content {
background-color: white;
height: 100%;
padding: 20px;
}
main, aside {
margin-top: 10px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav li > a:hover {
color: #FFF;
background: grey;
}
aside {
padding: 0;
width: 100%;
}
aside img {
float: left;
margin: 0 0 5px 5px;
}
/* Carousel */
.carousel {
margin-bottom: 20px;
margin: 0 10px 0 10px;
}
.carousel .item {
height: 225px;
background-color: #555;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
}
.carousel-caption h4 {
margin: 0;
background-color: rgba(175, 0, 0, 0.50);
}
.carousel-indicators {
top: 10px;
height: 20px;
}
.carousel-text {
z-index: 1;
position: absolute;
bottom: 20px;
right: 0;
padding: 15px;
width: 400px;
max-width: 100%;
background-color: grey;
color: white;
}
.carousel-text h2 {
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 0;
}
.navbar-default .navbar-nav li {
margin-bottom: 1px;
}
#media (min-width: 768px) {
.wrapper {
padding: 20px 0 20px 0;
}
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar {
margin-right: 0;
margin-left: 0;
border-radius: 0px;
}
.navbar-nav, .navbar-nav > li, .navbar-left,
.navbar-right, .navbar-header {
float: none !important;
}
.navbar-right .dropdown-menu {
left: 0;
right: auto;
}
.navbar-logo {
padding: 0 10px 10px 10px;
}
.page-return {
width: 100%;
text-align: center;
margin-top: 5px;
font-size: 11px;
}
}
<!DOCTYPE HTML>
<html lang="da" >
<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>ThyRace.dk - Løb med naturoplevelser i Thy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/purple-color-scheme.css">
</head>
<body>
<div class="container wrapper">
<div class="col-xs-12 col-sm-3 col-md-2">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="hidden-xs page-return">
Tilbage til hovedoversigten
</div>
<img src="img/logo_etape.png" class="img-responsive navbar-logo hidden-xs" alt="" />
<a class="navbar-brand visible-xs" href="#">
Etapeløb Thy Trail
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="visible-xs">Tilbage til thyrace.dk</li>
<li class="active">Løbsinformation</li>
<li>Rute</li>
<li>Tilmelding</li>
<li>Startliste</li>
</ul>
</div>
</nav>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="navbar navbar-default content">
<div class="row">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/slider/1.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/2.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/3.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/4.jpg" alt="" />
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-text">
<h2>Fredag d. 30. oktober - Søndag 1. november 2015</h2>
</div>
</div> <!-- End carousel -->
</div> <!-- End carousel row -->
<div class="row">
<div class="col-xs-12 col-sm-9">
<main>
Bla bla bla
</main>
</div>
<div class="col-xs-12 col-sm-3">
<aside>
<img src="http://dummyimage.com/250x100/000/ffffff&text=250*100" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
</aside>
</div> <!-- End aside wrapper -->
</div> <!-- End main + aside row -->
</div> <!-- End navbar -->
</div> <!-- End content col -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Your DOM is not as per bootstrap you've to use something like that
<div class="wrapper">
<div class="container">
<div class="row>
<div class="col-xs-12 col-sm-3 col-md-2">
And You've used display:table for your wrapper viz causing the layout issue for IE as well as in FF
Also for better results stop using your custom class along with bootstrap class otherwise it will misbehave at some points.
For e.g:
Instead of using:
<div class="col-md-6 yourClass">
you should use:
<div class="col-md-6">
<div class="yourClass">
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>