What would be the best way to add an active class on this css for my menu?
.vertical-nav{
width:200px;
height:auto;
list-style:none;
float:left;
margin-right:40px;
}
.vertical-nav li{
width:200px;
height:25px;
margin:5px;
padding:5px;
background-color:#666666;
border:none;
text-align:center;
float:left;
}
.vertical-nav li:hover{
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a{
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
I would add it on .vertical-nav li:active { }
this way you can modify both the <li> and the <a> properties
It depends on how you want the 'current' list item to display,
Personally I would always apply to the class to the li, and so it would give you something like:
.vertical-nav li.active {
background-color:#D9A300;
}
and to style the link inside that you would
.vertical-nav li.active a {
color:#000000;
}
I would actually suggest using the term 'current' rather than 'active' as it is easy to misunderstand.
I may of misunderstood what you're requesting.. if i have, let me know and i will amend my answer accordingly.
Related
I have this CSS :
<style>
#web_pagination_number {
float:left;
position:relative;
width:35px;
height:35px;
line-height:35px;
background-color:#111111;
font-family:Arial;
font-size:14px;
color:#ffffff;
text-align:center;
}
#web_pagination_number:hover {
color:#111111;
background-color:#93CF25;
}
#web_pagination_number a {
text-decoration:none;
color:#ffffff;
}
#web_pagination_number a:hover {
text-decoration:none;
color:#111111;
}
</style>
The problem i have it´s when i go over web_pagination_number , change the color of background of this div but no the color of the link , the link color only change when i go over the link
I don´t know how i can fix this
Thank´s , Regards
You need to add :hover to your web_pagination_number id, like this:
#web_pagination_number:hover a {
color: #333;
}
Just add a property display: block on a
Demo
I am looking for a way to highlight the chosen page number in pagination using css,
or to make the chosen page number bold.
the pagination php code works fine so I think I should modify the css page.
what should I add here:
body
{
padding:50px;
font-size:0.85em;
font-family:arial;
}
a
{
text-decoration:none;
color:#0080ff;
}
a:hover
{
text-decoration:underline;
}
.info
{
line-height:150%;
width:650px;
overflow:auto;
margin-top:30px;
color:#555555;
}
.msg
{
padding:10px;
border-bottom:dashed 1px #5d478b;
width:450px;
margin-bottom:15px;
}
#pages
{
clear:both;
list-style-type:none;
overflow:hidden;
margin:0;
padding:0;
}
#pages li
{
float:left;
}
#pages li a
{
font-weight:bold;
margin:0 4px;
padding:5px 10px;
border:1px solid #bbb;
display:inline-block;
border-radius:5px;
}
#pages li a:hover
{
text-decoration:none;
color:#ff0080;
}
You are missing information in your post about the html produced for the pagination.
I presume from your CSS that each page link is an anchor within a list item within an element with the id pages. I'm going to assume that the selected anchor has some sort of class on it, let's say "selected". Add something like this to your css:
#pages li a.selected
{
font-weight: bold;
background-color: yellow;
}
i'm really new to html and css, and i thought having a project while working through tutorials would help me stay motivated while learning a lot.
i've been playing around with this menu, and it's almost there - but now there seems to be this wall and i just don't get how to get over it! i have searched for hours on several sites and am now ready to throw this thing outta the window...
here's a jsfiddle: http://jsfiddle.net/64Grv/
so what i wanted to achieve is that on hover of one submenu the whole menu changes color (instead of the hovered link now). if i hover on "more stuff" for example, all of "menupoint2, stuff, more stuff, even more stuff...." should change color.
how should i go with that? i've tried putting different classes, to no avail - i guess i put them at the wrong place. or is this possible with some kind of box?
i apologize for the messiness of my css (just a beginner messing around..), and i'd really appreciate it if somebody had concrete tips on how to do this :)
thank you very much!
CSS:
#navigation ul
{
margin:0px;
padding:0px;
position:relative;
text-align:center;
}
#navigation ul li
{
display:inline;
float:right;
line-height:20px;
list-style:none;
margin-right:3%;
margin-top:5%;
position:relative;
}
#navigation li a
{
display:block;
font-family: "Helvetica", "Arial", sans-serif;
font-size:1em;
color:#04B4AE;
text-decoration:none;
}
#navigation li a:hover
{
color:#08298A;
text-decoration:none;
}
#navigation li ul
{
font-size:0.8em;
background-color:transparent;
display:block;
margin:0px;
padding:0px;
top:0.5em;
}
#navigation li:hover ul
{
color:#04B4AE;
}
#navigation li li
{
vertical-align:middle;
list-style:none;
display:list-item;
margin:auto;
float:none;
}
#navigation li li a
{
color:#04B4AE;
text-decoration:none;
}
#navigation li li a:hover
{
color:#08298A;
text-decoration:none;
}
you need to set :hover on li :
http://jsfiddle.net/64Grv/1/
li:hover a {color:red}
Try
li:hover a
{
color:yellow;
}
Updated fiddle link is here just changed below
Replace below code
#navigation li a:hover
color:#08298A;
text-decoration:none;
}
with
#navigation li:hover a {
color:#08298A;
text-decoration:none;
}
I want to make simple list but have some problem. When i put some tekst in li element i want to set li width same like li text is..
And also I want when I hover over the li link, to change full li element background color,not just of A element..
This is my code..
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
#mid_left li {
width:auto;
background-color:red;
margin:10px 0;
padding:5px;
}
#mid_left li a:hover{
background-color:blue;
}
Example what i try to do is on page..(see footer)
http://buildinternet.com/2010/07/when-to-use-_session-vs-_cookie/
Why don't you just use Firebug to read their CSS?
#mid_left li:hover{
background-color:blue;
}
should take care of your question.
Applies to the a element when you hover over the li.
#mid_left li:hover a{
background-color:blue;
}
Applies to the li element when you hover over it.
#mid_left li:hover{
background-color:blue;
width:200px;
}
Here is a working jsfiddle which (I believe) fits with what you're trying to do. Don't mind the colors, they're for illustration only.
http://jsfiddle.net/qwdd8/1/
edit: updated to remove inline-block, setting width:auto. I forced a height to the LI, but there may be better ways for keeping them from overlapping.
For the width-problem, don't set a width to the ul-element, so change:
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
to
#mid_left ul{
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
How do create a styleClass for the following CSS? I want it only to be used in one particular section of the form - the tabbed menu - and not affect anything else. If I leave it as is, everything on the form is affected by it.
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ff9c2a;
}
You need to add a class to your link, and reference that in your CSS.
With the markup:
My Link
And with the CSS:
a.myClass:link,a.myClass:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a.myClass:hover,a.myClass:active
{
background-color:#ff9c2a;
}
You can set a class in html like this:
hello world
And then you can limit the styles to this class in css like this:
a.someclass:link, a.someclass:visited {
...
}
a.someclass:hover, a.someclass:active {
...
}
You'll need to add a class or ID to do so.
For you tab you can use an ID like this:
<div id="specialTab">
Lorem Ipsum
</div>
and change your CSS like this:
#specialTab a:link, #specialTab a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#specialTab a:hover, #specialTab a:active
{
background-color:#ff9c2a;
}
There are two ways.
1) Give each element a class ("tab" in this case):
a.tab:link, a.tab:visited { ... }
2) Use a container group. Say your tab menu has id "tabMenu":
#tabMenu a:link, #tabMenu a:visited { ... }
I would put the menu in a div with the id 'menu'
Then just
#menu a:link, #menu a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover,#menu a:active
{
background-color:#ff9c2a;
}
If you like to style just a section in a form part you can give this section an Id like here:
<form>
<fieldset>
<ul>
<li id="style-me"> </li>
<li> </li>
</ul>
<fieldset>
</form>
#style-me a:link, #style-me a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ff9c2a;
}
To apply styles on specific parts of your html you must use selectors:
First add div or other tag with unique id set around elements you need to change.
<div id="zone_name">
link
<span>text</span>
</div>
In style add id selector and tag name
#zone_name a {
/*style attributes for a tag in zone_name*/
}
#zone_name span {
/*style attributes for span tag in zone_name*/
}
With specificity, either assign a class or use the class of closest parent to style your <a> tags. e.g.
.tabbed-menu a:link, .tabbed-menu a:visited {
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.tabbed-menu a:hover, .tabbed-menu a:active {
background-color:#ff9c2a;
}
Where .tabbed-menu would be the class used by your menu.