As you can see in the image there are some tabs called welcome, aa, bb etc. Now the tab color is blue for an image (tab.png) that I have provided but I want to set a different image or no image at the time of selected. Here Welecome is selected and I have provided an image (tab_selected.png) for selected condition but that image is not rendering. Or If I dont provide any image in selected state, still the tab.png is reflecting. What can I do for this ?
CSS:
#navigation a {
color:#FFFFFF;
display:block;
font:12px Arial, Helvetica, sans-serif;
margin:0 4px 0 0;
padding:3px 10px 4px;
text-decoration:none;
background-image:url(../images/tab.png);
}
#navigation .selected a {
background-image:url(../images/tab_selected.png);
border-bottom:1px solid #e0e0e0;
font-weight:bold;
color:#000;
padding-bottom:3px;
}
Which element are you applying the "selected" class to?
If it is the anchor element (a), then your CSS rule should be:
#navigation a.selected {
Added double quotes for urls. Try this...
Main issue was found by obfuskater
#navigation a {
color:#FFFFFF;
display:block;
font:12px Arial, Helvetica, sans-serif;
margin:0 4px 0 0;
padding:3px 10px 4px;
text-decoration:none;
background-image:url("../images/tab.png");
}
#navigation a.selected {
background-image:url("../images/tab_selected.png");
border-bottom:1px solid #e0e0e0;
font-weight:bold;
color:#000;
padding-bottom:3px;
}
Related
http://studioadesigncollective.com/smoovesalsero/
Heres' the CSS for the button - there's nothing else in the rest of the css that refers to this button.
.shortcode_button {
display:inline-block;
margin:0 10px 10px 0;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
border:2px #555555 solid;
border-radius:5px;
-webkit-border-radius:5px;
transition: all 400ms;
-webkit-transition: all 400ms;
line-height:20px;
font-size:14px;
padding:10px 21px;
font-weight:700;
text-transform:uppercase;
vertical-align:top;
text-align:center;
}
.shortcode_button.btn_type1 {
color:#555555;
background:#fff;
}
.shortcode_button.btn_type1:hover {
color:#ffffff;
border-color:#aa0935;
background:#aa0935;
}
.promo_text_block .shortcode_button {
padding:16px 25px;
margin-bottom:31px;
}
Seems like there is:
The question you might be asking is why the selector with the yellow background-color is trumping your own selector with the red background-color. The answer is selector specificity. Since the selector in the plugins.css file is looking for three classes, and yours only looks for two, the former wins, or gets to apply its style.
How to fix it? If possible, remove the offending style, or change the naming of your class to something the offending style won't be applied to, such as button_yellow.
Hope this helps!
I have this css below. Some how my this css's clicked link gets over written by some other css once I click the link. It turns the link color to red. I tried to keep it white in code below but thats not helping. What can I do to get it working
.grey {
background-color:#545154;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #120c12;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}.grey:hover {
background-color:#a8a5a8;
}.grey:active {
position:relative;
top:1px;
}
.grey a:visited{
color:white !important;
}
.grey a:link{
color:white !important;;
}
html
Site
The selector for the white color is off. It should be .grey:visited or a.grey:visited.
in all catelog pages of site the link menu on top is not getting aligned, see sample link - car finance section.
*whenever we try to put 3rd link on top menu left- it splits to next line
Same issue on top menu right - any 4th link splits to next line*
We tried changing width - used all permutation / combination - but to no help
What we seek for it is
.footer-top-box-left - for top menu link units
.footer-top-box-right - for google custom search box
so that both comes in 1 single line
below is the code of css used for - pl suggest
#footer-container {
float:left;
width:1000px;
clear:both;
background:#FFFFFF;
text-align:center !important;
}
#footer-container .footer-top-box {
float:left;
width:965px;
margin:0 0 10px 5px;
padding:0 5px 0 10px;
height:33px;
background:url(../images/footer-box-bg.gif) repeat-x;
border:1px solid #e7e5e5;
}
.footer-top-box .footer-top-box-left {
float:left;
width:300px;
margin:0 0 0 5px;
font: normal 10px Arial, Helvetica, sans-serif;
color:#000000;
text-align:left;
padding:10px 0 0 0
}
.footer-top-box-left img {
margin:0 3px 0 3px;
}
.footer-top-box .footer-top-box-right {
float:right;
width:500px;
margin:0 5px 0 0 ;
font: normal 10px Arial, Helvetica, sans-serif;
color:#000000;
text-align:right;
padding:10px 0 0 0;
}
.footer-top-box-right p {
margin:0;
padding:0;
font: normal 10px Arial, Helvetica, sans-serif;
color:#000000;
}
.footer-top-box-right p a:link,
.footer-top-box-right p a:hover,
.footer-top-box-right p a:visited {
margin:0;
padding:0;
font: normal 10px Arial, Helvetica, sans-serif;
color:#b60205;
text-decoration:underline;
text-align:justify;
}
Change the width of the holder div - "footer-top-box-left" or "footer-top-box-right" and it should work.
Testing with a copy of your html I was able to add a 3rd item on the left after changing "footer-top-box-left" from 300px to 400px width.
If you want to have box boxes as a single line I would recommend making a single div and perhaps using float: right for the menu items that must be aligned to the right.
This CSS creates a nice effect when applied against a single blockquote within the content its attached to.
However, when there is more than one blockquote, everything works except the generated content.
In other words, the quote symbol is only applied to the first instance of the blockquote.
blockquote{
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C';
clear:both;
}
blockquote:before{
content:open-quote;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 -45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
Update: Thanks to Alex Morales, the issue is resolved by adding:
blockquote:after{content:close-quote;position:absolute;visibility:hidden;}
Change your first statement to:
blockquote {
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C''\201C';
}
See jsFiddle demo
You need to apply the close-quote for the :after pseudo-element. This should take care of your issue.
Here's some sample code:
blockquote:after{
content:close-quote;
font-weight:bold;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
I have an issue regarding style my blog. I want to make the header bar
position:fixed
The header bar looks like this:
.blurbheader {
position:fixed;
padding:4px;
width: 100%;
height: 40px;
margin-bottom:30px;
color:#fff;
background:#cc0000;
font: 12px Helvetica, Arial, sans-serif;
line-height:1.3em;
}
.blurbheader a {color: #fff;}
/* creates the triangle */
.blurbheader:after {
content:"";
position:absolute;
bottom:-40px;
left:210px;
border:20px solid transparent;
border-top-color:#cc0000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
But as soon and I do that, 2 navigation bars I made, which are shown as
.blurb {
position:relative;
padding:10px;
margin:20px 0 0.5em;
color:#fff;
background:#000;
font: 11px Georgia, Geneva, "Times New Roman", times;
line-height:1.3em;
}
.blurb a {color: #fff;}
/* creates the triangle */
.blurb:after {
content:"";
position:absolute;
top:-30px; left:20px;
border:15px solid transparent;
border-bottom-color:#000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
When try to make the headerbar (blurbheader) fixed, when I scroll, it looks like this:
The box on the right hand side is the navigation bar, which won't scroll under the header bar. What do I do?
It is a z-index issue.
try adding the following to your .blurbheader
z-index:1;
and whatever is holding the rest of the page, like the wrapper, add a
z-index:0;
that should fix the problem