I have the following CSS and HTML code that I am using to develop a web project:
style.css:
body {
background-color: red;
font-size: 14px;
font-family: Roboto,arial,sans-serif
color: gray;
}
img {
height: 92px;
width: 272px;
}
a {
color: gray;
}
a:visited {
text-decoration: none;
}
.navbutton,
.footbutton {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav-img {
border-radius: 50%;
height: 32px;
width: 32px;
}
index.html:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Google</title>
<link rel="stylesheet" type="text/css" href="style.css?version=8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar container">
<a class="navbutton" href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
<a class="navbutton" href="https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US">Store</a>
<a class="navbutton" href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
<a class="navbutton" href="https://www.google.com/imghp?hl=en&authuser=0&ogbl">Images</a>
<a class="navbutton nav-img" href="https://www.google.com">
<img src="https://i.stack.imgur.com/34AD2.jpg">
</a>
</div>
<div class="bod">
<div class="main-img">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google">
</div>
<input type="text">
</div>
<div class="srch-button">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
<footer>
<div class="footbutton">
<a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2m--ahpm-0000000078-0000000001&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1#!/">
Advertising
</a>
<a href="https://smallbusiness.withgoogle.com/?subid=us-en-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=us-en_US-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u">
Business
</a>
<a href="https://www.google.com/search/howsearchworks/?fg=1">
How Search Works
</a>
<a href="https://sustainability.google/commitments/?utm_source=googlehpfooter&utm_medium=housepromos&utm_campaign=bottom-footer&utm_content=">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAMAAAAiV0Z6AAAAPFBMVEVLoEN0wU6CzFKCzFKCzFKCzFKCzFJSo0MSczNDmkCCzFJPoUMTczNdr0gmgziCzFITczMTczMTczMTczPh00jOAAAAFHRSTlPF/+bIsms8Ad///hX+//5/tXw7aMEAx10AAACaSURBVHgBbc4HDoRQCATQ33tbvf9dF9QxaCT9UQaltLHOh/golXKhMs5Xqa0xU1lyoa2fXFyQOsDG38qsLy4TaV+sFislovyhPzLJJrBu6eQOtpW0LjbJkzTuTDLRVNKa3uxJI+VdiRqXSeu6GW+Qxi29eLIi8H7EsYrT42BD+mQtNO5JMjRuC4lSY8V4hsLX0egGijvUSEP9AbylEsOkeCgWAAAAAElFTkSuQmCC">
Carbon Neutral Since 2007
</a>
<a href="https://policies.google.com/privacy?hl=en&fg=1">
Privacy
</a>
<a href="https://policies.google.com/terms?hl=en&fg=1">
Terms
</a>
<a href="https://www.google.com/">
Settings
</a>
</footer>
</html>
For some reason, whenever I make a change to the css file, the only changes that I can see reflected in the browser (Chrome) are any changes I make to the img dimensions in the img selector (ex: I will see a change in browser if I change the height of img to 100px). No other changes are seen in browser. I have already tried adding a query string to the link href in the HTML file, as well as disabling caching in Chrome's developer tools menu. I assume it is a caching issue, however, the fact that I can still see only image dimension changes makes it a bit more complex. Anyone know any solutions?
Example of issue:
changing width in img selector from 272px to 372px is reflected in browser consistently. Changing background color from white to red (as shown in code above) is not shown in browser (rendered as white background).
It's likely your CSS styles are being superseded by another class, e.g. if you're importing a library that's applying it's own CSS.
You can either increase the specificity of your targeting by adding class names (see order of precedence).
.redContainer {
background-color: red;
}
or use !important to override other styles.
body {
background-color: red !important;
}
to me it worked. I saved your code here
and it works when I change some of the properties like background color or font color and etc. I ran the code on chrome
for example I changed background color:
body{
background-color: blue;
}
and it worked
so I guess the problem lies within your head element. maybe one of the stylesheet link addresses is wrong or maybe one of the stylesheets is getting more priority in running the css rules
Related
I'm trying to learn to use jquery mobile with Google Apps Script, and my hosted page isn't loading the CSS for it, it seems like. This code should have a gray header and footer bar, and if I copy and paste the dev data-page section, it should still only show up once. Neither of those things happen.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Testing</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Hello, World!</h1>
<p>Welcome to my page</p>
</div>
<div data-role="footer">
<h2>Testing More</h2>
</div>
</div>
</body>
</html>
What am I missing to make this work?
Note: I also tried with jquery 2.2.4 instead of 3.4.1.. no difference...
Figured it out... it's two part:
First, the hosted version of jquery mobile is 1.4.5, which is still incompatible with jquery 3.
Second, jquery has to be loaded BEFORE jquery mobile, so it had to go above it on the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
I think you should be using .ui-header or .ui-footer there are only two instances in the css that use data-role and they are here .ui-mobile [data-role=page],.ui-mobile [data-role=dialog],.ui-page {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display: none;
border: 0
}
if you add .ui-header {background-color:gray } to the css then the background of the header is gray.
You can see all of this very clear if you view sources and prettify the code in Chrome Developer Tools
I am a beginner when it comes to website design. How do I get rid of the whitespace between my jumbotron navbar and footer?
There is whitespace between the jumbotron and the following Navbar aswell as the following footer thereafter. Attached is the following jsfiddle> https://jsfiddle.net/5c6kx9tu/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="mj.css">
<title>Michael Jordan Tribute Page</title>
<!-- 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.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Quotes</li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</body>
And here is the css
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin-bottom: 0px;
}
.footer{
margin: 0px;
background-color: grey;
bottom: 0px;
padding: 20px;
}
.text-center{
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
I'd strongly recommend not modifying core bootstrap styles, but rather utilizing some helper classes.
If you're using Bootstrap 3 (which you are loading in your code), you'll need to write some helper classes, like I've done in this fiddle, and below:
CSS helper classes (you can add other - mt (for margin top), 5em (for .5 em), etc:
/* helper class, modeled after Bootstrap 4 helper classes */
.mb-0 {
margin-bottom: 0 !important;
}
Then simply add those classes to your markup, like below:
<body>
<div class="jumbotron mb-0">
</div>
<nav class="navbar navbar-default mb-0">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Quotes</li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</body>
Working example / fiddle: https://jsfiddle.net/cale_b/0gn7w3Lk/1/
If you're using Bootstrap 4, those helper classes already exist, and you can use them: https://v4-alpha.getbootstrap.com/utilities/spacing/
If you add
.navbar {
margin: 0;
}
That should clear it up. Play around with that.
Make sure you add that somewhere AFTER your include of the bootstrap style sheet, so it overrides the bootstrap css.
To remove the whitespace between jumbotron and navbar, all you need to do is calling your stylesheet below the bootstrap stylesheet. And then, in your stylesheet, you need the following lines to remove the whitespace between navbar and footer:
.navbar {
margin-bottom: 0px;
}
In my opinion, it's better not to change bootstrap own classes, make your owns classes or id's instead.
Also keep in mind where you are going to add css, it's better add css after bootstrap otherwise you could change bootstrap logic. This means you could generate unwanted behaviors.
Here just an example adding id's: https://jsfiddle.net/5c6kx9tu/5/
#myJumbotron{
margin-bottom:0px;
background-color: red;//this color it's just to see the problem clear
}
#myNavbar{
background-color: green;//this color it's just to see the problem clear
margin-top: 0px;
}
The best solution then, in my opinion, is to make another file included after bootstrap and make your own classes for the elements that you want to change.
I'm trying to display an image with clickable areas, which shows a different text description at the bottom of the image for each clickable area. This is the code I have:
Edit: I can't figure out how to get this code to display properly either, sorry :(
<DOCTYPE! html>
<head>
<style>
a .img {
border:none;
}
.caption {
display: none;
}
.caption:target {
display: block;
position: absolute;
top: 510;
text-align: centre;
}
body {
background-color: #1e1e1e;
color: #ffffff;
font-family: Trebuchet MS;
font-size: 16pt;
}
</style>
</head>
<body>
<img src="blahblah.png" usemap="#blahblah">
<map name="blahblah">
<area shape="rect" coords="XX,XX,XXX,XXX" href="#text1">
<div class=caption id=text1>
<u>display some text</u>
</div>
<area shape="rect" coords="XX,XX,XXX,XX" href="#text2">
<div class=caption id=text2>
<u>display some other text</u>
</div>
</body>
</html>
It works perfectly in Chrome, but my text will not appear in IE8. Can anybody tell me why, and maybe suggest a fix? Trying to avoid javascript because I know pretty much nothing about it.
The reason why this does not work in IE8 is because you are using within your CSS the :target selector. This is a CSS3 selector which is not supported in IE8. See documentation: http://www.w3schools.com/cssref/sel_target.asp
An easy fix would be to use the external Javascript library: selectivizr.
This make it possible to use any CSS3 properties. Please keep in mind if you use this you also need to include jQuery.
Your HTML would look something like this:
<DOCTYPE! html>
<head>
<!-- CDN VERSION OF jQUERY, You can also download it -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<!-- The rest of your HTML -->
If you just include those two scripts within your HTML, without any further modifications, your website will work.
To start i am very new to bootstrap but i wanted do something similar to this example:text over background image but inside of a bootstrap framework. I have tried creating a div inside the container below the navbar but that seems to put a white background behind the text covering the image behind... you can see my code here: JSFiddle: my code. or it is as follows:
CSS
body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#import url(http://fonts.googleapis.com/css?family=Oswald:700);
html {
background: url(http://3.bp.blogspot.com/_6r-mOI0OuO0/S6q3VodCqI/AAAAAAAAB5A/Uycl8dCr92A/s1600/NYC15BrooklynBridge02.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Oswald', sans-serif;
}
h1 {
color: #fff;
text-align: center;
font-size: 120px;
text-transform: uppercase;
}
span {
font-size: 130px;
color: transparent;
text-shadow: 0 0 10px #fff;
}
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">
<meta name="description" content="">
<meta name="author" content="">
<title>Full - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/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]-->
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oswald:700);
h1 {
color: #FF6600;
text-align: center;
font-size: 120px;
text-transform: uppercase;
}
span {
font-size: 130px;
color: transparent;
text-shadow: 0 0 10px #FF6600;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<h1>
<span>some text</span><br>some other text
</h1>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Just add body { background: none; }. FIDDLE
I see that you had added the CSS style to the whole body which means you then have to turn off all background for everything that sits on top of it. But you could just add the style you created to the container with the text in it. You then may need to style the text to make is visible.
<div class="container full">
<h1>some text</h1>
<h1>some other text</h1>
</div>
Btw You really shouldn't have two bits of header text split with a break, use two headers and position them. Also you really should close the break tag if your going to use it. :)
I just can't get scrollspy from bootstrap 3 to work.
I've already tried everything i've read from inumerous forums, including stackoverflow's answers, but with no success.
So if anyone could look at this code and help that would be great.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<style type="text/css">
body {
text-align: center;
}
#one, #two, #three, #four {
height: 800px;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#side-nav" data-offset="0">
<nav id="side-nav">
<ul class="nav nav-list affix">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</nav>
<section id="one">one section</section>
<section id="two">two section</section>
<section id="three">three section</section>
<section id="four">four section</section>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
Thanks in advance!!
Cheers!
EDIT:
you can check it NOT working in the following URL:
http://zumuha.site40.net/bootstrap/examples/starter-template/
Cheers!
Your problem is very clear if you open Inspect Element and look at the #side-nav's lis. You need to style the style on the .active class they provide you.
#PSL said you missed something and said they provide a styled .active class. But based on your website, I don't see the style in Inspect Element. (The official zipped website also dosen't have the .active style in bootstrap.css, they added in a custom bs-doc.css which included the style)
The correct troubleshooting would be styling the css yourself:
Which is #side-nav > .nav > .active in css. Try to put a font-weight: bold; in it.
I had this same problem before, so I would recommend you to download the official zipped bootstrap website and change upon them. A tip here: Bootstrap change a lot even though the version doesn't change, so you can also download the newest css and try.