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.
Related
I need assistance from you CSS gurus on styling this select. I am using Jquery easydropdown and have specific look in mind. I am very close. Please check out my code here
Here is the start of my code
/*My Dropdown css */
.dropdown {
margin: 0 auto;
width: 210px !important;
margin-bottom: 10px;
}
.dropdown li{
color: #f08800 !important;
background: #f3f3f3;
font-size: 13px;
}
.dropdown li.active{
color: white !important;
background-color: #f08800;
}
The rest can be found in the codepen project I put together.
Attached is the image of what I am looking for
Thanks!
I have two sets of buttons. The first set is for navigation, the second set is for download and info.
The first set works fine, the second set works fine too, but I can't get these buttons to change when I hover over them.
Here is the code I used for the second set (this set is used with book covers):
.book_covers li .btn1,
ul li .btn2{
border-radius: 10px;
background-color: #E77600;
cursor: pointer;
width: 41%;
height: 22.5%;
padding: 0%;
float: left;
text-decoration: none;
color: #fff;
text-align: center;
font-size:80%;
cursor:pointer;
-webkit-box-shadow: inset 1px 1px 5px 2px #733B00;
box-shadow: inset 1px 1px 11px 2px #733B00;
-webkit-transition-duration:0.4s /*safari*/
transition-duration: 0.4s;.book_covers li .btn1 {
margin:0% 2% 4% 6%;
}
.book_covers li .btn2{
margin:0 5% 5% 1.5%;
}
.book_covers li .btn1 :hover {
background-color: #FFF;
color: #666;
}
.book_covers li .btn2 a:hover {
background-color: #FFF;
color: #666;
}
The page where they are used is: [link] (http://www.hoddenbagh.nl/bibleopen/subjects_eBooks.html)
Thanks guys for your responces, but I found the solution how to handle this:
.book_covers li .btn1:hover {
background-color: #FFF;
color: #000;
}
.book_covers li .btn2:hover {
background-color: #FFF;
color: #000;
}
Use 'onmouseover' event handler to get it done.
A simple example would be changing the color on moving the mouse over a button.
<button id="buttonone" type="button" onmouseover="changecolor()">Click Me!</button>
<script type="text/javascript">
function changecolor()
{
document.getElementById("buttonone").setAttribute("color","red");
}
</script>
This would change the button text color to red on hovering the mouse over the button.
Using css and js!
function changecolor()
{
document.getElementById("buttonone").setAttribute("class","somenewvalue");
}
Then use .somenewvalue in the css stylesheet to give it the required effects .somenewvalue { color:red; }
Otherwise,using the onmouseover eventhandler, you could remove the previous button and create a new button with new attributes. This can be done using the DOM functions.Add effects to the newly created button using either its 'id' or 'class' in the stylesheet. If you have so many buttons in your website(not at one place or page),then it would be better to use css alone. Js and css together would be a good choice if the effects for different buttons on your site are gonna be different. Again,if you have a lot of buttons,css alone is better. I ain't sure about how to do it with css alone.
SASS inserts unexpected CSS on production server and messes up my a:hover
This is fragment of my application.css:
pre {
background-color: #eee;
padding: 10px;
font-size: 11px; }
a {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
border-bottom: none;
}
div {
&.field, &.actions {
margin-bottom: 10px; } }
however on production server firefox reports following css:
pre {
background-color: #EEEEEE;
font-size: 11px;
padding: 10px;
}
a {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
border-bottom: 1px solid #777777;
}
div.field, div.actions {
margin-bottom: 10px;
}
on my development machine firefox shows following CSS:
a:hover {
border-bottom: medium none;
}
I use Rails 3.2.13 and I have never seen problem like this. I have wasted whole afternoon trying to find a solution. This problem breaks my home page and makes it look very unprofessional.
First, border-bottom is a shorthand property. It combines border-bottom-width, border-bottom-color and border-bottom-style. The values of those properties can appear in any order. Any of them can be omitted.
none is a value from border-bottom-style.
Second, what Firefox shows in its inspection feature, is not exaclty your CSS. It shows what it treats the CSS like. border-bottom: medium none; means that you changed the style of border to none, while the width remains as medium (apparently, it was inherited).
To see the actual CSS, open the actual CSS file and look inside. It will also let you view media query wrappers.
Third, to remove bottom border, use border-bottom: 0;. That will be treated as border-bottom-width: 0;, which effectively removes the border.
I have these CSS definition for my buttons:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
}
In Internet Explorer 10, it gets a grey background when clicked. Why?
Just add a:active { background: none; } to your stylesheet.
Internet Explorer 10 seems to display links (anchors: i.e. <a href>), which has the property display:block; with a grey background when clicked.
You can remove this easily by inserting background-color:none; into your code. So, you should have the following code:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
background-color:none;
}
On the positive, the problem should be removed. Two negatives include that, you cannot set a background, or have an active state in Internet Explorer (i.e. a:active). Other browsers will continue to work perfectly normal/fine.
Still we could not understand what about the question is? Which background color is gray? You didn't provide your html too. I guess this bit of code would help you to change or remove the color of the links will change the behavior in each states...
a:link {color:red;}
a:visited {color:green;}
a:hover {color:blue;}
a:active {color:yellow;}
With this four colors you could check yourself and come to the conclusion... :)
I'm pretty new to CSS and have been finding my way around so far.
I am creating these button like links with shadows and stuff. Now there are several such buttons required on the site - everything about the buttons is same - except few properties change like width and font size.
Now instead of copying the same code - over and over for each button - is there a way of extending the button and adding just the properties that change.
Example of two buttons - css
.ask-button-display {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}
.ask-button-submit {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
font-weight: bold;
width:75px;
font-size: 12px;
padding: 1px;
}
And this is how I'm currently using it in my html
Ask a Question Submit
So I'm wondering if there is a cleaner way to do this - like
.button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button #display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button #ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}
But I'm not sure how to do this.
Thanks for your inputs
You can add multiple classes to one element, so have one .button class which covers everything, then a .button-submit class, which adds things in.
For example:
.button {
padding: 10px;
margin: 10px;
background-color: red;
}
.button-submit {
background-color: green;
}
See a live jsFiddle here
In your case, the following should work:
.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}
.button-submit {
width:75px;
font-size: 12px;
padding: 1px;
}
See a live jsFiddle here
You might want to try this:
.button {
padding: 10px;
margin: 10px;
background-color: red;
}
.button.submit {
background-color: green;
}
.button.submit:hover {
background-color: #ffff00;
}
This way you avoid repeating the word and will able to use the classes in the elements like this:
Ask a Question
Submit
See the example in JSFiddle (http://goo.gl/6HwroM)
Rather than repeat the common "Add a button class to the element" answer I'm going to show you something new in the weird and whacky world of new age CSS, or better known as SCSS!
This reuse of code in stylesheets can be achieved with something called a 'Mixin'. What this allows us to do is reuse certain styles by using the '#include' attribute.
Let me give you an example.
#mixin button($button-color) {
background: #fff;
margin: 10px;
color: $color;
}
and then whenever we have a button we say
#unique-button {
#include button(#333);
...(additional styles)
}
Read more here: http://sass-lang.com/tutorial.html.
Spread the word!!!
You can do this since you can apply more than one class to an element. Create your master class and and other smaller classes and then just apply them as needed. For example:
Ask a Question Submit
This would apply the button and submit classes you would create while allowing you to also apply those classes separately.
Modify your code example along the lines of:
.master_button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button_display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button_ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}
And apply like:
Ask a Question
Submit
.ask-button-display,
.ask-button-submit {
/* COMMON RULES */
}
.ask-button-display {
}
.ask-button-submit {
}
You may want to look into Sass. With Sass you can basically create variables in your css file and then re-use them over and over. http://sass-lang.com/
The following example was taken from Sass official website:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Add a button class to both links for the common parts
.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
}
Keep in your other classes the rules that aren't common.
And your HTML will be
Ask a Question
Submit
Without changing/ adding new classes you can add styles to all elements with a class name starting with "ask-button"... (whatever the elements with the class are; button, anchor, div etc.) let's say your buttons are divs then:
div[class^="ask-button"] {
// common css properties
}
You can also list all classes that will have common properties like this:
.ask-button-display,
.ask-button-submit {
// common css properties here
}
And then you add the separate styling for each button:
.ask-button-display{
// properties only for this button
}
.ask-button-submit {
// properties only for this button
}