I'm creating a simple bootstrap template, but i facing a problem. My problem is my background image not showing.
.asheader{
background:url('asset/header_bg.png')no-repeat;
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
.asfooter{
background-image:url('asset/footer_bg.png');
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
i wonder why, because i have 2 html pages index.html and index2.html , in my index.html the background img is showsing up, but in index2.html the background is not showing up.
here is my index.html fullpage
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="asset/css/flexslider.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>
<style>
#media (max-width: 766px){
img{
width:50%;
height:50%;
}
}
#media (min-width: 768px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
.navbar.transparent.navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
#Intro {
display: inline-block;
}
#topnavbar {
top: 15px;
}
.carousel {
width:600px;
height:300px;
margin: 0 auto;
}
.lookbook{
width:600px;
height:auto;
margin: 0 auto;
}
.lookbook > h2{
text-align: center;
}
.ladiesroom{
width:600px;
height:300px;
margin: 0 auto;
}
.ladiesroom > h2{
text-align: center;
}
.afterlookbook{
width:630px;
height:300px;
margin: 0 auto;
}
.instagram{
width:630px;
height:auto;
margin: 0 auto;
border: 1px solid blue;
}
.instagram > h2{
text-align: center;
padding-bottom: 10px;
}
.carousel-inner > .item > img {
margin: 0 auto;
}
div.c-wrapper{
width: 100%;
margin: auto;
}
.navbar a {
color: black;
}
blockquote{
width:600px;
height:300px;
margin: 0 auto;
margin-top: 50px;
border: 2px 0px 2px 0px #000;
border: none;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}
.container-fluid
{
padding-top: 50px;
background-size:100% auto;
}
.top-buffer { margin-top:10px; }
.asheader{
background:url('asset/header_bg.png')no-repeat;
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
.asfooter{
background-image:url('asset/footer_bg.png');
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="asheader">
<div id="Intro" class="col-md-offset-5">
<img src="asset/logo_hitam.png" width="200px" height="50px">
</div>
<nav id="topnavbar" class="navbar transparent">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Product</li>
<li>Promo</li>
<li>Competition</li>
<li>Ladies Room</li>
<li>Need Help?</li>
</ul>
</div>
<!--- -->
</nav>
<div class="c-wrapper">
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="https://dummyimage.com/600x300/000/fff">
</div>
<div class="item">
<img src="https://dummyimage.com/600x300/000/000">
</div>
<div class="item">
<img src="https://dummyimage.com/600x300/000/000">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="lookbook">
<h2>Lookbook</h2>
<div id="" class="flexslider slide_thumb">
<ul class="slides">
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</div>
<div class="afterlookbook">
<div class="col-lg-6 col-sm-2 col-sm-12">
<img src="asset/mini-banner.jpg" width="100%" height="100%">
</div>
<div class="col-lg-6 col-sm-12">
<img src="asset/mini-banner.jpg" width="100%" height="100%">
</div>
<br><br>
<div class="top-buffer col-lg-6 col-lg-push-6 col-sm-12">
<img src="asset/quiz_mini-banner.jpg" width="100%" height="100%"></div>
<div class="top-buffer col-lg-6 col-lg-pull-6 col-sm-12">
<img src="asset/mini-banner.jpg" width="100%" height="100%"></div>
</div>
</div>
<blockquote style="border-top:5px solid black; border-bottom: 5px solid black;" class="quotes">
<p>asdfasdfasdfasdf</p>
</blockquote>
<div class="asfooter">
<div class="ladiesroom">
<h2>Ladie's Room</h2>
<table class="table table-bordered">
<tr>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
</tr>
</table>
</div>
<div class="instagram">
<h2>See The Latest On Instagram</h2>
<table class="table table-bordered">
<tr>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
<td><img src="http://via.placeholder.com/100x100"></td>
</tr>
</table>
</div>
</div>
</div>
<script defer src="asset/js/jquery.flexslider.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
if ($(window).width() < 960) {
$('.navbar').removeClass('transparent');
$('.navbar').toggleClass('navbar-default');
}
else {
$('.navbar').toggleClass('transparent');
$('.navbar').removeClass('navbar-default');
}
})
})
$(document).ready(function() {
$('.slide_thumb').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '.slide_thumb',
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
</body>
</html>
and here is index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="asset/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="asset/css/flexslider.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>
<style>
#media (min-width: 768px){
.navbar-nav{
float:none;
display: table;
table-layout: fixed;
}
}
.navbar.transparent.navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
#topnavbar,#bottomnavbar{
top: 15px;
}
#bottomnavbar{
height:100px;
}
.carousel-inner > .item > img {
margin: 0 auto;
}
div.c-wrapper{
width: 100%;
margin: auto;
}
.navbar a {
color: black;
}
.center-block {
margin-right: auto;
margin-left: auto;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
.asheader{
background:url('asset/header_bg.png')no-repeat;
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
.asfooter{
background-image:url('asset/footer_bg.png');
background-repeat:norepeat;
background-position: center;
background-size: contain;
}
blockquote{
border: none;
border-bottom: 1px solid #ccc;
border-top:1px solid #ccc;
}
</style>
</head>
<body>
<div class="asheader">
<div id="Intro" class="col-md-offset-5 col-md-5">
<img src="asset/logo_hitam.png" width="200px" height="50px">
</div>
<nav id="topnavbar" class="navbar transparent col-md-offset-2 col-md-8">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Product</li>
<li>Promo</li>
<li>Competition</li>
<li>Ladies Room</li>
<li>Need Help?</li>
</ul>
</div>
<!--- -->
</nav>
<div class="c-wrapper">
<div id="myCarousel" style="background:black !important" class="carousel slide col-md-offset-3 col-md-6">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="https://dummyimage.com/600x300/000/fff">
</div>
<div class="item">
<img src="https://dummyimage.com/600x300/000/000">
</div>
<div class="item">
<img src="https://dummyimage.com/600x300/000/000">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="lookbook col-md-offset-3 col-md-6 text-center">
<h2>Lookbook</h2>
<div id="" class="flexslider slide_thumb">
<ul class="slides">
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</div>
<div class="grid col-md-offset-3 col-md-6 text-center">
<table class="table">
<tr>
<td><img src="asset/mini-banner.jpg" width="100%" height="100%"></td>
<td> <img src="asset/mini-banner.jpg" width="100%" height="100%"></td>
</tr>
<tr>
<td>
<img src="asset/mini-banner.jpg" width="100%" height="100%">
</td>
<td> <img src="asset/mini-banner.jpg" width="100%" height="100%">
</td>
</tr>
</table>
</div>
<div class="quote col-md-offset-3 col-md-6 text-center">
<blockquote class="quote-card">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<cite>
Lorem I psum
</cite>
</blockquote>
</div>
</div>
<div class="lookbook col-md-offset-3 col-md-6 text-center">
<h2>Ladies Room</h2>
<div id="" class="flexslider slide_thumb">
<ul class="slides">
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="asset/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</div>
<div class="instagram col-md-offset-3 col-md-6 text-center">
<h2>See The Latest On Instagram</h2>
<table class="table table-bordered">
<tr>
<td><img src="http://via.placeholder.com/120x120"></td>
<td><img src="http://via.placeholder.com/120x120"></td>
<td><img src="http://via.placeholder.com/120x120"></td>
<td><img src="http://via.placeholder.com/120x120"></td>
<td><img src="http://via.placeholder.com/120x120"></td>
</tr>
</table>
</div>
<div class="instagram col-md-offset-3 col-md-6 text-center">
<h2>SUBSCRIBE TO OUR NEWSLETTER</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-check"></i>
</span>
</div>
</div>
<nav id="bottomnavbar" class="navbar navbar-inverse col-md-12 fixed-bottom">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Product</li>
<li>Promo</li>
<li>Competition</li>
<li>Ladies Room</li>
<li>Need Help?</li>
</ul>
</div>
<!--- -->
</nav>
</div>
<script src="asset/js/jquery.flexslider.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
if ($(window).width() < 960) {
$('.navbar').removeClass('transparent');
$('.navbar').toggleClass('navbar-default');
}
else {
$('.navbar').toggleClass('transparent');
$('.navbar').removeClass('navbar-default');
}
})
})
$(document).ready(function() {
$('.slide_thumb').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '.slide_thumb',
itemWidth: 210,
itemMargin: 5,
minItems: 4,
maxItems: 4
});
});
</script>
</body>
</html>
any solution ? thanks in advance. Here is my folder structure
I do a test in index2. i add this in my css
body{
background:url('asset/header_bg.png')no-repeat;
}
the image is showing up. So, it's 100% not a path problem
I guess the fact that the <blockquote> element is missing in the second html document is causing the backgroud-image dimensions to be missing too (not set). Somehow the size of the background-image is depending on that element. Adding some dimensions to the quote class seems to fix it, i.e.:
.quotes {
height: 600px;
}
I hope it helps!
Related
I have tried to accomplish the slider in the image. I also used the Bootstrap carousel, but the image size was always different, as well as the text on the left was jumping on top and then to the position where it belongs.
The text on the left (long text) was with the slider and was jumping back and forth, until it hits the right position. About Us and Who are we, were excluded from the slider.
Anyone has an idea to accomplish such a carousel/slider?
body,
html {
height: 100%;
background: #232c41;
}
.bg {
background: #3f9aa6;
}
.navbar-brand {
margin-left: 50px;
}
.ml-right {
margin-right: 50px;
}
.mid_bar {
background: #39435d;
}
.nav-link {
color: #e7ffff;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
margin-top: 10px;
margin-bottom: auto;
margin-left: 30px;
margin-right: 30px;
}
.nav-link:hover {
color: #e7ffff;
}
.space {
margin-left: 20px;
margin-right: auto;
}
.d-flex {
justify-content: center;
align-items: center;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.rd_bottom_right {
position: fixed;
margin-top: 25%;
margin-right: 35%;
}
.rd_bottom_left {
position: relative;
margin-top: 30%;
margin-left: 35%;
}
.rd_au {
padding-top: 5%;
width: 20%;
position: relative;
line-height: 1px;
margin-left: 50px;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
color: #e7ffff;
z-index: 999;
}
.rd_wwa {
margin-left: 50px;
width: 10%;
position: relative;
letter-spacing: 0.3em;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
color: #fdbc4a;
z-index: 998;
}
.ruttery {
width: 40%;
letter-spacing: 0.2em;
font-family: "Titillium Web", sans-serif;
font-size: 14px;
color: #e7ffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>RD - Raining Dreams</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
<img class="navbar-brand" src="img/logo.png" alt="">
<form class="form-inline ml-auto ml-right">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Forum</a>
</li>
<img class="navbar-brand space" src="img/mid_logo.png" alt="">
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#server">Server</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</ul>
</nav>
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" 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 rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- about us -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h2 class="rd_au">About Us</h2>
<p class="rd_wwa">Who we are</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I have understood that, you might have wanted your carousel text is on the left side then photos on the right side. I used bootstrap grid here to make two-column as text column and slides column. Photos are not responsive, I just added height to check if they are working properly, you can modify that as per your requirement.
body,
html {
height: 100%;
background: #232c41;
}
.bg {
background: #3f9aa6;
}
.navbar-brand {
margin-left: 50px;
}
.ml-right {
margin-right: 50px;
}
.mid_bar {
background: #39435d;
}
.nav-link {
color: #e7ffff;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
margin-top: 10px;
margin-bottom: auto;
margin-left: 30px;
margin-right: 30px;
}
.nav-link:hover {
color: #e7ffff;
}
.space {
margin-left: 20px;
margin-right: auto;
}
.d-flex {
justify-content: center;
align-items: center;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.rd_bottom_right {
position: fixed;
margin-top: 25%;
margin-right: 35%;
}
.rd_bottom_left {
position: relative;
margin-top: 25%;
margin-left: 35%;
}
.rd_au {
padding-top: 5%;
width: 20%;
position: relative;
line-height: 1px;
margin-left: 50px;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
color: #e7ffff;
z-index: 999;
}
.rd_wwa {
margin-left: 50px;
width: 10%;
position: relative;
letter-spacing: 0.3em;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
color: #fdbc4a;
z-index: 998;
}
.ruttery {
width: 40%;
letter-spacing: 0.2em;
font-family: "Titillium Web", sans-serif;
font-size: 14px;
color: #e7ffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>RD - Raining Dreams</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<body>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
<img class="navbar-brand" src="img/logo.png" alt="">
<form class="form-inline ml-auto ml-right">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Forum</a>
</li>
<img class="navbar-brand space" src="img/mid_logo.png" alt="">
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#server">Server</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</ul>
</div>
</nav>
<!--slider and text-->
<div class="container">
<div class="row">
<!-- text -->
<div class="col">
<h2 class="rd_au">About Us</h2>
<p class="rd_wwa">Who we are</p>
</div>
<div class="col">
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080'); height:120px">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080'); height:120px">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080'); height:120px">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" 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 rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>
Without fully understanding your question, I cleaned up the html (Added missing closing tags), used some bootstrap styles and moved the bottom block outside the carousel block. Not entirely sure this is what you are looking for but hopefully it helps.
body,
html {
height: 100%;
background: #232c41;
}
.bg {
background: #3f9aa6;
}
.navbar-brand {
margin-left: 50px;
}
.ml-right {
margin-right: 50px;
}
.mid_bar {
background: #39435d;
}
.nav-link {
color: #e7ffff;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
margin-top: 10px;
margin-bottom: auto;
margin-left: 30px;
margin-right: 30px;
}
.nav-link:hover {
color: #e7ffff;
}
.space {
margin-left: 20px;
margin-right: auto;
}
.d-flex {
justify-content: center;
align-items: center;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.rd_bottom_right {
position: fixed;
margin-top: 30%;
}
.rd_bottom_left {
position: relative;
margin-top: 30%;
}
.rd_au {
padding-top: 5%;
width: 20%;
position: relative;
line-height: 1px;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
color: #e7ffff;
z-index: 999;
}
.rd_wwa {
position: relative;
letter-spacing: 0.3em;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
color: #fdbc4a;
z-index: 998;
}
.ruttery {
width: 40%;
letter-spacing: 0.2em;
font-family: "Titillium Web", sans-serif;
font-size: 14px;
color: #e7ffff;
}
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
<img class="navbar-brand" src="img/logo.png" alt="">
<form class="form-inline ml-auto ml-right">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Forum</a>
</li>
<img class="navbar-brand space" src="img/mid_logo.png" alt="">
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#server">Server</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</ul>
</div>
</nav>
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" 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 rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- about us -->
</div>
<div class="container-fluid">
<div class="row">
<div class="col">
<h2 class="rd_au ml-5">About Us</h2>
<p class="rd_wwa ml-5">Who we are</p>
<p class="text-white mx-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a vulputate enim, sit amet molestie mi. Nam auctor nec turpis id auctor. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit
libero ante, eget lacinia mauris dapibus vel. Cras at porta ex. Curabitur lacus ipsum, consequat vitae ligula imperdiet, molestie fermentum felis. Duis pretium feugiat erat, nec imperdiet enim dignissim imperdiet. Nullam non tortor vestibulum,
tincidunt risus vitae, elementum velit.</p>
</div>
</div>
</div>
Good day, I' using bootstrap 3 and trying to make my bootstrap carousel in center. Here is the script which i try so far.
<!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">
<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>
<style>
.navbar.transparent.navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
#Intro {
display: inline-block;
}
#topnavbar {
top: 20px;
}
.carousel {
width:600px;
height:400px;
}
.carousel-inner > .item > img {
margin: 0 auto;
}
div.c-wrapper{
width: 100%; /* for example */
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}
.container{
border: 1px;
}
</style>
</head>
<body>
<div class="container" style="border:1px solid #cecece;">
<div id="Intro" class="col-md-offset-5">
LOGO
</div>
<nav id="topnavbar" class="navbar transparent">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Product</li>
<li>Promo</li>
<li>Competition</li>
<li>Ladies Room</li>
<li>Need Help?</li>
</ul>
</div>
</nav>
<div class="c-wrapper">
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="item">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="item">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</body>
</html>
But, with my script above my Caraousel still in the left of screen. then i try to searching with google and i find this https://stackoverflow.com/questions/19582340/make-bootstraps-carousel-both-center-and-responsive but still no help . Any solution ? thanks in advance and sorry for my bad english
You're simply missing one line of code:
.carousel {
margin: 0 auto;
}
The carousel is a <div>, which is a block-level element, so you centralise it by setting the horizontal margins to auto. The shorthand margin: 0 auto sets the top and bottom margins to 0 while setting the horizontal margins to auto.
Here's a working example (click 'Full page' after running the snippet):
.navbar.transparent.navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0, 0, 0, 0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0%, rgba(0, 0, 0, 0.00)), color-stop( 100%, rgba(0, 0, 0, 0.00)));
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);
}
#Intro {
display: inline-block;
}
#topnavbar {
top: 20px;
}
.carousel {
width: 600px;
height: 400px;
margin: 0 auto;
}
.carousel-inner>.item>img {
margin: 0 auto;
}
div.c-wrapper {
width: 100%;
/* for example */
margin: auto;
}
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
width: 100%;
/* use this, or not */
margin: auto;
}
.container {
border: 1px;
}
<!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">
<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>
</head>
<body>
<div class="container" style="border:1px solid #cecece;">
<div id="Intro" class="col-md-offset-5">
LOGO
</div>
<nav id="topnavbar" class="navbar transparent">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Product</li>
<li>Promo</li>
<li>Competition</li>
<li>Ladies Room</li>
<li>Need Help?</li>
</ul>
</div>
</nav>
<div class="c-wrapper">
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="item">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="item">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</body>
</html>
Hope this helps! :)
I have started developing a website using bootstrap and it is responsive but only to some extend.
If i minimize the browser, the contents auto-arrange itself but as i keep on minimizing at some point the h1 & p contents stop being responsive.`
<html lang="en">
<head>
<title>NiKuLsAn DeSiGn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.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>
<style>
body {
background-color: black;
}
.imageAndText {position: relative;}
.imageAndText .col {position: absolute; z-index: 1; top: 50px; right: 70px;}
.imageAndText .col2 {position: absolute; z-index: 1; top: 200px; left: 150px;}
.imageAndText .col3 {position: absolute; z-index: 1; top: 50px; left: 150px;}
p{
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="imageAndText">
<img src="banner1.jpg" class="img-responsive" style="width:100%; height:auto;">
<div class="col">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div class="col3">
<img src="logo.jpg" alt="logo" />
</div>
<div class="col2">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b><br>A professional skier and a musician.</p>
</div>
</div>
</div>
</div>
</body>
Please help as I am not able to understand what is going wrong.
I have created an example where I have used minimal custom CSS and everything else is wprking using bootstrap framework.. Have a look and ask your queries.
body {
background: url('http://placehold.it/1920x400') no-repeat center center;
background-size: cover;
/* Workaround for some mobile browsers */
min-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #000;
}
.featurette-divider {
margin: 20px 0;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-wrapper CustomNavbar">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo Goes here</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<hr class="featurette-divider">
<div class="container ">
<div class="col-sm-12">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b>
<br>A professional skier and a musician.</p>
</div>
</div>
I have a problem in my css. I want to make my navbar like this ( as you can see, it has no background on navbar and it joins with slider ). I have tried every advice in youtube tutorials but nothing worked.
Here's the link I want to show you:
http://theme.ridianur.com/alamak/
I was able to change the color background of my navbar by opening bootstrap.min.css in notepad, search for "navbar-default", and change the color code. But, I wasn't able to make it no background like I want to.
My html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="boot/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Image Slider</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>NEWS</li>
<li>ABOUT</li>
<li>CONTACT US</li>
</ul>
<div class="logo">
<img src="kets.png">
</div>
</div>
</nav>
<div class="container-fluid hero-slide">
<div class="row">
<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="img/1.jpg" alt="Cats1">
<div class="carousel-caption">
<div class="tekslide1">
<h1>Hewan yang mainstream</h1>
<p>Kita juga gatau kenapa milih topik kucing</p>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="Cats2">
</div>
<div class="item">
<img src="img/3.jpg" alt="Cats3">
</div>
<div class="item">
<img src="img/4.jpg" alt="Cats4">
</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>
</body>
</html>
and my css :
#charset "utf-8";
#font-face{
font-family: 'custom';
src: url('OpenSans-Regular.ttf') format('truetype'); //<-- semicolon
}
#font-face{
font-family: 'custom1';
src: url('Alternate.ttf') format('truetype'); //<-- semicolon
}
#media (min-width: 768px){
.navbar .navbar-nav{
display: inline-block;
float: none;
vertical-align: top;
font-family: 'custom';
letter-spacing: 5px;
padding-top: 12px;
margin-bottom: -20px;
}
.tekslide1{
font-size: 25px;
padding-left: 300px;
padding-bottom: 500px;
font-family: 'custom1';
}
.navbar .navbar-collapse{
text-align: right;
padding-right: 120px;
}
.navbar-default .navbar-collapse .nav >li >a {
color: #EEEEEE;
margin-left: 10px;
margin-right: 5px;
font-size: 13px;
}
.navbar-default .navbar-collapse .nav >li >a:hover, .navbar-default .navbar-collapse .nav >li >a:focus{
color: #BDBDBD;
background: none;
}
.logo{
float: left;
padding: 2px;
margin: 2px;
margin-bottom: -15px;
margin-left: 5%;
border: none;
border-radius: 100px;
}
.hero-slide{
margin-top: -20px;
}
.navbar li { color: #000 }
Any help would be appreciated. Thanks!
I'll explain this in pseudocode. If you want help you need include relevant bits of html and css in your post, not the archive of an entire site.
This effect you're looking for is nothing more than:
<div class="wrapper">
<div class="navigation">
</div>
<div class="banner">
</div>
</div>
and
.wrapper{background:url('your_image.jpg');}
.navigation, .banner{background:transparent;}
A graphic applied to a parent container and navigation / banner with transparent backgrounds.
I'd like to show an image, full height image, like this website on every browsers without writing specific number of pixels like height: 400px;.
mobile
laptop
How should I change my css? Would you please let me know?
html {
font-size: 62.5% !important; /* 10 px */
}
/*header {
position: absolute;
text-align: center;
top: 0px;
z-index: 1000;
color: #fff;
width: 100%;
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}*/
/*img {
display: block;
max-width: 100%;
height: auto;
}*/
.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel .carousel-control {
visibility: hidden;
}
.carousel:hover .carousel-control {
visibility: visible;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-inner {
margin-bottom:50px;
}
/*.logo {
float: left;
text-align: left;
display: inline-block;
}*/
.transparent-header {
z-index: 22;
position: absolute;
width: 100%;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
#carousel-example-generic {
width: 100%;
height: 100%;
position: relative;
}
.nav::after,
.nav::before,
.navbar-header::after,
.navbar::after {
display: table-caption;
}
.nav.navbar-nav li,
.nav.navbar-nav li a {
display: inline-block;
}
#gnav {
font-size: 0.9em;
width: 100% !important;
}
#gnav
/*#gnav_nav*/ {
text-align: center;
}
#logo
img {
display: block;
margin: auto;
}
#intro {
position: relative;
overflow: hidden;
}
#bg-image3 {
background: url("http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-1.jpg");
}
.bg-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<meta name=”robots” content=”noindex,nofollow,noarchive,noodp,noydir”>
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}" />
{% block additional_css %}{% endblock %}
{% block custom_css %}{% endblock %}
</head>
<body>
<div id="wrapper">
<!-- <div class="container" id="range">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:Yellow;">ExtraSmall</div>
<div class="hidden-xs col-sm-6 col-md-4 col-lg-3" style="background-color:green;">Small</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" style="background-color:blue;">Midium</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-3" style="background-color:Red;">Large</div>
</div>
</div> -->
<!-- Header -->
<header id="header" class="header clearfix fixed transparent-header" >
<div class="container-fluid" id="header-inner">
<div class="row">
<!-- Global Navigation -->
<div id="gnav" class="" data-spy="affix" data-offset-top="94">
<nav class="navbar navbar-inverse" id="gnav_nav">
<ul class="nav navbar-nav" id="gnav_ul">
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">商品紹介</a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">ご注文</a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">お問い合わせ</a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">会社案内</a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- .nav .navbar-nav -->
</nav> <!-- .navbar .navbar-default -->
</div> <!-- #gnav .col-md-9 -->
<!-- Logo -->
<div id="logo" class="">
<a href="#">
<img src="http://vignette2.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/20120422044236" id="logo-img" class="img-responsive logo-img" height="50" width="50">
</a>
</div> <!-- #logo .col-sm-3 -->
</div> <!-- .row -->
</div> <!-- .container -->
</header> <!-- #header .clearfix -->
<section id="intro">
<article id="apple">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-1.jpg" alt="First slide">
</div>
<div class="item">
<img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-2.jpg" alt="Second slide">
</div>
<div class="item" id="bg-image3">
<div class="bg-image" id="bg-image3">
<h2 class="" id="">This is the headline</h2>
<p class="" id="">This is a pen. This is an apple. U~n, apple pen.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div>
<span>Bootstrap carousel</span>
</div>
</article>
</section>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
</div> <!-- #wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap: 3.3.4, HTML5, jQuery: 2.1.3
Set your image as background-image for that element with background-size: cover;
Set that element to height: 100vh;
Quick example: https://jsbin.com/dajepaw/1/
*{box-sizing:border-box;margin:0;}
html, body{height:100%;font:14px/1.4 sans-serif;}
header {
position: fixed;
z-index: 1;
width: 100%;
top: 0;
height: 72px;
background: #fff;
}
article {
background: #fff;
height: 50vh;
} article:nth-child(odd) {
background: #f7f7f7;
}
footer {
background: #444;
height: 72px;
}
/* SPECIAL CLASSES */
.fullWithBackground {
height: 100vh;
background: url(https://i.stack.imgur.com/LCupt.png) 50% fixed;
background-size: cover;
color: #fff;
}
.centerInner{
display: flex;
align-items: center;
justify-content: center;
}
<header>Header</header>
<div class="fullWithBackground centerInner">
<div>GALLERY</div>
</div>
<main>
<article>Article 1</article>
<article>Article 2</article>
</main>
<footer>Footer</footer>