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;
}
Related
Is it possible to change the background-color of a div inside a link using only a :visited pseudo class and without using Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {background-color:blue;}
a:visited {background-color:green;}
.smallbox {
background-color: #666;
height: 50px;
width: 50px;
}
.smallbox:hover {background-color:blue;}
.smallbox:visited {background-color:green;}
</style>
</head>
<body>
<div class="smallbox"></div>
</body>
</html>
Yes, I believe you can do this. Just remember the visited pseudo class belongs to the link, not the div.
a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}
.smallbox {
display: block;
background-color: #666;
height: 50px;
width: 50px;
}
<span class="smallbox"></span>
As pointed out by Dekel in the comments, a div inside an anchor element is invalid HTML. You could cheat and put a span inside the link and set its display property to "block", but that's probably not really better.
If you just need a link that behaves like a block element rather than an inline element, consider switching the anchor tag's display property to block and removing the inner element entirely as suggested in this post: <div> within <a>
Instead of applying it to a div, why not apply it directly to the "a" tags, as you did, and remove the div? Why do you need it? a: hover { background-color:blue; } should work just fine. You just need to add a display:block to the a:hover style, as well.
Or, if you have multiple a tags on the page and only want to apply it to one of them, you can use an id and apply it to that:
<a id="someId" href="#">My Link</a>
CSS:
#someId {
background-color: blue;
display: block;
}
Why doesn't this work (in terms of text color):
.navbarDivText {
color: #DAA520;
}
.navbarDiv {
width: 150px;
background-color: inherit;
margin-left: 10px;
}
<li class="navbarDiv" >
Main Page
</li>
But this does:
<li class="navbarDiv" >
<a href="index.php">
<div class = "navbarDivText">Main Page</div>
</a>
</li>
In this there are two cases if you give the color for list it will change the color of list and the anchor remained blue by default with underline.
If you also want to to change the color of anchor in a list you should have also give the styling for anchor means text-decoration and color whatever style you want.
See example here hope this will help you. Link
More demo: Here
Bootstrap is probably overriding this...
You'll need to be more specific e.g.
a.navbarDivText {
color: #DAA520;
}
You may have to use:
a.navbarDivText {
color: #DAA520!important;
}
If for some reason that doesn't work...
On a side note you should only put a div inside an a tag if you are using the HTML5 doctype, which I imagine you are.
When a link is clicked the browser will give it a color to show it has been visited. So you could try the below :visited selector. If that doesn't work then it is likely that another style is overriding your style. As mentioned in the comments, inspect the element in the developer console and see if your style is being overridden.
.navbarDivText:link, .navbarDivText:visited
{
color: #DAA520;
}
Works fine to me, clear cookies and try.
.navbarDivText {
color: #DAA520;
}
.navbarDiv {
width: 150px;
background-color: green;
margin-left: 10px;
}
<li class="navbarDiv">Main Page</li>
Could do this as well,
.navbarDiv a, a:visited {
color: #DAA520;
}
or
.navbarDivText:link, .navbarDivText:visited {
color: #DAA520;
}
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.
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>