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>
Related
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 problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
I am trying to create a resizable html page that mimics the java applet clock layout and am not sure if I am approaching this in the right way. This 3 clock picture below is what I am trying to create now. Currently I used div, margins, padding to lay out a 1 clock using css but since the font-size are all different per line I am used the vmin font to handle the auto-resizing; but with mixed results. I have being looking online for a tutorial or examples that would address how to do this problem without success since the examples are resizing text paragraphs that are the same font-size throughout or images.
Does anyone know of a tutorial site or example that addresses this type of problem? Maybe I should be doing this using canvas or something instead of div tags. Thanks.
This was my 1 clock page (minus all the css stuff):
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="AOS/LOS Clock" />
<title>AOS/LOS Clock</title>
<link rel="stylesheet" type="text/css" href="css/mc_style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type=\"text/javascript\" src=\"js/mc_clocks.js?color=00ff00&file=input/aos_times_json;\"></script>
<script type="text/javascript" src="js/mc_engine.js"></script>
</head>
<body id="body">
<div id="wrapper">
<div id="clockAOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Acquisition of Signal</span></div>
<div id="relay" class="siteTdrs"></div>
<div id="clockLOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Loss of Signal</span></div>
</div>
<p id="Msgs"></p>
</body>
</html>
I suggest checking out bootstrap for laying out elements on a page. You can create a simple layout easily and it will be responsive.
As far as font size goes, there is no way to show the page the same across all browsers and devices. Even using pixels which is a fairly common standard will have different results on retina displays. Read this to learn more about font sizing.
I re-read the vs font descriptions and redid my css sheet. This resizes the fonts but the negative margin-left doesn't look the same on the linux box vs. PC even though I am using the same terminal screen. Its better then before however.
<!DOCTYPE html>
<html>
<style>
body {
font-family: helvetica, arial, sans-serif;
font-weight: bold;
color: #fff;
background: #000;
margin: 2vw 10vw 2vw 10vw;
}
span {
white-space: nowrap; /* Specify that the text in element will never wrap */
}
.header {
font-size: 4vw;
font-weight: bold; /* bold font */
color: lightGray; // color for tdrs/site
}
.header-split {
display:block;
margin-left:15vw;
}
.header-split span {
display:block;
float:right;
width:30%;
}
#header-ul {
border-bottom: 3px solid lightgrey
}
#rm {
text-align: center;
margin-left:-10vw;
}
.siteTdrs {
font-size: 3vw;
font-weight: bold; /* bold font */
color: lightGray; // color for tdrs/site
}
.mission {
font-size: 4vw;
}
.clock {
font-size: 8vw;
text-align: center;
}
.terraColor {
color: #00ff00; // GREEN
}
.aquaColor {
color: #00ffff; // CYAN
}
.auraColor {
color: #ffc800; // ORANGE
}
</style>
<body>
<div id="wrapper">
<div id="header-ul"><div class="header header-split">AOS<span>LOS</span></div></div>
<div id="rm" ><span id="terraRelay" class="siteTdrs">TDE</span> <span class="mission terraColor">TERRA</span></div>
<div id="terraTime" class="clock terraColor"><span>00:00:00 00:00:00</span></div>
<div id="rm" ><span id="aquaaRelay" class="siteTdrs">SG1</span> <span class="mission aquaColor">AQUA</span></div>
<div id="aquaTime" class="clock aquaColor"><span>00:00:00 00:00:00</span></div>
<div id="rm" ><span id="auraRelay" class="siteTdrs">TDW</span> <span class="mission auraColor">AURA</span></div>
<div id="auraTime" class="clock auraColor"><span>00:00:00 00:00:00</span></div>
</div>
<p id="Msgs">this is a error</p>
</body>
</html>
<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>