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.
Related
So I want to style my contact page which has its own file, so when you click on it, it brings you to a whole new page, I already got that I'm Just wondering how do I style that page Inside my style sheets without changing every other page?
i've tried
Inside Html
Inside Css
.stylec {
anything i put in here styles nothing because you cant set the body as a class
}
i havent found any youtube videos for this or anything on google other than
"Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using #import keyword."
I'm Just trying to style my contact page inside my style.css and not styling it inside its html
I just want it all to be inside my styles.css so its neat and clean!
thanks for your time!
You should make on stylesheet of CSS and give styles according to the class names.
example:-
.first_body
{
background-color: lightblue;
}
.second-body
{
background-color: cyan;
}
1st-Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>1st html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="first_body">
</body>
</html>
2nd Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>2nd html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="second_body">
</body>
</html>
You have to assign classes and ids in the html. (You should use an id rather than a class to style the body of a document, since there will only be one per document.)
For instance in your contact.html (or whatever the contact page's file is called) change your body tag to:
<body id="contact-style">
Then in your css file you can assign special styling just for that page using...
body#contact-style {}
You can insert any styles between the curly brackets. To test this, try assigning a background color. If no other elements in your site have a background color, you will see this change right away.
body#contact-style {background-color: red;}
Okay! Your basic HTML document looks like this;
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
<p class="apple">This is an apple paragraph</p>
<div class="mango">This is a mango paragraph</div>
<h1 id="cat">This is a cat paragraph</h1>
<p class="dog">This is a dog paragraph</p>
</body>
</html>
Note:
Inside the <head> tag is where you import your style.css
Use this tag to import <link rel="stylesheet" href="style.css">
The "href" is used to specify the link of your css file
Example of css file:
body{
background-color: blue;
}
h1{
color: orange;
}
.apple{
color: green;
}
.mango{
color: yellow;
}
#cat{
color: beige;
}
#dog{
color: white;
}
Give the different pages an id attribute on the body tag
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="home">
....
</body>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="contact">
....
</body>
In the style sheet that you link to style.css you can define styles for all pages and redefine the styles you want different on the contact page
h1 {
font-family: serif;
color: blue;
}
#contact h1 {
font-family: sans-serif;
color: tomato;
}
So I am new to this, but I grabbed this from W3 schools and I am trying to apply a colour to the class - so I created the style section and tried to apply color but its not working. I know this is linked to an outside style sheet, so maybe thats overriding what I want to do. Otherwise, I can't see what to do, I have googled for an hour or so, at this point I need someone with more knowledge to help me out.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label label-default {
background color: #330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span>
</body>
</html>
You have 3 problems
The selector is not good. <span class="label label-default">. If you want to select this, you need to write .label.label-default
You should use a multi class selector , read here -> multi class selector
Read more about CSS Selectors
The background color style is not correct either. You need to write background-color
Read more here -> background-color
h1 tag has to be closed with </h1>
Read more here -> HTML Elements
My own question -> Why use a span inside the h1 if you don't split the content or is there some other reason ? For eg <h1><span class="font-light">Light</span>Not Light</h1>.
If you have no special reason to use span inside the h1, you should add the classes directly on the h1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
I know this is linked to an outside style sheet, so maybe thats overriding what I want to do -> the linked stylesheet is a bootstrap stylesheet. To check if that overwrites your own custom css, inspect your code in developers console and see if your styles are cut out. Then they are overwritten.
I have googled for an hour or so -> Then you should learn how to ask google. The problems you have are pretty basic. Google-ing multi class selector css or even 2 classes css + background color css would've given you a lot of results and answers
First of all, you are missing . in your class selector, next you have to remove the space between selectors since they are applied to the same element. You also have to add -to background-color property. Finally close the h1 tag and you're done:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
Your css is incorrect, first of all its is "background-color" not "background color"
and second if you want to apply css for same div classes then you should not give space for class name like ".label .label-default"
you have to write class names without spaces like this ".label.label-default"
try this
<style>
.label.label-default {
background-color:#330000;
}
</style>
instead of this
<style>
.label .label-default {
background color:#330000;
}
</style>
The background-color CSS property in Chrome is not working when I implement it into the body. However, when I test it in CodePen, the body's background color changes accordingly. Here is the link to the CodePen code: https://codepen.io/Ag_Yog/pen/rzezYw.
Here is the code that does not work in notepad:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
CSS:
html, body {
width: 100%;
height: 100%;
background-color: #00e676 ;
}
.quoteCard{
background-color: #fff176;
}
.text{
position: relative;
vertical-align:middle;
font-family: 'Acme', sans-serif;
font-size: 30px;
padding: 20px 20px 20px 20px;
}
When inspecting the code on Google Chrome, it shows that there is no background-color, even though I specified it in the CSS:
Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Change the order of your css files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>
This will work
On codepen the body is already responsive, whereas your Chrome's page needs to be made responsive to react to the % of your CSS Properties.
Add these meta tags-
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta name="viewport"content="height=device-height, initial-scale=1.0">
</head>
Now your webpage can detect the devices width and height and set the style attributes according to them.
However, if this still doesn't work. Change your height properties value from 100% to something specific with px or use em if you want it to be responsive with different devices DPR.
I found I was having the same issue when using all of the CSS code for the body tag. I removed the background-color tag from that grouping and put it into a separate grouping for the same tag and everything worked as intended. It's an organizational problem, but it is functional.
Here's the example from my code (This is in my main.css file):
<style>
body {
font-family: Trebuchet MS;
margin-left: autopx;
margin-right: autopx;
margin-bottom: autopx;
margin-top: autopx;
}
body {background-color: #242424;}
</style>
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!
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.