I am attempting to select header-logo I tried the following selector suggested by css selector
body > div > div.header-logo
{
background-image: url("logo.png");
}
For the html of the below
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
But when I view it in chrome it is showing unresolved
you don't need the > sign to track the element you just use space when its element and use . if its sub element
example : body div.header-logo
you can find useful tutorial for css here
div>div.header-logo
{
background-image: url("https://tproger.ru/wp-content/uploads/2015/03/stack-overflow-logo-2.png");
width: 720px;
height: 270px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
but, if you wont add a logo, correct do this:
<div class="header-logo">
<img src="logo.png" alt="It's a logo">
</div>
Related
I have this html code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/static/index.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script src="/static/index.js"></script>
</head>
<body>
<div class="container-fluid" id="content">
<div id="suggestion_modal_content" class="modal">
<div>
</div>
Close
</div>
</body>
</html>
now, this is how the modal looks like (after I am adding text):
when I use google dev tools, this is the modal element css values:
when I remove the line max-width:500px, the page looks like I need (full screen).
I tried to add:
.modal{
max-width: none;
}
but it does not work.
What am I doing wrong?
The jQuery Modal CSS is being included after your custom CSS. Because both stylesheets use the same selector (.modal) with the same specificity, the one that comes last in the cascade (in this case, the jQuery Modal CSS) overwrites the other's style.
You should change the order of the stylesheets in the <head> element, and ensure your custom styles always come after any vendor styles. This will allow you to overwrite vendor CSS while using selectors of the same specificity without having to use !important.
<!-- jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- custom -->
<link rel="stylesheet" href="/static/index.css"/>
<script src="/static/index.js"></script>
I am trying to follow along on Colt Steele's course and for some reason my background image will not show up. I've checked everything and I'm stuck. I tried writing in the style tag and inserting the background in html instead of creating a separate css file like he did and it did not work. So instead I tried to just make a separate css file which I'm more comfortable with so far. Please let me know what I can do. Thank you!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#header {
background-image: url("imgs/header.jpeg");
}
</style>
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
Quarantine Pal
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Blog</h1>
<p class="lead">Lorem ipsum</p>
Do Something
Another Thing
</section>
<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/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
CSS
#header {
background-image: url(https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80) !important;
}
Your URL needs to be a string i.e you need to add an apostrophe ( ' ) on each side of it ('https://images.unsplash...'):
#header {
background-image: url('https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80') !important;
}
I'm trying to use Bootstrap's navigation tab feature, but I can't seem to get it working.
What am I doing (or not doing) wrong?
<!DOCTYPE html>
<html>
<head>
<title>Luis Gonzalez's portfolio</title>
<link rel="stylesheet" type="text/css" href="portstyle.css"/>
</head>
<body>
<div class="header">
<div class="navi">
<ul class="nav nav-tabs">
<li class="active">Creations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
you'll need to reference the bootstrap files.
for now you can use these links:
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Luis Gonzalez's portfolio</title>
<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.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" type="text/css" href="portstyle.css"/>
</head>
<body>
<div class="header">
<div class="navi">
<ul class="nav nav-tabs">
<li class="active">Creations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's, CSS and JavaScript. Though you must also include jQuery:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
side note - ensure that you link to your own stylesheet last, meaning after you've linked to all the bootstrap files. Otherwise, you might get some unexpected behaviours as in bootstrap CSS overriding your own CSS etc.
It doesn't even show up in the Chrome Inspector. I am doing something wrong but don't know what.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id=="container header_div">
</div>
</header>
</div>
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
And the CSS is:
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(../images/header_background.jpg);
background-position: center;
background-size: cover;
}
I have added all of the background-properties in the css and the div has a size.
My file structure is like this:
I see several things that can cause the issue:
There is double equal here: <div id=="container header_div">. Should
be single. In addition, I see two words in the id separated by
space. ID's cannot be chained like classes, and this is not a valid
syntax. Since you style #header_div, the id attribute on the div
should be id = "header_div".
The relative path to the image starts with two dots. As a result, you step out of the current directory. Since your images folder is in
the same directory as the page.html, the filepath should be:
url(/images/header_background.jpg);
To see the image you would need to declare the height in the #header_div element as well.
By doing this, I was able to see a background image in my test. I hope this helps.
Not exist <div id="container header_div"> in you css, change to <div id="header_div">
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-position: center;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id="header_div">
</div>
</header>
</div>
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I had a similar issue like this before. This is what I did. I set the div background to just this background: url("./images/header_background.jpg");
I just want to ask how can I disable responsiveness of Bootstrap. I currently followed the instructions in the tutorial but I can't make my page non-responsive.
What I did in my code is:
1. I removed the viewport in meta tag
2. Set a width in the class .container
When I resized my windows the 3 columns are became responsive.
Here's my sample fiddle
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chuosenko</title>
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./third_party/jqueryui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="./third_party/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="./third_party/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="./js/packery.pkgd.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-4">
<h1>COL 1</h1>
</div>
<div class="col-md-4">
<h1>COL 2</h1>
</div>
<div class="col-md-4">
<h1>COL 3</h1>
</div>
</div>
</body>
</html>
Here's my css:
.container {
width: 1280px;
max-width: none !important;
}
Can you help me with this?
use col-xs-* class for grid. Like suggested in the tutorials.