I cannot get my hover or the other effects to work properly. What part of my code is incorrect?
CSS
#nav a {
display: block;
width: 180px;
height: 150px;
background-image: url(https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg);
background-repeat: no-repeat;
}
#nav a {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 0;
}
#nav a:hover {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -39px;
}
#nav a:active {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -83px;
}
HTML
<body>
<img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" />
</body>
your css is looking for an a tag inside of an id called nav but you dont have that in your html. Change it to
<div id="nav"><img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" /></nav>
also you are trying to change the background of a but you have an image tag inside of the a. You should make everything a background image
In your CSS, you're accessing the element inside another element with an ID of "nav"... but in your HTML, there is no #nav element. You have two options, the first being:
Change your CSS to remove all the #nav before the a's.
Change your HTML to something like this:
<div id="nav">
<img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" />
</div>
Also, as Hashem Qolami said, you should remove the white space between "url" and your opening parenthesee. On another note, make sure the url inside your parentheses is inside quotes as well.
You should remove the white space between url and the opening parentheses in url (...), as follows:
#nav a {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 0;}
#nav a:hover {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -39px;}
#nav a:active {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -83px;}
WORKING vs NOT WORKING.
Also as you've used #nav a selector, you should have a wrapper for the anchor tag with the id of nav as well. If there's not such a element in your real markup remove the #nav from the CSS selectors.
So here's how I'd do it, in its simplest form
http://jsfiddle.net/7wh9z/
Add your image paths as needed - I've used colours as an example, you can take them out if you need to.
a {background: url('') #ff0000; width:150px; height:45px; display: block}
a:hover {background: url('') #00ff00;}
a:active {background: url('') #0000ff;}
The fact you've got an image in there already means whatever is in your IMG tag will display above the background - So that will prevent you from seeing the background and hover effects, so you're best off taking that out.
Remember to give your links classes or ID's as what I've given you will affect all a tags.
Related
Issue: When you click our logo a black bar appears underneath it in both firefox and chrome. If you hold the click on the logo it'll stay.
Below is some of the code I have tried to remove the black bar on focus:
a:active, a:focus {
outline: none;
}
a {
outline: none;
}
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
a img {outline : none;}
img {border : 0;}
Can someone tell me what is causing the black bar?
The reason this is happening is because, on line 45 of screen.css, you have the rule saying "background-color: #000 !important;" which is affecting a.coa-link (Your rule is set to affect a:focus, a:active, amongst others. This is why it only occurs when you click/click-hold on the link [focussing on the element.])
If you add to line 35 of style.css:
#header a.coa-link { clear: both; /* YOUR EXISTING CODE */
background-color: transparent !important; /* NEW LINE OF CODE */ }
Then your issue will not occur anymore.
HTH
Try setting the background-color for .coa-link class, to rgb(43,66,114) which is the background-color set to your body element.
Ok so it is a very weird issue, but a workaround is to add a div around the image:
<a class="coa-link" href="/" title="Home">
<div>
<img src="/files/2012/07/AC-banner-white-test7.png" alt="">
</div>
</a>
It worked for me in the chrome inspector.
This is happening because you have focus styles implemented for <a> tags. The reason it's shown as a black bar is because the <a> that surrounds the logo image does not have display: block; in the CSS. If it did have display: block, the entire header would have a black background.
Another problem is that there is an !important tag in there. Booo.
You need to add the following style to fix the black bar in your logo link:
#header .coa-link a {
display: block;
}
#header .coa-link a:focus,
#header .coa-link a:active, {
background: transparent!important;
}
I would never ever suggest using the !important declaration in CSS, but as someone has already added it in, you need to override it. Ideally remove the !important tag that's shown in the attached image, and then you won't need it in the fix.
I want to create menu like this:
I want to see red square on acitve page and after hover. Menu is created by:
<div id="menu">
<ul>
<li><a href="#"><span>Home</span><a></li>
<li><a href="#"><span>About</span><a></li>
<li><a href="#"><span>Contact</span><a></li>
</ul>
</div>
I am trying to create this for 2 hours and nothing:( Can you give me an advice?
Here is a working jsfiddle for you:
http://jsfiddle.net/6sCZh/
li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px; }
ul { }
li a { display: block; color: #fff; text-decoration: none; margin: 14px; }
li a.active, li a:hover { background-color: brown; padding: 11px; margin: 3px; }
I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)
But maybe it helps a bit ;-)
The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.
Then create a rule that targets li.selected and li:hover which places the red box.
I cannot be more specific without seeing your HTML AND CSS.
For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/
The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)
http://jsfiddle.net/23zZE/
I want to change color of h3 links to red in this code:
<div class="news_headline">
<h3 class="breaking">title</h3>
</div>
I change css to:
a.breaking {
padding-right: 40px;
background: url('../images/icons/news_breaking.png') right center no-repeat;
color: red;
}
but it doesnt works!!! it display header as blue! here is css I change:
http://paste2.org/p/1959809
change a.breaking to .breaking a or add the breaking class to the anchor element.
a.breaking means: an a-element that has a breaking-class like this: <a class="breaking" href="#">title</a>
You can bind the style to the h3-element like so:
h3.breaking { /* h3 instead of a */
padding-right: 40px;
background: url('../images/icons/news_breaking.png') right center no-repeat;
color: red;
}
or you can add the class-attribute to the a-element:
<div class="news_headline">
<h3><a class="breaking" href="#">title</a></h3> <!-- class is in a, not in h3 -->
</div>
You should be wrapping the heading tag with the anchor tag http://davidwalsh.name/html5-elements-links
you should use .breaking a {}. This will then apply the css rules to all elements that have class='breaking' or are <a> tags.
two great tools for debugging css and javascript are firefox's firebug plugin or chrome's console. These make it easy to see where each element is getting its css from.
you should define the red color also for a:link and a:visited (since you defined a darkblue in your css code, line 10), so try
.breaking a {
padding-right: 40px;
background: url('../images/icons/news_breaking.png') right center no-repeat;
}
.breaking a, .breaking a:link, .breaking a:visited {
color: red;
}
I am working on this : Menu List
What I am trying to do is check with yourselves, If my approach is the right way. The site is running on Wordpress.
So ideally I'd like to get rid of the text "Our Services, About Us" etc.. But I'd also like the graphic to become a clickable anchor link.
Has anyone any ideas on the best way to approach this?
Thanks in advance.
Give image inside anchor. Write like this:
.menu-header ul li a{
display:block;
padding: 70px 55px;
text-indent:-9999px;
}
#access .menu-header ul li#menu-item-26 a{
background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;
}
#access .menu-header ul li#menu-item-24 a{
background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}
#access .menu-header ul li#menu-item-23 a{
background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}
Check this http://jsfiddle.net/FN6f5/2/
I would do this for removing the active link text. However i would suggest making each button image the same height so you can align them horizontally in a nice way. Widths can change but just adjust the css accordingly.
http://jsfiddle.net/FN6f5/3/
I'm attempting to use tabs generated by CSS to show an active state of an arrow under the tab. I was trying to position the image for the hover event with the background position properties, but it would bring the image outside of the given proportions of the tab.
This is the page: http://thegoodgirlsnyc.com/holly/about. The active tab should look like this:
The CSS styles are the following one:
#example-one li.nav-one a.current, ul.one li a:hover {
background:url("images/tabarrow.png") no-repeat scroll center bottom #999933;
border-bottom:1px solid #666666;
color:#666666;
padding:4px 15p
How can I get this image to show at the bottom of the predefined background? These tabs will be included in multiple locations, with varying length of text, so they should only use the one image.
Due to the background image with diagonal lines I doubt it is possible to do what you need by styling one tag only.
The solution could be either styling both the LI and the inner A tags (see an example that is very close to your image there: http://www.litecommerce.com/services.html) or wrapping the anchor text into SPAN and styling the A and the inner SPAN tags.
Here's is HTML and CSS i got from tweaking your page in Firebug that gets the desired effect:
<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
Featured
</li>
You can convert the inline styles to the appropriate CSS styles. The above markup is just for the selected LI element and the anchor element inside.
Hope this helps you.
Ok, here's an updated version for you that should work (note, the above CSS should only be applied to the selected LI and the A element within):
Your HTML Markup
<ul class="nav">
<li class="nav-one current">Services</li>
<li class="nav-two">Clients</li>
</ul>
NOTE: class='nav-one current' on selected LI element instead of A element
Your NEW CSS
ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }
There is an error in your CSS selector. It should be:
#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }
Here's a sample of what i did in Chrome and the result:
NOTE: Also, it looks like your image path is not resolving to the image on your server correctly, in my case it is because I put in the full path to the image.
NOTICE: You didn't change the markup to have the "current" class on the LI element instead of the A element.