I am exploring some example HTML from codrops. The following CSS is used.
Searching the internet, I can see where others have used span.reference, yet I cannot find an explanation for the purpose of the .reference.
Could anyone enlighten me?
span.reference a {
color: #aaa;
text-transform: uppercase;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
margin-right: 30px;
}
Let me add this link to the actual website for the example at codrops.
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
Looking through all the html and css, I could find no class by the name of reference anywhere.
I removed all three occurrences of reference in the menu.css code to see what the result would be and the menu system example stopped working properly.
Is there an implied class, or am I missing something really basic here?
Whoops, my bad, I lost track of what I was doing. I put the inline style into a seperate menu.css, then I removed the links that went back to codrops, which you folks had correctly pointed out, there was a class called "reference".
In addition, as I was removing/changing the CSS to see how things were affected, I failed to properly comment out a specific piece, which resulted in the menus being all messed up and when I put it all back it worked so I got hung up on the class "reference" and failed to adequately troubleshoot the person manipulating the hands and fingers.
I apologize for not keeping track of what I had been doing.
"muffled sound of me with my foot in my mouth here"
It is the class on the span element.
<span class="reference">
Link
</span>
Related
I’m currently developing an application with a GUI in C for use on a Linux machine. I’m using GTK3 and building the GUI in Glade. One part of my GUI uses the GtkCalendar widget and I’d like to customize its appearance, but I’m having some trouble. I’ve been able to style many other aspects of my GUI using a css file and have attempted to do the same for the Calendar, but with limited success.
I’ve provided a screenshot showing the current state of the calendar widget with the css styles I’ve been able to apply. I’ve also attached my css code.
I’m more or less happy with how the Calendar looks now but with 2 big exceptions:
I would like the left and right arrows in the header for changing the month and year to be larger so that they’re easier to use on a touchscreen. So far I haven’t figured out a way to do that. The most I could manage was adding a shadow so they’re more visible, but I can’t seem to increase the size of the button.
The box around the currently selected day on the calendar grid is off center. While this doesn’t affect its usability, it’s aesthetically unappealing to me and would prefer to change it. Those are the 2 big issues I’m having now.
I feel if someone is able to help me solve them, I’ll be able to tweak everything else to my liking. Thanks in advance for any help or insight you can provide.
.GtkCalendarStyle {
font: 24px "FreeSans";
padding-top: 8px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 8px;
border-color: rgba(0,0,0,0);
}
.GtkCalendarStyle .button {
color: black;
box-shadow: 3px 3px 5px gray;
}
.GtkCalendarStyle .header {
background-color: rgba(240,255,255,0.5);
}
GtkCalendar Screenshot
I've attempted to change the style of a GTK3 calendar widget using css but have been unable to change everything I needed.
Our designer prefers to provide web designs in .psd (Photoshop). When we get to create a page markup and styles, we usually have to compromise the design in favour of tools available to us. Surely the later depend on the skill of the person who implements the page, but given the following example, what is the general approach to research and arrive at the correct CSS technique to implement the design?
The example in question is the following:
In Photoshop, a text-based login button looks like this as the final result:
This is basically a [T] (text) element with the effect (Fx) applied to it. The effect is color overlay that appears to be set like this:
Without this effect, the login page in PSD looks like this:
Which is exactly how it looks in our page on the browser. If we are to get it to look exactly the same as in final .psd design, how we are to approach looking for the correct css-technique example?
We implemented the login link as <button> element with a given .css class. I've tried going with backgound-blend-mode: normal like this:
.login-box .login-button {
width: 100%;
height: 100%;
margin-left: 12.4vmax;
margin-top: 0.7vmax;
background: #5f6f8f;
border: 0;
outline: 0;
font-family: "OpenSansRegular";
color: rgb(57, 68, 98);
font-size: 0.9vmax;
font-weight: 700;
background-color: #5f6f8f;
background-blend-mode: normal;
}
but it gives the following look in Chrome:
I realize that the problem is probably related to the fact that we are using web font technique and it's not affected by the styling in browser, the same way text is affected in photoshop, but I'd appreciate a hint on how to approach the above-described problem. Thank you.
Try using adobe brackets it really comes in handy while slicing a psd. It has lots of cool feature and it would provide you with CSS hints so that you can achieve the same result as the .psd
Download brackets from here
Apply this css to the text:
Text-shadow: 0px 1px 2px rgba(255,255,255,0.2);
UPDATE 2: Question no longer relevant since it can't be solved with a MWE offline example. (I also found the offending piece of code which was responsible for the bug.
I have a small thin border when hovering over the header element which looks suspiciously like a text-decoration border and I can't get rid of it.
To my knowledge this problem can't be solved with text-decoration: none;… it just won't work or I applied it at the wrong element… then again, I think I've test them all… which Is why I am posting my question here.
text-decoration: "none" http://oho.xyz/hover1.jpg
The MWE works fine (http://codepen.io/pattulus/pen/bNRxaz), but the real thing isn't.
Since I don't know exactly where the problem is with my code, I have a live example running at . I debugged it with the web inspector for the last hours but can't pin-point what's off here. I placed an text-decoration: none !important almost everywhere without success.
So they real question is: What is this bug and how to find it?
Update: I dropped the faux-border added with an pseudo ::before element to the span to avoid confusion. I'll add it later when this problem is solved. I also made the html more semantic using this:
I have checked out the live version of your site, and if you disable the content: css property of your ::before css, the line disappears.
It's bad markup practice to have your a href wrapped around your two h1 tags. re-write like this:
<h1>Some title<span>sub title text</span></h1>
change your css to reflect the new html changes and you will be able to control the behavior better.
In my example I had a mixing which I called globally to underline all a tags:
#mixin hoverbottom($width: 2px, $style: solid, $color: $orangey-red) {
&:hover {
#include transition($link-transition);
border-bottom: $width $style $color;
}
}
Since the mixin isn't written in a smart way, I couldn't simply say border-bottom: none, but needed to #include hoverbottom (0px, solid, transparent);. I will rewrite it to work more smoothly. But… this was the culprit.
Thanks everybody for taking the time.
I use the 2 ways but I prefer the first due to reuse code. some prefer one or other. But I would like to know if the load in big stylized pages is better in one way than the other.
1)
<style>
.red{ color:red}
.right25{ margin-right: 25px}
.bold{ font-weight:bold}
</style>
<p class="red right25 bold">this is a red text, bold and right margin 25px</p>
2)
<style>
.class1{ color:red; margin-right: 25px; font-weight:bold}
</style>
<p class="class1">this is a red text, bold and right margin 25px</p>
That depends on how much of the code that you can actually reuse, but the performance difference won't be that big.
The biggest difference between the approaches is what the classes mean. Generally you should have classes that represent what you are trying to show, not exactly what styles you use to show it. Names that represent the intent rather than the implementation fares better when you make changes.
For example if you have the class right25 and want to change the margins to 20 pixels instead, then you either will have a class name that doesn't represent what it actually does, or you have to change it to right20 everywhere that you use it.
Two is your answer. The browser reads each class from right to left. Reading one class is faster than reading two classes.
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
http://css-tricks.com/efficiently-rendering-css/
Use the external stlye sheet. The browser can cache that.
http://www.w3schools.com/css/css_howto.asp
You're absolutely talking about the first method that could be slower than the second method?
To answer: There's no difference in speed of styling css.
To illustrate:
div{
color: blue;
padding: 10px;
}
div{
color: red;
font-size: 16px;
padding-left: 5px;
}
When css is applied over the rule, the following css will be applied by the browser:
div{
color: red;/*later one*/
font-size: 16px;
padding: 10px 10px 10px 5px;/*padding-left 5px is taken from later rule*/
}
And which is parsed by the browser at the same time when the div gets styled from the stylesheet.
Why there's no difference?
In any other programming language like JavaScript if one line gets error then another line doesn't run and so from that line of code the interpreter won't go to read the whole code.
But in css language there's no problem even if you write rules whether html has no such classes or id, there's no problem reading next line of code even if you have some mistakes in your stylesheet, whatsoever the browser will load entire stylesheet file and read the code and gives the output in same time (when stylesheet is fully loaded) and both of your code doesn't seem to be any difference in the speed.
By the way, it could be slower (that even you can't catch with your eyes) where there is slower internet connection below 32kbps because of stylesheet downloaded the line by line of code.
Hello i am finally getting to grips with CSS after about 4 years of picking it up as i go. This problem though has had me stumped for a few hours now so ive gave up and decided to ask for some help and learn from it that way.
All the smilies in my site have the img border that is for comment images.
examples here-
http://onlinebanter.com/node/5334
Ive already removed the border with border:none at other places in my website but i cant seem to change this. Could anyone suggest something for me?
thanks
A quick inspect element using Firebug add-on for Firefox reveals this is because of the following rule in one of your css files.
#comments .b2-postcontent img {
border: 2px solid #CCCCCC;
...
}
Changing this to border: none; should fix this. Not sure if you are using a css file packager since the css file seems to be css_9f04d02d9bb1b7bc07fd70d30ee1b762.css. So maybe just search for #comments .b2-postcontent img in all files and then change the appropriate location.
Thank mt. Im a big fan of firebug mt. This though has got me. Ive a feeling i might have tried your suggestion too. I think it removes the border from my comment image which isnt desired. I suppose then i would just have to target it that itself. Let me go try and thanks.
Thanks Wurst too. I think that just removes all my image borders. Maybe i have got it all set up at he wrong level. I will be right back.