Where is this grey background coming from? - html

I cannot figure out why the container-fluid div in my body has a grey background on top nor how to get rid of it. I'm assuming it's something that bootstrap is adding.
I was able to get rid of it with
container-fluid *{
background-color:#fff;
}
but then that caused problems with the button background of the jumbotron.
<!doctype html>
<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.0">
<title>Resuarant Name</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/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]-->
<nav class="navbar navbar-right">
<div class="container">
<ul class="menuItems">
<li>Menu</li>
<li>Reservations</li>
<li>Reviews</li>
<li>Photos</li>
</ul>
<form id="searchForm">
Search
<input type="text" name="search"><br/>
</form>
</div>
</nav>
<nav class="navbar-header">
<div class="container">
<ul class="mainMenu">
<img id="logo" src="images/logo001.png"/>
<li>Home</li>
<li>History</li>
<li>Recipes</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
css:
.menuItems{
display:inline-block;
list-style:none;
float:right;
}
.menuItems li{
float:right;
padding: 0 10px;
}
#searchForm{
float:right;
}
#logo{
float:left;
max-height:80px;
padding-left:200px;
}
.mainMenu{
float:left;
width:100%;
margin-right:auto;
margin-left:auto;
padding:20px 50px;
border-top:dotted thin;
border-bottom:dotted thin;
}
.mainMenu li{
display:inline-block;
float:right;
padding: 20px 25px;
}
.welcomePost *{
}
.jumbotron *{
float:right;
padding: 0 150px;
}

Grey background is coming from jumbotron which is its default color just change jumbotron color like this
.jumbotron {
background-color: // whatever color you want or you can also make it "none"
}
For more on Jumbotron: https://getbootstrap.com/

Related

Bootstrap 4 aligning <a> tag in absolute center of div

I'm totally new to Bootstrap.
I'm having serious problems at aligning an <a> tag in the vertical and horizontal middle of a div.
I've tried to use .mx-auto, margin: 0 auto and other usual methods I know of. I'm running out of otions here.
Can anyone advise me on this.
here is a fiddle for my code
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
}
.brand-text{
font-size: 2em;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
As per my understanding,you want to align a tag to vertical and horizontal center inside <div class="banner-logo"></div>. For this you can use bootstrap 4 classes mx-auto and my-auto for the <div> that wraps <a> tag
.banner-logo{
background-color:red;
padding:20px
}
a.brand-text{
text-decoration:none;
color:white;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
There are multiple ways for vertical alignment.
You can do by giving position absolute, make the parent div position relative.
Here is the Code:-
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
position:relative;
}
.banner-logo a
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.brand-text{
font-size: 2em;
color: white;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
You can skip mx-auto and my-auto for that fix, text-center and padding will do the work for you. Check this solution, it's simple. Hope it'd help
.banner-logo{
background-color: red;
padding: 10px 0;
}
a.brand-text{
text-decoration: none;
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
Webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
</body>
</html>

My logo isn't fitting into the nav-bar

The whole bootstraps thing is killing me. I'm so lost on this subject if there's anyone who can help me out on this, I'll be really thankful.
Sorry that my style sheet can't connect to this website.
My nav-bar looks like
this
but it should look like
this
I truly hope you can help me get out of this mess!
* {
font-family: 'Oxygen', sans-serif;
background-color: maroon;
}
/** Header **/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/flying-cat.png') no-repeat;
width: 150px;
height: 150px;
left: 15px;
background-size: contain;
margin: 10px 10px 10px 10px;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
The image doesn't fit because you've set it to be an absolute size, which is larger than the nav-bar. Your CSS class logo-img contains height: 150px which makes it break out of the nav-bar. Set a lower height property so that it fits within the nav-bar.
You've also used a div inside that navbar-brand div which isn't necessary and is causing problems, even in bootstrap boiler plates the navbar-brand image is an image element within that div. Put an image tag inside that navbar-brand div, specify a width and specify a height of auto so that it scales within its boundaries.
Here is the way it is done in Bootstrap examples, you will need to tweak this when using your own image source though.
Edit your navbar-header HTML so it looks like this:
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<img src="https://placeholdit.co//i/555x150"></a>
</div>
Add the following rule to your CSS:
.navbar-brand {
padding: 10px;
}
The problem was the unnecessary styling that bootstrap applies.
So
You'll need to set your Header to fixed height, Then set the div with the background to a height within the header's height for a logo it's should be problematic in the long run, In case of making the website responsive.
I made a somewhat close to what you need demo, take it from there to your desired design.
* {
font-family: 'Oxygen', sans-serif;
margin:0;padding:0;
}
header{
height: 100px;
}
#header-nav {
background-color: #f6b319;
border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}
#logo-img {
background: url('4.png') no-repeat;
display:inline-block;
width:80px;
border:1px solid;
height: 80px;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>

Bootstrap custom header using navbar

I'm trying to make a custom header for my website using boostrap navbar class, I'd like to change the links text color to white, the navbar background color to black and also change the links highlight color when the mouse goes over them.
Here is my html:
<html>
<head>
<meta charset="UTF-8" />
<!-- css files -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="main.css">
<!-- javascript -->
<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- webiste header -->
<nav class="navbar navbar-default navbar-fixed-top header">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>link1</li>
<li>link2</li>
</ul>
</div>
</div>
</nav>
<body>
<html>
and here is my css:
.header{
background-color:#333333;
color:red;
font-size:1.5em;
}
.header li{
border-bottom:3px solid #333333;
}
.header li:hover{
background-color:black;
border-bottom:3px solid orange;
}
Everything seems to work but the links color is grey instead of white as you can see on this screenshot.
screenshot
.header a {
color: #fff;
}
.header a:hover {
color: #f00;
}

mobile web page, but it didn't take occupy the full screen

Trying to write a mobile web page, but it doesn't take the full screen on the emulated mobile page (neither on my LG Pro mobile phone). Any reason why?
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">
</head>
<body style="position:absolute; top:0; bottom:0; height=100%">
<!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">List</h1>
<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
</div>
</header>
<nav id="nav" role="navigation">
<div class="block">
<h2 class="block-title">Chapters</h2>
<ul>
<li class="is-active">One</li>
<li>
Two
</li><!--
--><li>
Three
</li><!--
--><li>
Four
</li><li>
Five
</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<div id="main" role="main" style="height=100%">
<article class="block prose">
<h1>Welcome To John's recollection</h1>
Wonderful things in life
</article>
</div>
<footer role="contentinfo">
<div class="block prose">
<p class="small">Copyright © John & Joe</p>
</div>
</footer>
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</body>
</html>
First of all you got some typos that you need to fix:
Take a look at body style attribute (height value), you wrote:
<body style="position:absolute; top:0; bottom:0; **height=100%"**>
But you need:
<body style="position:absolute; top:0; bottom:0; **height:100%"**>
First fix those kind of typos on page.
ONE BIG MISTAKE is to make your "body" absolute. Please take a look at how positioning really works.
http://www.w3schools.com/css/css_positioning.asp
To fix this, remove from "body" positioning at all. And make another element(div in your case), that will be positioned absolute, if you really need that.
For more help, try to make some live example of your project so we can inspect it better.
Without seeing what you done in CSS we can't be sure that this answer will fix your problem.
But it looks like you misunderstand concept of positioning, and over complicated your DOM and CSS.
use this meta tags :
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
and for responsive design YOU should use Media queries in your css
Media query is an easy way like this css code :
#media screen and (max-width:600px){
#bgimg1{display:none}
#bgimg{display:block}
.usertext{font-size:30px;}
.no_order2{font-size:20px;margin:auto 20%;margin-top:35%;}
#show-time{left:-15%;}
}
you can use !important to run your new codes over previous code
Thanks to the help of mehdi and Zlatko Vujicic, created a hack which appears to serve the purpose. The change? Moved footer to the immediate parent div of , use the idea of sticky css (thanks Zlatko Vujicic) to extend the height of the above mentioned div.
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
.wrapper1 {
min-height: 100%;
height: auto !important;
/*height: 100%;*/
margin: 0 auto -4em;
}
</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">
<style type="text/css">
#media screen and (max-width:600px{
#bgimg1{display:none}
#bgimg{display:block}
.usertext{font-size:30px;}
.no_order2{font-size:20px;margin:auto 20%;margin-top:35%;}
#show-time{left:-15%;}
}
</style>
</head>
<body style="position:absolute; top:0; bottom:0; height:100%">
<!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height:100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height:100%">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">List</h1>
<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
</div>
</header>
<nav id="nav" role="navigation">
<div class="block">
<h2 class="block-title">Chapters</h2>
<ul>
<li class="is-active">One</li>
<li>
Two
</li><!--
--><li>
Three
</li><!--
--><li>
Four
</li><li>
Five
</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<div id="main" role="main" class="wrapper1">
<article class="block prose">
<h1>Welcome To John's recollection</h1>
Wonderful things in life
<footer role="contentinfo" style="height: 4em; position: fixed; bottom: 0; width: 100%">
<p align="center" class="small" style="position: relative; top: 40%">Copyright © John & Joe</p>
</footer>
</article>
</div>
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</body>
</html>

