Polymer paper-toolbar not working properly - html

I have the following html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/polymer/polymer.html" rel="import">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body>
<paper-toolbar>
<div class="title">Hello</div>
</paper-toolbar>
</body>
</html>
And the page has a white gap between toolbar and the margin.
How do I solve this?


Your problem is caused by an inherent margin: 8px on the <body> tag. To fix this, you simply need to specify a margin yourself in CSS:
body {
margin: 0;
}
Hope this helps!

Related

Problem with link CSS and html in VS code. Problem with external CSS file

I am working in VS code and I am beginner. I know how to write css in html style but css doesn´t work in external file.
My code:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>WHY</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="style" href="style.css">
<style>
</style>
<body>
<h1>rozkaz</h1>
<p>smiech</p>
<b>haha</b>
<em>hehe</em>
<mark style="background-color: blue;">hihi</mark>
<p>Das ist <del>ein</del> kein Hund.</p>
<p>Das ist <del>ein</del> <ins>kein</ins> Hund.</p>
<sup>hoho</sup>
</body>
</html>
CSS:
h1 {
color: bisque;
}
I tried lot of tutorials but it didn´t work.

<head>
<link rel="stylesheet" href="style.css">
</head>
rel="style" should be replaced with rel="stylesheet".
also, it is better to include stylesheets inside a <head> tag

You have an error in the link tag. The rel attribute should be "stylesheet" instead of "style".
<link rel="stylesheet" href="style.css">

When attempting to apply the class attribute to a paragraph, the text remains black instead of the assigned color

Here is my information
.error{
color:rgb(20, 213, 220);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Basics</title>
</head>
<body>
<div>
<p class="error">abcdefghijklmnopqrstuvwxyz</p>
<p>12345678901234567890123456</p>
<p>doremifasolatidodotilasofa</p>
</div>
</body>
</html>

Add css in style tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Basics</title>
</head>
<body>
<div>
<p class="error">abcdefghijklmnopqrstuvwxyz</p>
<p>12345678901234567890123456</p>
<p>doremifasolatidodotilasofa</p>
</div>
</body>
</html>
<style>
.error{
color:rgb(20, 213, 220);
}
</style>

Oh my bad! I fixed it---I had just forgotten to put the styles.css file in the same folder as my .html file, haha '^_^ my bad

appbar doesn't extend to top of page

I'm making as simple game as a webpage with HTML/CSS/JS (no framework). I decided to try out muicss for styling. I added an appbar to the page, but there is still a white gap above it.
Here's an example:
<html lang="en">
<head>
<title>MUI CSS Appbar Example</title>
<link
href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</head>
<body>
<div class="mui-appbar">
<h1>Appbar</h1>
</div>
</body>
</html>
What I get
How do I get rid of the white stripe at the top? Examples from their docs don't have that. What am I missing

Add custom CSS style...
<html lang="en">
<head>
<title>MUI CSS Appbar Example</title>
<style>
h1 {
margin-top: 0px!important;
}
</style>
<link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</head>
<body>
<div class="mui-appbar">
<h1>Appbar</h1>
</div>
</body>
</html>

Immediately after posting this, I found that muicss declares a style
h1, h2, h3 {
margin-top: 20px;
margin-bottom: 10px;
}
So the whitestripe is caused by the margin-top on the h1 element.

Weird top margin on top of my page despite having no h1's and body margin set to 0px

Live Example Up at
http://geovillageva.com/
I have a weird margin problem up top. I have set body margin to 0px, and cannot identify where the margin is coming from using Inspect Element.
HTML of Header
<div id="header">
<img id="logo" src="/image/header.png" alt="GeoVillage Banner" style="width:500px;height:64px;">
</div>
CSS Of Header
body {
margin: 0px;
}
#header{
display:block;
padding: 20px 100px;
background-image: url(/image/headerbackground.png);
background-repeat: repeat-x;
}
If you want the html of the whole page, do inspect element on the webpage. I have coded with PHP and it is extremely messy with all the variables ect.

I see ~=
below body tag and above link to css. Remove that extra.

Don't use margin and padding for body and html, set it in div's
Also delete this symbols https://yadi.sk/d/vq-uOlwZ3CarQV

I think I found the problem. Your html structure is wrong.
currently it is:
<!DOCTYPE html>
<html>
<head>
<title>GeoVillage - A Community</title>
<link rel="stylesheet" href="defaultstyling.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/image/logo.png">
</head>
<body>
-=<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/navbarstyle.css">
</head>
<body>
but it should be like this:
<!DOCTYPE html>
<html>
<head>
<title>GeoVillage - A Community</title>
<link rel="stylesheet" href="defaultstyling.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/image/logo.png">
<link rel="stylesheet" href="/navbarstyle.css">
</head>
<body>
Try this and I think it will work.

Why doesn't my HTML index link to my CSS?

I looked at other people who asked this and nothing seemed to work. My HTML page can't find my CSS page although they are in the same folder. I am working in Dreamweaver but writing the code myself.
Here is my HTML code:
<!doctype html>
<html>
<meta charset="UTF-8">
<title>home</title>
<head>
<style type="text/css">
<link rel="stylesheet"
<href="style.css"
type="text/css" />
</head>
<body>
<div class="background"></div>
</body>
</html>
Here is my CSS:
#charset "UTF-8";
/* CSS Document */
.background {
background-color: rgba(0,0,0,0.98);
background-image: url(images/me_atsunsetbackground.JPG);
background-repeat: repeat-y;
margin-left: 50px;
margin-top: 200px;
margin-right: 50px;
margin-bottom: 200px;
}

do it like this :
<html>
<meta charset="UTF-8">
<title>home</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="background"></div>
</body>
</html>

<head>
<link type="text/css" rel="stylesheet" href="any_style_you_want.css">
</head>