Instead of rendering the second section, like it should, it just renders all of them. Anyone know why? The platform is not letting me post the question unless I write some more stuff, so here it is. Stuff written by me. I would just like to know about the core-pages issue.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="import" href="bower_components/webcomponentsjs/webcomponents.js">
<meta charset="utf-8">
<meta name="viewport" content="device-width, initial-scale=1.0">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-pages/core-pages.html">
</head>
<body unresolved>
<core-pages selected="1">
<section>
<h1>hola</h1>
<p>this is the first section</p>
</section>
<section>
<h1>hello</h1>
<p>this is the second section</p>
</section>
<section>
<h1>ciao</h1>
<p>third</p>
</section>
</core-pages>
</body>
</html>
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"/>
How do i center a h1 in a div.This is the picture of my project and i want to center "about me" with hover effect to center it with header, to be right beneath that green line.
this
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow" style="text-align:center">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
Using CSS, you can apply the text-align property to set the element to center through the inline method within the snippet I have provided or, through internal or external styling referring to either the class or element.
h1{
text-align:center;
}
h1{
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<center>
<h1 class="hvr-float-shadow">About Me</h1>
</center>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
This is the easiest way out to center the text.
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/
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".
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