I'm trying to create a basic Hello World page in Bootstrap, but the styles in the .css file are not being applied to the content on the page. In chrome dev tools, the .js and .css files are successfully loaded and can be looked through in-browser, but the styles are not applied to the element.
html:
<!DOCTYPE html>
<html>
<head>
<title>Alex Rules</title>
<link href="bootstrap/css/bootstrap.min.css" rel="styelsheet" media="screen" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="postContent" class="row">
<div class="span6 offset3">
Hello World!
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Is there a step that I'm missing?
In your link tag it says rel="styelsheet" and it should say rel="stylesheet".
Related
In this tutorial:
https://www.youtube.com/watch?v=Zz6eOVaaelI
They say to hit a button on the bottom of the window (I have, 'Live Sass Compiler,' downloaded) and that would make a CSS file that VSCode compiles my SCSS to.
Which, it does not seem to be doing; here's the HTML:
<!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" href="style.scss"/>
<title>Sassy</title>
</head>
<body>
<header>
<h1>Hello!</h1>
<button>Hello--again!</button>
</header>
<div class="contact">
<button>Submit</button>
<div class="info">
<h1>Our contact info</h1>
<p>This is our info</p>
</div>
</div>
</body>
</html>
Here is the SASS:
header {
background: lightblue;
};
However, when I open a live server, the background does not appear light blue; just basic white.
Lastly, my differs from the video as I just put the HTML and the SASS file in the same folder.
<link rel="stylesheet" href="style.scss"/>
You need to link the actual .css file that's compiled from your .scss file. Sass files themselves cannot be used as the stylesheet for your page.
<link rel="stylesheet" href="style.css"/>
My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/
I was trying to load a CSS file to HTML to style it except the CSS doesn't load. I placed both the files in the same directory
I have an HTML file called Homepage.html and a CSS file called Homepage.css:
<html>
<title>
Welcome to Sids World!
<link rel="stylesheet" type="text/css" href="homepage.css">
</title>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div><!-- global division -->
</div>
</body>
</html>
Furthermore, my CSS file (located in the same directory) has the following code:
body
{
font-size:100%;
background-color:red;
}
#header
{
text-align:center;
font-size:4em;
font-family:sans-serif;
background-color:blue;
}
I expect when this loads that the background of the entire site will be red and the background surrounding my text will be blue, but this does not occur. What am I missing here?
The file paths of both files are:
C:\Sid\Rutgers\ComputerScience\SiteForDeploy\htmlfiles\Homepage.html
C:\Sid\Rutgers\ComputerScience\SiteForDeploy\htmlfiles\Homepage.css
I am using Sublime Text Editor for my processing if that helps
Your problem is twofold. Firstly, you fail to specify a <head> section for your document. Secondly, your <link> tag is within your <title> tag. The <link> tag should be within <head>, but not within <title>. Change to this and you'll see pretty colors:
<html>
<head>
<title>
Welcome to Sids World!
</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
<html>
<title>
Welcome to Sids World!
<link rel="stylesheet" type="text/css" href="homepage.css">
</title>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
should be changed to
<html>
<head>
<title>
Welcome to Sids World!
</title>
<link rel="stylesheet" type="text/css" href="Homepage.css"/>
</head>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
Css url's are case sensitive, so you'll need <link rel="stylesheet" type="text/css" href="Homepage.css">
Otherwise your code is working just fine for me http://jsfiddle.net/3deg1h05/
In my jQuery mobile (v 1.2) web site, I have several separate pages (i.e. each page has one header, content and footer). The problem is I can't link the pages. The following line is not working.
Another Page shows "Error loading page".
If I add rel="external" to the <a> element, it works. However, it turns off the automatic loading via Ajax. But I want to use the Ajax loading as well as keep the pages separate. Just wondering whether it's possible.
Code Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
click me
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Code Page 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
The problem is that you are trying to load your pages from the filesystem.
Chrome settings prevents that, assuming that a security risk.
Serve your pages with a web server. You can use IIS on Windows XP Pro for that.
or
You can start chrome with --allow-file-access-from-file command line option
I believe you are supposed to give each 'data-role="page" and id like "page2 so in effect it would be:
<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->
Im not sure if that is what you are looking for in this case though...
Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html