I'm having an issue coloring a span with css. Everything is working fine on the webpage however when I try to select a span in a div it doesn't work. Am I missing something dumb here?
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="style/mainstyle.css" rel="stylesheet" type="text/css">
<script src= https://code.jquery.com/jquery-latest.min.js></script>
</head>
<body>
<header>
<h1>TEST</h1>
</header>
<main>
<div class = "tab1 triad">
<script src="primejs.js"></script>
<span class="red"><h2>Type in a number and I'll check if it is prime:</h2></span>
<input class = "primeNum" type = "text">
<button class = "submit">Submit</button>
<span class = "result">
<h2>What I found: <span class = "answer">?</span></h2>
</span>
</div>
</main>
</body>
and here is the css:
.tab1 span.red {
color: RED;
font-size: 100;
}
Cleaned up your HTML, you had a some stray and missing tags.
Bin demo
<div class="tab1 triad">
<span class="red">
<h2>Type in a number and I'll check if it is prime:</h2>
</span>
<input class="primeNum" type="text">
<button class="submit">Submit</button>
<span class="result">
<h2>What I found: <span class="answer">?</span></h2>
</span>
</div>
And your css was missing the px after 100
.tab1 span.red {
color: red;
font-size: 100px;
}
try this
.red {
color: red;
font-size: 100px; /* specify a unit like px, em, ... */
}
First of all, the HTML code you have posted is not valid. You can use the official W3C validator to check if you like. The main issue is the spaces either side of your = when declaring attributes. Spaces are only ever used in between different attributes. Also, h2 elements are block type elements, and are therefore not allowed inside of an inline element (e.g., span).
Secondly, the CSS is also not all valid. Firstly, there is no need to make anything uppercase, as is shown for the colour name. color:red; will work just fine. Also, you have not specified any units of measurement for the font-size property. I assume you intended for the text to be at 100pt, in which case you need to use font-size:100pt;. Other valid units of measurement include px, cm and rem.
I recommend you read information on the Mozilla Developer Network for examples if you would like to learn more. It includes accurate pages about HTML elements, CSS properties and JavaScript.
Edit:
The following would help to fix the HTML:
Change doctype to DOCTYPE, which improves compatibility.
Move all script tags into the head tag.
Ensure that all inputs, buttons, etc. are inside of form elements.
Remove spaces around = signs.
Make the href attribute of the stylesheet link tag the second attribute, and make the rel attribute the first. This is primarily for consistency.
Related
I am converting a docx to html format (using apache poi) and sending it as email.
A snippet of generated html looks something like this
<html>
<head>
....
<style>
span.Normal{
font-family: 'Arial';font-size: 9.0pt;
}
span.Title{
font-family: 'Cambria';font-size: 28.0pt;color: #000000;
}
span.MySubtitle{
font-family: 'Arial';font-size: 18.0pt;color: #000000;
}
span.MyTitle{
font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
}
...
</style>
</head>
<body>
....
<p class="Normal Title MyTitle">
<span id="_GoBack">
<span class="Normal Title MyTitle">Welcome Message</span>
<span class="Normal Title MyTitle"> </span>
<span class="Normal Title MyTitle">Username</span>
</p>
<p class="Normal Title MySubtitle">
<span class="Normal Title MySubtitle">Issues and Solutions</span>
</p>
...
</body>
</html>
The multiple css classes are not recognized by Outlook client. It is only rendering the first css class "Normal" and ignoring the rest. But my original formatting (in docx) is present in "MyTitle" & "MySubTitle" classes.
Does Outlook support multiple css? Is there a way I can control multiple css generation.
I've just discovered this problem myself.
It seems that Outlook is only taking the first class listed in the class attribute, ignoring everything else.
Stylesheet:
<!--[if gte mso 9]>
<style type="text/css">
.red {
color: red;
}
.large {
font-size: 72px;
}
</style>
<![endif]-->
Markup:
<div class="red">
THIS SHOULD BE RED IN OUTLOOK
</div>
<div class="large">
THIS SHOULD BE LARGE IN OUTLOOK
</div>
<div class="red large">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
<div class="large red">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
Result:
As far as I see, all versions of Outlook are affected. Including the newer ones.
I've filed a bug report to hteumeuleu/email-bugs documenting this quirk:
https://github.com/hteumeuleu/email-bugs/issues/117
As said previously you should first check your html to make it cleaner. Emails are tough to get right and perfect in every single mail client/server out there. So if you want to get things right, have a look at all the free and responsive templates available anywhere on the web.
The classic yet efficient solution for mail is rely in the table tag.
You can find a good example here
Also, when it comes to display on different mail clients, Outlook is one of the most difficult. There are tools like Litmus that allows you to preview the result of your email but it's quite expensive. Fortunatly they also propose free responsive templates that you can use for inspiration.
Don't hesitate to post an improved version of your email so we can look at it and help you more efficiently.
Okay, there's a lot going wrong here. First and foremost, the html isn't really correct at all. You have paragraphs nested in paragraphs, and you're using spans to define headings, and splitting each word into it's own span.
I don't know what those three dots at the beginning and end are for, but they shouldn't be in the style tags.
Your class names aren't really descriptive, they're repeating rules, you have every class applied to every element, and they're out of order in the style sheet, making it confusing to understand what's going on.
My suggestions are to:
Use semantic markup
Discard classes and use semantic selectors
Use the DRY principle (don't repeat yourself)
list rules with a logical order, such as starting from the largest and ending at the smallest.
Here's some refactored code using your styling rules and demonstrating how to use each element.
<html>
<head>
<style>
body {
color: #000000;
}
h1,
h2,
p {
font-family: 'Arial';
}
h3 {
font-family: 'Cambria';
}
h1 {
font-size: 28pt;
}
h2 {
font-size: 22pt;
}
h3 {
font-size: 18pt;
}
p {
font-size: 9pt;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p>
This is paragraph text.
</p>
</body>
</html>
I'm trying to integrate an html page(which already has lots of formatting, links to css files, .js files etc) in to asp.net
The problem is that some of the styles used in the html refer to a form element, like this:
#Area form input[type="mytype"] {
content: '';
position: absolute;
display: block;
}
When I try to wrap this up in an asp.net page, it loses the formatting, because I need to put everything inside an asp.net 'form' with runat="server". The Css gets confused because it's now a form within and area within a form.
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
</head>
<body>
<form method="post" action="uitest.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUxMTcwNzgxMGRk/FKLdutHp78brNcMIqdbHqG7TcPZ3FoZf+HMkhw=" />
</div>
<div id="feature">
<div class="validate-form">
<span class="icon"></span>
<input class="required-email" type="email" placeholder="Email address">
<button class="btn"><span>Apply now</span></button>
</div>
</div>
</form>
</body>
</html>
What's the best way round this? Can I just rename 'form' to something else in the Css?
thanks
You should not have a nested form in a Web Forms app. If your CSS styles aren't being applied, your selector isn't targeting your elements properly or your selected has lower specificity than another selector with conflicting styles. runat=server has nothing to do with it, as that attribute is not actually rendered on the page.
Now, it appears you have an illegal type for your input. Based on your selector, you should have a structure something like:
<div id="Area">
...
<form>
...
<input type="mytype" /> //ILLEGAL!!
</form>
</div>
Why do you have a mytype input? You should only be using valid types, like text. Change them, and then add this:
#Area form input[type="text"]{
background-color:red !important; //This is just for testing, don't put into production!
}
If your inputs don't get a red background, then adjust to this:
form input[type="text"]{
background-color:red !important; //This is just for testing, don't put into production!
}
If you are still having trouble, actually paste your source code (click View Source from your browser, not Visual Studio).
UPDATE
Why do you have #Area in your selector? There is not element in your markup with that ID. This selector will work:
form input[type="email"]{ ... }
Assuming you don't need to be able to interact with the input elements in the page's code-behind file, it's perfectly acceptable to just use literal HTML controls in the page's markup.
Assuming, also, that you are allowed to tweak the CSS, you can remove form from your selectors, and then just make sure you copy everything into a <div> ... </div> with an id="Area" attribute.
CSS:
#Area input[type="whatever"] {
content: '';
position: absolute;
display: block;
}
HTML:
<div id="Area">
...
<!-- add markup here -->
...
</div>
I've been reading a lot about CSS inheritance but I haven't been able to find anything about this question, and I'm confused. Please consider the following:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.anc {
background-color: blue;
color: red;
}
.des {
background-color: inherit;
color: inherit;
}
</style>
</head>
<body>
<div class="anc">
<p class="des">
One <!-- Blue background, red text. Clearly inheritance. -->
</p>
</div>
<p class="anc">
<div class="des">
Two <!-- Why is nothing inherited here? -->
</div>
</p>
</body>
</html>
The "One" text is working as I'd expect. But I don't understand why the "Two" text doesn't have a blue background and red text as well.
Is there some special rule about inheritance for block elements as opposed to inline elements? Or something special just about div? What am I missing here? Do you have an online reference to a very thorough explanation of inheritance? Everything I've seen (and I've been looking a long time) just explains examples like "One", but doesn't address issues like "Two".
I know that there are many (better) ways to get the same visual effect I'm asking for here. But this example is about me trying to understand inheritance in general, not trying to get any particular effect on this HTML code.
Thank you so much for your help!
A <div> inside <p> tag is not valid HTML. If you check the rendered HTML, it probably looks something like this:
<p class="anc"></p>
<div class="dec">TWO</div>
<p></p>
The browser fixes the invalid nesting, but that breaks your CSS definition.
You can't nest block-level elements inside a <p> - the opening <p> ends up acting as a self-closing element and pushes the descendant div out of the <p> as a succeeding sibling. The paragraph also creates an empty <p> after the div; the structure ends up looking like:
<p class="anc"> </p>
<div class="des">Two</div>
<p></p>
A <p> can only contain inline elements. It is invalid to put a <div> in a <p>.
You swapped <div> and <p> in the second case. Also your css specifies .des, whereas your class name in the HTML is dec See working jsFiddle here.
<div class="anc">
<p class="dec">
One <!-- Blue background, red text. Clearly inheritance. -->
</p>
</div>
<div class="anc">
<p class="dec">
Two <!-- Why is nothing inherited here? -->
</p>
</div>
.anc {
background-color: blue;
color: red;
}
Also, there's no need for the inherit as the child will be rendered within the parent, whose style you set already.
There is a good example about using css nth-of-type selector http://codepen.io/mnafricano/pen/ltKvy, but when I run the example myself, I can't make it work. Can somebody point out what goes wrong in using the nth-of-type
The html is
<h1 class='logo'>Google</h1>
, and css is
h1.logo span:nth-of-type(1){
color:#0089ab;
}
h1.logo span:nth-of-type(2){
color:#d91821;
}
h1.logo span:nth-of-type(3){
color:#ffac05;
}
h1.logo span:nth-of-type(4){
color:#0089ab;
}
h1.logo span:nth-of-type(5){
color:#88c406;
}
h1.logo span:nth-of-type(6){
color:#d91821;
}
The CSS here works, the trick is that there is some Javascript on that page which adds a <span> wrapper around each of the letters in "Google".
The CSS specifically is looking for the nth span inside of the h1 with class "logo".
If you directly take the HTML and CSS, but not the JS the CSS rules will never match.
If you inspect the h1, you'll see the following:
<h1 class="logo">
<span class="char1">G</span>
<span class="char2">o</span>
<span class="char3">o</span>
<span class="char4">g</span>
<span class="char5">l</span>
<span class="char6">e</span>
</h1>
If you try that HTML instead, it should work as you expect.
Here's a JSFiddle that may help.
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>