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.
Related
I'm going over the bootstrap site example http://getbootstrap.com/examples/jumbotron-narrow/#
and when I hover my mouse over the "About" or "Contact" links a grey rounded box appears around the text. When the mouse leaves the element, the grey rounded box disappears.
This is driving me crazy! I have inspected these elements and gone through the styles applied to them and have gone through every single one of them, all the inherited ones, the whole lot. Can someone go through the css and tell me exactly how this is happening? I expected to find some sort of :hover or :focus css but none exists. Furthermore it is not javascript that is changing the background as I have tested the site with javascript enabled.
Please help and I will love you forever.
The code you are looking for:
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #EEE;
}
Super simple, fix:
<link bootstrap />
<link custom /> <-- Overwrite CSS by placing external file after in HTML
Or:
<link bootstrap />
<style></style> <-- Overwrites bootstrap's external CSS
CSS to change is simple:
.nav > li > a:hover, .nav > li > a:focus {
background-color: none;
}
Why does Bootstrap make it so if you hover, it turns grey?
It is because it tells the visitors, that they are on something clickable: a link. And making it more user-friendly and improves a website's UX.
There are an CSS applied when you hovered these elements -
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
Please see highlighted in red -
Demo
html
<ul class="nav">
<li> About
</li>
</ul>
css
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
border-radius: 4px;
text-decoration:none;
width:50px;
text-align:center;
}
.nav {
list-style: none;
}
The buttons background turns grey because of the following css in the bootstrap.min.css file:
nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}
You can run a find on the code mentioned before to find it in the bootstrap.min.css file.
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.
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.
When I mouse over linked images I see hover background color beneath the image. How to avoid this?
Is there any solution that would not involve applying special class to a elements (like a.nobackground:hover)?
CSS:
a:hover, a:focus {
background-color: rgb(240,39,96);
cursor: pointer;
}
HTML:
<img src="with_transparency.png" alt=""/>
edit:
setting img background to none doesn't work
a img {
background: none !important;
}
setting img background to any other color would do the job if there's no non-solid color (or graphic) beneath the image (in this case .png)
a img {
background: #000 !important;
}
Does setting the background color of the images do what you want?
a img {
background: none;
}
Depending on your stylesheets, you might need the !important bang in front of "none" to overwrite other conditions.
Edit: On second thought, you might want to explicitly set a color value instead of simply saying "none."
Another edit: True, if the color or background behind the transparent PNG wasn't a solid color, you'll encounter some issues. One alternative is this:
And the CSS:
.transparent_png {
background-image: url('with_transparency.png');
background-color: transparent;
display: inline-block;
width: ??px;
height: ??px;
}
So here, you're not actually using an image tag, but can overwrite the background-color property that's normally applied on a:hover and a:active. Does this work?
If I understood the question correctly... You will need to either apply a special class to that specific link, or call the link by its location if it´s different from others. For example:
div div div a {}
And as Matt said you might need to use !important because you have a rule that includes all the links in the page. I´d recommend a different class, it´s better from a semantic´s point of view.
I have the following HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hover for these menu items to a particular color. So I write:
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.
How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
how about
.main-nav-item:hover
this keeps the specificity low
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
I found if you add a !important, it works when previously it didn't.
a.main-nav-item:link {
color: blue !important;
}
a.main-nav-item:visited {
color: red !important;
}
a.main-nav-item:hover {
color: purple !important;
}
a.main-nav-item:focus {
color: green !important;
}
a.main-nav-item:active {
color: green !important;
}
Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active
One common error is leaving a space before the class names. Even if this was the correct syntax:
.menu a:hover .main-nav-item
it never would have worked.
Therefore, you would not write
.menu a .main-nav-item:hover
it would be
.menu a.main-nav-item:hover