I am using materialize framework and as I add <!DOCTYPE html> it does not recognize my CSS. But it works without <!DOCTYPE html>. How should I solve this error?
Update :
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Material</title>
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$( document ).ready(function(){
$(".button-collapse").sideNav();
});
</script>
<style>
body{background-color:#fcfcfc;}
.logo{
height:70%;
margin-top:10px;
margin-left:10px;
}
#media only screen and (max-width: 992px){
.logo{
margin-left:0px;
}
}
.button-collapse{
margin-left:5px;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="blue lighten-1">
<div class="nav-wrapper">
<img src="images/logo.png" class="logo" />
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>Login</li>
<li>Signup</li>
<li>Contact Us</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Home</li>
<li>Login</li>
<li>Signup</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
<div class="row header-img">
</div>
</body>
</html>
The reason is that browsers switch to a more correct rendering engine mode when they see a doctype in the file.
If adding a doctype is causing problems, then your code has probably something wrong with it, and it is working by chance (or trial and error) if nothing else. There is a slight chance that the culprit might be a bug introduced in the more standards-compliant rendering mode, though. Such bugs do exist.
Without the doctype your page will be renderd in quirks mode. That means that the browser will treat your html AND your css after the rules the older browsers have set.
Valid html MUST have a doctype. If you have a correct and fairly new doctype then your document will be rendered in Standards Compliant mode. Also, your stylesheets must have a media type of text/css.
I think sharing your CSS here might help in identifying what exactly is going wrong.
Related
Very simple task that doesn't seem to be working for some reason. I am getting no results when I view in the browser, my styles are not being applied to my HTML. My style sheet is in the same folder as main document with the html. I am previewing the code in chrome on a localhost. Not sure what is going wrong here, any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyles.css">
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
My styles are placed in a separate document called mystyles.css
<style>
.main {
color: blue;
}
</style>
Test in one file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
.main {
color: blue;
}
</style>
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
Or as Tushar said: remove <style> and </style> from your css file
Where is the location of your CSS file?
For your code to be correct, they need to be in the same folder, otherwise you will need to tell the computer which directory to look in by using ../ for each directory back, and then you need to tell it where to look after, ie.
../STYLES/main.css
u just need to remove the opening and closing style tag as it predefined with the link tag.
update your mystyles.css
This is the HTML:
<!DOCTYPE html>
<head>
<title> navigation practice</title>
<link rel="stylesheets" type="text/css" href="style.css"/>
</head>
<body>
<ul>
<li> HOME</li>
<li> ABOUT
<ul>
<li><a>camp sites</a></li>
<li><a>our team</a></li>
<li><a>wildlife</a></li>
<li><a>resources</a></li>
</ul>
</li>
<li> CONTACT
<ul>
<li><a>email</a></li>
<li><a>phone</a></li>
</ul>
</li>
<li>things to do
<ul>
<li><a>shops</a></li>
<li><a>activities</a></li>
<li><a>trails</a></li>
</ul>
</li>
<li> MORE</li>
</ul>
</body>
</html>
The CSS just has:
body {
background: blue
}
both the HTML and CSS are in the same file. I’ve checked spelling on the link, syntax and any errors in the CSS. I’ve also tried opening the file in a different browser. I have this problem every time I start a new project. I’m using Notepad++.
The problem is on your stylesheet tag, you added a unnecessary "S" at the end of the word, it is supposed to be:
<link rel="stylesheet" type="text/css" href="style.css"/>
not stylesheets.
And you forgot to open the html tag after the <!doctype html> declaration, and the charset declaration. Here is how it is supposed to be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> navigation practice</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!--YOUR CODE HERE-->
</body>
</html>
Try validating your code here: https://www.freeformatter.com/html-validator.html. It will show what's wrong on it.
So the title says it, ill upload screenshots of the issue:
Here are the images.
I have tried to fix this but im not the most experienced coder out there. If any one has run into this problem or knows the solution please answer :) Its proboly something simple that i cant find because im stupid, LOL. Any way thank you for looking :)
This is my index.html:
<!DOCTYPE HTML>
<!--
Aerial by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Oracle RPG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<h1>Oracle RPG</h1>
<p>A BETTER EXPERIENCE • BUILT FOR THE GAMER • BY THE GAMER</p>
<nav>
<ul>
<li><span class="label">Forums</span></li>
<li><span class="label">Donor Area</span></li>
<li><span class="label">Youtube Channel</span></li>
<li><span class="label">Ranks & Apply Area</span></li>
</ul>
</nav>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright"><font size="1">© Untitled. Design: HTML5 UP.</span></font>
</footer>
</div>
</div>
</body>
</html>
In your all your css files you state your div with id #bg as follows:
bg {
background-size: 2250px auto; /*the first value is different in all css files*/
width: 6750px;
}
The first value is the width of you images and the second one the height. The width is different in each of the css files (wide, normal, mobile, etc) so what you have to do is just change the width of the background-size to whatever you want and your problem is gone! :)
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.
I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.
How would I go about resolving this- my code is attached bolow. ?
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<html>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Website</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog
</div>
</html>
As others have mentioned, using a CDN is usually as easy as adding:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
into your HTML. But this doesn't work when you are loading your html from a local file.
The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.
This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating private HTML that will be loaded from your disk, then you should add the protocol and use the CDN like this:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
I hope this will be useful to someone...
Hi Akkatracker I appreciate your question; it helped me. You can use a CDN for Bootstrap. Here is a simple complete html example where you do not have to download bootstrap since you are linking to a public content distributed network of the css & js files.
Simple Bootstrap CDN HTML Example
<html>
<head>
<title>Bootstrap CDN Simple Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Bootstrap CDN Simple Complete HTML Example</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Please note JQuery needs to come before bootstrap.js. The order of our JavaScript libraries is significant.
Hope this helps
follow this fiddle cdn usage http://jsfiddle.net/MgcDU
css
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
html
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn btn-primary btn-large" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
Learn more about Bootstrap
</a>
</p>
</div>
Make your HTML look like this:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog </div>
</body>
</html>
I am new to using Twitter Bootstrap as well as BootstrapCDN. I did some brief experimenting tonight and I made my site look correct, well almost, using the following 'Head'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
<!-- my custom stylesheet -->
<link href="/word/css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
</head>
So I have replaced the old style sheets with the ones provided at BootstrapCDN.com. I am not sure if it is proper to replace the existing stylesheets, but here goes to experimentation and my result is so so...
This gets everything styled almost right; well maybe its styled totally right. I am still stepping through the DOM tools to see why my modals are non-functional. I suspect my issue with the modals is the JavaScript and the fact the site was just migrated from a local folder.
Using Microsoft Ajax Content Delivery Network as Bootstrap CDN:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Demo</h1>
</div>
</body>
</html>