<html>
<head>
<title>QuickLinks</title>
<style>
body{
overflow: all;
width: 100px;
height: 100px;
}
a{
color: blue;
text-decoration: none;
}
</head>
<body>
Back to main
<hr id="85">
<hr id="85">
<div id="83">
Issues
</div>
</body>
</html>
Will Not render in chrome. Not sure about others. File is saved as google.html and it is for a directory style chrome extension and will not render anywhere within chrome.
http://validator.w3.org/#validate_by_input
use this more.
There are 7 errors I think according to the validator.
I noticed that your missing the <./style> tag. (ignore the '.').
I founded some errors in your code.
1.In your code there is no end style tag.
2. tag end with after end style tag.
I modifed your code. It's wroking fine.
<style>
body{
overflow: all;
width: 100px;
height: 100px;
}
a{
color: blue;
text-decoration: none;
}
</style>
<head> </head>
<title>QuickLinks</title>
<body>
Back to main
<hr id="85">
<hr id="85">
<div id="83">
Issues
</div>
</body>
Related
I want to apply custom css class to the HTML tags in confluence. I tried adding css class in HTML macro as well as in css Macro. but the style is reflecting only in the preview, when i save and view the page style is not available, any advice
HTML Macro:
<head>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
</head>
<body>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
Css Macro
.myClass{
padding: 18px;
background-color: Grey;
}
Preview
When i save and publish
<head>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
</head>
<body>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
I had the same problem. Simply get rid of the head section and try the below code:
<body>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
I'm working on a project in WebStorm, and it appears that the CSS I'm trying to apply to parts of the project works when it's connected to an ID, but not when it's a class. Here's my current HTML in basic format:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="firstJS.js"></script>
<link rel="stylesheet" href="styles.css"/>
<title>title</title>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header" class="pageHeader">
<h1>at the top</h1>
</div>
<div role="main" class="ui-content">
</div>
<div id="welcomeBox" class="main">
<div id="welcome" class="headerOne">Welcome!</div>
<div id="here">
<div>here's some cool words <a class="boxLink" href="https://twitter.com">Contact</a> for help!</div>
</div>
<div id="firstLinks" class="main">
<div class="headerOne">LINKS</div>
</div>
</div>
</div>
</body>
</html>
And here's my CSS:
#mainPage{
background: lightgrey;
}
.pageHeader{
font-size: 30px;
background: goldenrod;
}
.main{
border: solid thick darkgoldenrod;
background: goldenrod;
border-radius: 15px;
}
#welcomeBox{
width: 1000px;
height: 125px;
position: relative;
left: 12%;
}
.headerOne{
font-size: 30px;
font-weight: bold;
}
#welcome{
position: relative;
left: 15%;
}
#here{
position: relative;
left: 1%;
font-weight: bold;
}
.boxLink{
color: saddlebrown;
}
If I change the pageHeader and boxLink classes to IDs, the CSS does what I want it to do on the page (the main and headerOne classes seem to work perfectly fine as classes for whatever reason). But at the moment, the font size in pageHeader is the only thing I can change while they're classes that I can actually see changed on the page.
At an earlier point I also had a <ul> inside the firstLinks div, where each <li> in that list would have an <a> link in it that take someone to another page of the site (I didn't include those pages in this code at the moment). Those <a> links were supposed to use the boxLink class, but the formatting didn't carry over for those either.
Is there a workaround for this? Is there a way for me to make it a general class and have it apply to whatever element I want instead of hyper-specifying it to a specific <div>?
You are using in Your project the jQuery Mobile Framework, which is a mixed CSS-JavaScript Framework. What does this means? In a mixed CSS/JS Framework You will have some CSS Classes declared in a CSS Stylesheet and over that layer, at run-time. some other HTML fragments will be created by the Frameworkand and injected into the existing DOM. At run-time, the CSS classes of the Framework, which have been defined into the CSS Stylesheet, are applied to these new parts of the HTML page.
Take for example the JQM Header:
<div data-role="header">
<h1>at the top</h1>
</div>
If the JQM Framework has been referenced in the head and instanced, after page load it will parse Your HTML and enhance Your existing Tags with the corresponding Framework Classes. Toolbar (header) is one of the simplest enhancement. For instance, JQM Lists or Checkboxes/RadioButtons are enhanced in a more sophisticated way.
Each Tag which has the custom data-role="header" attribute will be enhanced as follows:
<div data-role="header" class="ui-header ui-bar-inherit" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Page Title</h1>
</div>
Now, what if You need to change the default Framework styles with some of Yours?
This is a very common requirement. For this task, the Chrome or Firefox Inspectors are Your best friends. Just look at the hierarchy of styles definition. You will find out that some styles which have more specificity or are declared by using !important overrides some of the previously defined styles.
Note how Your custom background-color style defined inside Your custom pageHeader class of Your custom style.css file has been override by the JQM property defined by the Framework inside the .ui-page-theme-a .ui-bar-inherit classes of the jquery-mobile-1.4.5.css file:
Sorry for this boring explanation, now to the point. Obviously You don't know exactly which styles have been applied at page load and moreover, which styles are also applied dynamically at run-time. You need to explore the elements. The hierarchy goes from bottom to the top. You will easily find out what's happen in Your page.
This is the reason because Your custom font-size is working well but Your custom background-colorisn't.
To get Your custom style applied, You can use either specificity over the JQM header classes, or !important for the background-color property:
.ui-header.pageHeader{
font-size: 30px;
background: goldenrod;
}
.pageHeader{
font-size: 30px;
background: goldenrod !important;
}
Both will lead to the same result, it is just a matter of preference depending from Your needs and what You are trying to achieve. Here are some references:
https://www.w3schools.com/css/css_specificity.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
...just forgotten to mention that You can also override the JQM style directly:
.ui-header{
font-size: 30px;
background: goldenrod !important;
}
Seems your code is fine, kindly try the below Code if it works, then it seems to problem with your external stylesheet.
Kindly let me know if you face the same problem,
Also i have changed the JS files to Bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="styles.css"/>
<title>title</title>
<style>
#mainPage{
background: lightgrey;
}
.pageHeader{
font-size: 30px;
background: goldenrod;
}
.main{
border: solid thick darkgoldenrod;
background: goldenrod;
border-radius: 15px;
}
#welcomeBox{
width: 1000px;
height: 125px;
position: relative;
left: 12%;
}
.headerOne{
font-size: 30px;
font-weight: bold;
}
#welcome{
position: relative;
left: 15%;
}
#here{
position: relative;
left: 1%;
font-weight: bold;
}
.boxLink{
color: saddlebrown;
}
</style>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header" class="pageHeader">
<h1>at the top</h1>
</div>
<div role="main" class="ui-content">
</div>
<div id="welcomeBox" class="main">
<div id="welcome" class="headerOne">Welcome!</div>
<div id="here">
<div>here's some cool words <a class="boxLink" href="https://twitter.com">Contact</a> for help!</div>
</div>
<div id="firstLinks" class="main">
<div class="headerOne">LINKS</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="firstJS.js"></script>
</body>
</html>
I'm attempting to break my html into separate php files and have an error I can't seem to crack. Here is the first file, index.php
.topheader {
background-color: #404040;
color: white;
padding: 16px;
}
.footer {
background-color: #404040;
color: white;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
As of right now, only .topheader is applying to the html. I understand that both classes are identical, I plan to expand on each once I confirm they are applying individually. Can someone please take a look and advise why .footer wouldn't be applying to the sheet?
Here is a sample of the output on my machine
Seems working for me, .topheader and .footer having different styles
.topheader {
background-color: #404040;
color: blue;
padding: 16px;
}
.footer {
background-color: #404040;
color: red;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>I AM BLUE</h1>
</div>
<br>
<div class="footer">
<h1>I AM RED</h1>
</div>
This is Applying to your file, both .topheader and .footer class contain same style. just change the style values, you can see the difference
.topheader {
background-color: #404040;
color: white;
padding:16px;
}
.footer {
background-color: #FFEE00;
color: Red;
padding:16px;
}
Check this code once and in your code check once href of your stylesheet.
<!DOCTYPE html>
<html>
<head>
<style>
.topheader {background-color: #404040;color: white;padding:16px;}
.footer {background-color: #404040;color: white;padding:16px;}
</style>
</head>
<body>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
As many on here pointed out, the code itself was fine. I did not realize that Chrome would cache the CSS file. I've spent all night updating the file without seeing any changes because Chrome was using an older version.
As you can see from the attached screencap, I disabled the cache and everything is working perfectly now.
I want to line it up clearly but I just can't. What should I do for it?
<html>
<head>
<style type="text/css">
.article-topic-list a {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}`enter code here`
</style>
</head>
<body>
<div class="article-topic-list"> Sale of Kodi TV boxes faces <br> legal test </div>
<div class="article-topic-list"> Piracy fighters battle Kodi 'epidemic'</div>
</body>
</html>
To get the results you're asking for, designwise, you'll have to move the margin-styles to the div, and keep the color and text-decoration on your a-tag. If you simply remove the 'a' from the style tag, you won't get any color or text-decoration changes, since the style from the browser (directly on a), would take precedence.
.article-topic-list {
margin-left: 15px;
margin-top: 20px;
}
.article-topic-list a {
color: black;
text-decoration: none;
}
<body>
<div class="article-topic-list">
Sale of Kodi TV boxes faces <br> legal test
</div>
<div class="article-topic-list">
Piracy fighters battle Kodi 'epidemic'
</div>
</body>
See this example.
Instead of applying the css rule to the tag, if you apply the rule to the entire div, i believe it should line up correctly. Your style script would be like this:
<style type="text/css">
.article-topic-list {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}
</style>
And the output would be something like this.
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.