I have a layout that uses navigation with two lines of text. These are identified using span. The first span is responding to changes in the CSS, in particular a:hover, but the smaller text isn't responding.
I'm simply looking to change the colour of the smaller text when hovering, and to understand what I'm not doing or doing wrong.
Any help is appreciated.
Here's my code.
There is a very subtle solution to your problem. You currently have:
#navigation .pagetitle a:hover{
font-size: 15px;
color: orange;
}
But this would be where the anchor was a child of the span. It's actually the other way around...
#navigation a:hover .pagetitle{
font-size: 15px;
color: orange;
}
You have the :hover applied to the a tag, when it should be applied to the span tag. Like so:
#navigation .pagetitle:hover
Try this decendent selector:
#navigation.pagetitle {
font-size: 15px;
color: #999;
}
Is this what you're looking for?
Try this
#navigation a:hover span{
color: #ec0181;
background-color: #333;
}
You can always use the !important feature. Example:
#navigation .pagetitle a:hover{
font-size: 15px;
color: orange !important;
}
Related
I am in the process of replicating the Google homepage (for practice) and am running into a few problems.
Here is my jsfiddle: http://jsfiddle.net/sdaless/kTn7j/
I am trying to make my text color: white, and text-decoration to none. No matter where I put these two commands, they do not change. I don't know if I am having an inheritance issue or what my problem may be. From my understanding, I thought I could put:
color: white;
text-decoration: none;
in either my #nav-container id or #navlist.
Both removing the underline and making the text color white apply to the anchor tag
ul#navlist li a{
color:#fff;
text-decoration:none;
}
try this
#nav-container ul li a{
color: white;
text-decoration: none;
}
DEMO
When making list-based menus, all styling that is not position-related should go on the A-tag, not the LI and use display:block.
You need to change this selector:
#navlist li
To this (target the a tag)
#navlist li a
The text is present inside the anchor tag, hence the css should be applied for the a tag. Try this css
#nav-container {
background-color:#000;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist li a{
color:#fff;
text-decoration:none;
}
check this fiddle : http://jsfiddle.net/Kritika/KnS8s/
PS:
If you look closely at the bar when your hovering over a link a few pixels at the far right side stay black. Why is that and how do I fix it?
The code for the current Navigation bar is as follows:
HTML:
<body>
<div class="navbar">
-home
about
store
contact
</div>
</body>
CSS:
.navbar{
width: 75%;
background-color: black;
margin-left: auto;
margin-right: auto;
margin-top: 15px;}
.navbar a:link, a:visited{
background-color: black;
color: white;
text-decoration: none;
text-transform: uppercase;
border-right: 2px solid white;
font-weight: bold;
font-family: verdana;
font-size: 37px;
text-align: center;
padding-left: 5px;
padding-right: 5px;}
.navbar a:hover, a:active, a:focus{
background-color: #4A4A4A;
text-decoration: underline;}
#current a:link, a:visited{
background-color: red;}
As you can tell by the code, I'm trying to set the color of the home link to red. But this obviously didn't work. How should I go about it?
current is the id of the link element, so #current {background-color:red;} should do.
Now you're trying to set the color of the link element inside the element with id current.
Change your CSS rule from :
#current a:link, a:visited{
background-color: red;}
to
#current {
background-color: red;}
jsFiddle example
Your rule specifies the element with an ID of #current and then the child links of it when just #current is enough.
You forgot comma after #current in your CSS. You don't need rest of line. Also you can write either #current only or a#current.
Your CSS is incorrect.
#current a:link
this is saying style a link INSIDE an element with an Id #current
however your link IS the element with the id, try this:
a#current { color: red; }
It would better better to use a class though:
a.red { color: red; }
and then:
<a class="red">bla</a>
The main issue, as everyone has indicated is that the element that you are trying to change #current is also the anchor tag, so you have to say a#current:link or #current instead of #current a:link since the anchor tag is not a child of the #current tag.
Here's my jsFiddle, if you're interested.
I have this site, please note that in a:hover put the source as bold.
The problem is that the font size decreases and eventually I read it also decreases.
There are two errors in the HTML you would like your help:
The source should not decrease when ally is in bold.
In the event a:hover can not change the size of the tag li.
The tag li must have fixed size, and not size depending on content. How can I fix the size of the li?
I don't know if I understood your question correctly, but can't you put
ul#menu li
{
width:200px; //change this amount...
}
You can prevent the boxes from jumping by
floating the lis
adding a width to the lis
adding left and right padding to the lis
taking the hover off the a and adding it to the lis
--
ul#menu li {
float:left;
width:120px;
background-color: #676767;
text-align:center;
padding:20px 20px;
margin:0 .25em;
}
ul#menu li a {
color: #FFFFFF;
text-decoration: none;
}
ul#menu li:hover {
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
http://jsfiddle.net/jasongennaro/5jJg3/10/
Important:
the bolder text still jumps, but the boxes do not
you will only be able to click on the text ** however you can make the entire li clickable with js, if you like.
I took the liberty to touch your css code to achieve the desired result. It would be:
ul#menu li
{
background-color: #676767;
display: inline-block;
text-align: center;
}
ul#menu li a
{
letter-spacing: 1px;
color: #FFFFFF;
display: block;
line-height: 45px;
padding: 0;
text-decoration: none;
width: 100px;
}
ul#menu li a:hover
{
letter-spacing: 1px;
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
What I did was:
Remove padding from li and a elements (it should be 0)
Set the a element to display:block with fixed width and height
Set letter-spacing of a and a:hover to 1px so they keep the same space between characters
Keep the text in the center with line-height and text-align:center
The problem was that padding was pushing the box borders when the element changed its size.
Simple question: I have the following markup...
<a href='#'>
<img src='icon.png'> This is the link
</a>
I want to have the text become underlined on mouseover.
What is the CSS selector for selecting only the text in that <a> element and nothing else? I'd rather not wrap it in anything if I don't have to.
a:hover {
text-decoration: none;
}
a:hover <select_text_here> {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a img{
text-decoration: none;
}
should do it. This way all the img tags inside a will be without any underline.
The text would have to be in its own element in order for it to be selectable in CSS. You'd have to use a span or similar:
<img src="" /><span class="link-text">Foo</span>
Obviously you can then just use .link-text to select it.
Since the text doesn't have any separate "handle" that you could select, the best you can do is underline the whole a tag, which includes the image. The image itself will not be underlined technically, so you can't even "un-underline" it.
You'll either have to separate the image from the text, or wrap the text in a span and only highlight that.
I see that Opera/IE doesn't underline the image, but FF does. The easiest way to fix it is to add span element:
<img ... /> <span>...</span>
And then apply text-decoration to span element:
a:hover span {
text-decoration: underline;
}
As far as I know you're not able to select the text only.
Perhaps try this :
a:hover {
text-decoration: underline;
}
a:hover IMG {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover img {
text-decoration: none;
}
another thing you could do is
a{
background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}
or similar, so you don't have to have the image element in the link
a {
color: #000;
}
a:hover {
text-decoration: none;
color: #fff;
}
That is the code I use. But, none of the links I have in my pages listen to this. They abide by this instead:
#menu li, a {
text-align: center;
display: block;
float: left;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size:1.2em;
color: #575757;
text-decoration: none;
list-style: none;
}
Therefore a lot of the links are skewed, as they all float left and things.
The code for the links itself isn't wrapped in any way. At least not in a way that explains my errors.
<div id="footer">
<p><center>Copyright 2008 - G.S.B.V. Pugilice</center></p>
</div>
That bit of code gives me two lines instead of one, the link floats left on the second line.
I think you may be mis-understanding how selectors work.
#menu li, a { ... }
Means apply styles to any li descendant of a element with the id #menu and to any a found any where.
Did you actually intend:-
#menu li, #menu a {...}
?