If I have something like the code below I would expect my link to be in red color with large fonts, it does not work, however.
.footer {
text-align: center;
}
.footer a {
color: red;
font-size: 32px;
}
Live example: http://jsfiddle.net/avUT4/
I don't understand. I'm not good at css but why this code does not work?
There is some strange character in front of the .footer a rule. Try copying the code to jsbin.com and you'll see it marked by a red dot. This happens to me a lot when copying from jsfiddle. If the char is removed, all is good.
Here is your fiddle, without that character.
As far as I can tell you have a garbage character somewhere. I rewrote it and it's fine.
.footer
{
text-align:center;
}
.footer a
{
color:red;
font-size:32px;
}
http://jsfiddle.net/avUT4/10/
I think this is a bug in jsfiddle. If you just define:
a {
color: red;
font-size: 32px;
}
It works. Then if you add .footer (just type it back in before "a"), it works still, but it won't work from the start point when ".footer a" is defined.
try this:
.footer {
text-align: center;
}
.footer a:link, a:active {
color: red;
font-size: 120px;
}
Related
Situation
I recently decided to put comments in my CSS files. And once I did so, one of them stopped working.
Both ways of making comments make my entire CSS file not to work. I know this is lacking informations, I just don't know where it could even possibly come from.
In case it does matter, this is how I write my CSS:
// Background
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
// The white spaces are actually tabs (Alt+i on Emacs)
Update 1
I am looking for ways to debug this situation. I see my CSS files in the developer tool from Google Chrome, but properties are not applied.
foobar {
// color: cyan;
}
Does this simply make the CSS wrong but only on the one line ? So the rest of the file keep getting parsed ?
Update 2
I always used // to comment my CSS but with the later notation I used in this post. Now that I changed my mind and am using inline CSS, // being an invalid token make the whole file not readable.
css does not recognize the double slash as a comment. You have to use the
/* */ one.
I might be wrong, but since the double slash is not a valid css token the behaviour might be browser dependent. I would expect browsers to simply ignore the property or the statement that follows the //, but I never checked/tested.
There are rules on what browsers should do in various situations, however I did not see any for unknown token (maybe a I didn't look well enough).
Use */ Text */ , instead of // (// is comment in javascript)
/* Comment */
For Example
/**** Background ****/
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
/* The white spaces are actually tabs (Alt+i on Emacs) */
Try the comments this way
/* Background */
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
/* The white spaces are actually tabs (Alt+i on Emacs) */
The only way to comment in CSS is by /* this is a comnent */
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
I have built a navigation list for a client and they opted to use the [Oswald]() font-face.
Now when the user scrolls over the link a navigation arrow will pop up to the side indicating which link is currently click, it is NOT supposed to turn orange upon hovering. I have removed any javascript and the fontface entirely and still can not remove the problem.
Here is a screenshot of the issue http://cl.ly/043a0q0o0Q392q2m1k20
My CSS (SASS) is as follows:
#leftnav {
width: 205px;
float: left;
ul {
li {
border: 1px solid #fff;
border-top: 0px;
background: #cc5816;
padding: 3px 10px;
#include gradient($top_color: #d86c07, $bottom_color: #bb5e06);
a {
position: relative;
font-family: $main_bold_font;
font-size: 16pt;
color: #fff;
text-decoration: none;
text-shadow: $text_shadow;
}
a:hover { #extend a; }
a:visited { #extend a; }
}
}
}
Any Ideas?
I dont know for sure if this solves the problem. But, as stated here, I would recommend to change the order of :hover and :visited to be :visited and :hover. Maybe it helps to analyse the compiled css.
I'm currently working on a team that uses SASS. I see that we are extending styles that are very simple and to me I don't see the benefit of doing this. Am I missing something?
Here are some examples of a _Common.scss that is imported and used throughout other sass files:
.visibility-hidden{visibility: hidden;}
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.display-none { display: none; }
.display-box { display: box; }
.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; }
.width-percent-100 { width: 100%; }
.width-percent-65 { width: 65%; }
.width-percent-50 { width: 50%; }
.width-percent-45 { width: 45%; }
.width-percent-40 { width: 40%; }
.width-percent-33 { width: 33%; }
.width-percent-30 { width: 30%; }
.width-percent-20 { width: 20%; }
.height-percent-100 { height: 100%; }
.cursor-pointer { cursor: pointer; }
.underline { text-decoration: underline; }
.text-decoration-none { text-decoration: none; }
.bold { font-weight: bold; }
.font-weight-normal { font-weight: normal; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }
.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }
.font-percent-65 { font-size: 65%; }
.font-percent-80 { font-size: 80%; }
.font-percent-90 { font-size: 90%; }
.font-percent-100 { font-size: 100%; }
.font-percent-110 { font-size: 110%; }
.font-percent-120 { font-size: 120%; }
.font-percent-130 { font-size: 130%; }
.font-percent-140 { font-size: 140%; }
.font-percent-150 { font-size: 150%; }
.font-percent-160 { font-size: 160%; }
.font-percent-170 { font-size: 170%; }
.font-percent-180 { font-size: 180%; }
Example:
#CategoriesContainer
{
ul{
li{
&:first-child{
#extend .font-11;
}
a
{
#extend .font-11;
#extend .text-decoration-none;
}
}
}
}
You should only use extend when you have a certain attribute set that will be used multiple times. The sheer stupidy of extending a class with a class with one attribute that has the unit value worked into the name of it is incomprehensible.
A better example for a reason to extend can be found in the reference guide
Say we have 2 classes
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
.error is a general no interesting style but a serious error should be really clear.
.seriousError is created to thicken the line, the only problem is that now we have to use both classes in the html to combine the styles.
Because we're lazy and just want to use one class and not duplicate code that might be changed in the future we can extend .seriousError with .error
.seriousError {
#extend .error;
border-width: 3px;
}
Now we didn't duplicate the code in our sass file but did get the right styles on the page.
Check out the reference guide for more/better examples.
Just please for the sake of kittens stop extending classes with one attribute classes. And don't implicitly state the value/attributes in the selector, thats not very semantic.
You, and your team, should read this post which explains a few problems with the aproach you take here vs semantic code. Couldn't find a better tuned post this quick.
You aren't missing anything, this is just bloated code in poor form and not a great way to extend classes.
There is maybe one (bad) reason I can imagine why this would be used. If for example .font-10 needs to be .7em instead of 10px, it can be easily changed - but then you've just defeated the point of naming the class "font10". Something like small-font would even make more sense in that case (and I'm not suggesting you use that either).
I won't discuss the merits of semantic class names and the folly of presentational ones (especially as literal as these are), but I will suggest that this is a very narrow use of extending classes. With a 1:1 mapping of class name to property/value, you've practically defeated the purpose of #extend, which is supposed to make you write less CSS.
Better example of what to use #extend for:
.media {
padding:1em;
border-color:blue;
background-color:red;
clear:left;
}
.my-media {
#extend .media;
background-color:green;
}
Atomic CSS
The technique of very simple CSS rules does have a bit of precedent - at Yahoo! they call it Atomic CSS. Thierry Koblentz argues in this Smashing Magazine article for using the simple classes directly in your markup, similar to inline styling. This can be helpful on very large projects across multiple web properties, where styles are not consistent. Base styles for OOCSS components can't be reused as much in such a situation, causing you to have to write many more lines of extension classes or overrides.
The downside is, of course, as Wesley mentioned, that it is much more difficult to make changes across your entire project's styles, such as updating the text size of a specific selector.
I've been playing around with a variant of this technique recently in a fairly large project, where styles can often be one-off. In an effort to avoid the I try to avoid putting hard values directly in the selectors. For instance, the following css (example fiddle):
_colors.scss
.text-white {
color: $white;
}
.blue {
#extend .text-white;
background: $blue;
}
_effects.scss
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 40px;
}
.matted {
border: 4px solid $white;
}
.shadow {
#include box-shadow(0 1px 4px 1px rgba($black, 0.25));
}
HTML:
<div class="blue matted circle shadow">?</div>
Specificity issues
One last thing to keep in mind if you decide to use this technique - it can cause specificity problems if you're extending base-level classes that use the same CSS properties. For instance, in the following example (fiddle), how would your border-radius appear? You wanted the top to be squared off (no border-radius) but this isn't happening, because the .circle class is further down in your css and just as specific (single class) as the other effects. This is a bit of a contrived example, but if you reuse CSS properties across your atomic selectors, this can be a real problem.
_colors.scss
.text-white {
color: white;
}
.blue {
#extend .text-white;
background: royalblue;
}
_effects.scss
.squared-top {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.rounded {
border-radius: 10px;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
}
HTML:
<span class="circle blue rounded squared-top"></span>
If you do it that way you can also use it directly in the HTML - so it looks like they took the OOCSS path and because it's already in the CSS you can now also extend to it. Very flexible but it could also turn very messy.
Extend option is used poorly here. It should be used for extending classes with more content and in that case extend can be very helpful.You can find more about extend and its options here.
I'm sorry, I'm a complete newbie to CSS and I'm trying to create a custom display for an xml file with CSS.
My question is: how can I display a certain text before a certain element, e. g. "Project:" before each element?
I tried like that with ":before" but that does not seem to do the trick
ThinkingRock
{
background-color: #ffffff;
width: 100%;
}
project
{
:before{content:"Projekt:";};
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
description
{
color: #FF0000;
font-size: 20pt;
}
notes
{
color: #0000FF;
font-size: 20pt;
}
id, created, parent, topic, context, state, done, priority, modified, purpose, success, brainstorming, processed
{
display: block;
color: #000000;
margin-left: 20pt;
}
The xml file use is this one: http://www.trgtd.com.au/index.php?option=com_docman&task=doc_download&gid=16&Itemid=71
I've only added the first line <?xml-stylesheet type="text/css" href="thinkingrock.css"?>
:before is a pseudo-selector itself, so it needs its own style block, like below:
project:before {
content:"Projekt:";
}
project {
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
fiddle: http://jsfiddle.net/wNEt3/
fiddle using your xml and css: http://jsfiddle.net/pRwMT/1/
Btw, http://htmldog.com/ is a great place to go for HTML & CSS tutorials, and they kindly point out W3schools inconsistencies, if you've visited there first :D
use z-index , z-index Only Work with position: fixed,relative,absolute:
project:before {
width:100%;
height:100%;
position:absolute;
content:"";
z-index:-2;
}
project {
position:relative;
display: block;
z-index:30;
}
or:
project:before {
width:100%;
height:100%;
position:relative;
content:"";
z-index:-2;
}
project {
display: block;
z-index:30;
}
documention : https://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a site that was done in Joomla here (I'm not very familiar with Joomla, but I have had to learn it quickly) and looks great in all browsers, except IE7.
The problem is that the top menu doesn't render in IE7, and thus all the CSS after the menu breaks. I know that it's at least partially loading because some of the styles are loading (the background, colours and type), but the main container and other divs aren't rendering.
I suspect that either IE7 is not reading the correct style sheet (there are 4 - one for nomal, one for IE7, one for IE6 and one for printing) and may be trying to implement two at the same time?
I have no more ideas for how to find the problem, so I'm hoping that either someone else has had this problem or knows how to fix it.
I have included a link to the home page of the site, but if you need more information in order to help me, just let me know.
Thanks in advance.
I skimmed through some of your CSS, and I found this section in template.css:
/* begin Logo */
div.art-logo {
display: block;
position: absolute;
left: 10px;
top: 20px;
width: 500px;
}
h1.art-logo-name {
display: block;
text-align: {
HorizontalAlign
}
;
}
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
font-size: 26px;
text-decoration: none;
padding: 0;
margin: 0;
color: {
NameFontColor
}
!important;
}
h2.art-logo-text, h2.art-logo-text a, h2.art-logo-text a:link, h2.art-logo-text a:visited, h2.art-logo-text a:hover {
font-weight: normal;
font-size: 18px;
padding: 0;
margin: 0;
color: {
TextFontColor
}
!important;
}
h2.art-logo-text {
display: block;
text-align: {
HorizontalAlign
}
;
}
/* end Logo */
At a guess, I'd say that the bits like this:
{
HorizontalAlign
}
;
should be this like this instead:
{HorizontalAlign};
and then Joomla will replace the placeholder. (I don't know Joomla, I'm just guessing it will)
If not, try text-align: center instead.
If that still doesn't fix it, you should look through all of your CSS for more instances of the same mistake.