CSS not being applied to ID

My css isn't being applied to a specific img id element on page. I have spent about 30 minutes trying to figure this thing out to no avail. I have 2 other elements with the exact same html and css being applied correctly. Image in question: http://i.imgur.com/Lrtucyo.gif The other two images are just like that one as far as i can tell.
body{
font-family: 'Montserrat', sans-serif;
background: url(/img/body_bg.jpg);
color:#ddd;
font-weight: 700;
font size: 30px;
}
.container{
margin: 0 auto;
}
#blue{
height:8px;
background-color: #4eb1ba;
margin-bottom: 45px;
}
#img{
border-bottom: 2px solid #4eb1ba;
}
/*BOTTLE*/
}
#spray{
border: 1px solid #4eb1ba;
}
/*/BOTTLE*/
/*Vacuum*/
#vacuum{
border: 1px solid #4eb1ba;
margin-left: 400px;
margin-top: -130px;
}
/*Vacuum*/
/*MOP*/
#mop{
border: 1px solid #4eb1ba;
margin-left: 630px;
margin-top: -130px;
}
#portfolio{
margin-top:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Get In Touch</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row-fluid">
<h4 class="underline"><span>Recent images</span></h4>
<img src="img/clean-home1.jpg" width="960" height="540" alt="">
<div id="portfolio">
<div class="row-fluid">
<div class="span4">
<img src="img/bottle.gif" id="spray" width="180" height="130">
</div>
<div class="row-fluid">
<div class="span4">
<img src="img/vacuum.gif" id="vacuum" width="180" height="130"></img>
</div>
<div class="row-fluid">
<div class="span3">
<img src="img/mop.gif" id="mop" width="180" height="130" ></img>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You have a random closing brace before the #spray{} rule. Not sure if that is the problem, but maybe.
As I saw your codes, you don't have any element with id img in your HTML codes. I think you likely want to apply this CSS rule for all img elements, if so, replace your #img with img in your CSS style
Replace
#img {
border-bottom: 2px solid #4eb1ba;
}
with
img {
border-bottom: 2px solid #4eb1ba;
}