|
CSS - A:link, A:visted, A:hover & A:active Help Needed
I am trying to create a horizontal navigation bar.
Everything is exactly how I want it except the a:link, a:visted, a:hover, a:active are the standard default colors and not what I specified. Even the background color changes - just not the font color. Here is the css code: Code: /*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFF;
font-size: 14px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
text-decoration: none;
color: #FFFFF;
font-size: 14px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #50949;
font-size: 14px;
font-weight: bold;
}
#topbar ul {
list-style: none;
padding: 0;
padding-top: 2px;
margin: 0;
}
#topbar li {
display: inline;
margin-right: 160px;
}
Here is the html code: Code: <div id="topbar"> <ul class="horiz"> <li><a href="/home.html">Home</a></li> <li><a href="/about_us/about_us.html">About Us</a></li> <li><a href="/other_regions.html">Other Regions</a></li> </ul> </div> or if it helps to see the whole thing click here for test.html click here for the css Thanks! Similar TutorialsThanks for taking the time to read my question. It's been a while since I last tried making a page. I've got some images as href's and want to show a border around them on the hover. It's not working, they're just showing up as purple (default visited). This makes some sense as the links are just bookmarks on the same page. But in my css I have link, visited, and active all the same color. Only hover is different, and none of them are purple. I've read this http://www.w3schools.com/css/css_pseudo_classes.asp and I think I've got it, but it's not working. HTML Code: <a class"NavButtons" href="AssetDataDBHelpFile.htm#AssetForm"><img src="Computer.jpg" width="133" height="84" alt="Asset Management Form"></a> <a class"NavButtons" href="AssetDataDBHelpFile.htm#PeripheralForm"><img src="Peripheralbutton.jpg" width="133" height="84" alt="Peripherals Management Form"></a> <a class"NavButtons" href="AssetDataDBHelpFile.htm#ReportCenter"><img src="Report.jpg" width="133" height="84" alt="Report Center Form"></a> CSS Code: a.NavButtons:link {
border-color: green;
border-width: 2px;
border-style: solid;
} /* unvisited link */
a.NavButtons:visited {
border-color: green;
border-width: 2px;
border-style: solid;
} /* visited link */
a.NavButtons:hover {
border-color: Red;
border-width: 2px;
border-style: solid;
} /* mouse over link */
a.NavButtons:active {
border-color: green;
border-width: 2px;
border-style: solid;
} /* selected link */
This is the new site I'm working on: http://animalemergencybloomington.com/Index2.html Link and Visited Link colors work, but I can't get Active or Hover color to work. (Doesn't work in any of the browsers I've tested it in.) Right now I have this in the <head> css Code: Original - css Code <style type="text/css"> body { color: #000000; font-size: 12pt; font-family: Verdana; margin: 0px 0px; } A:link { text-decoration: none } A:visited { text-decoration: none } </style> <style type="text/css"> and this for the <body>: <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#1E90FF"> adding a:active and a:hover colors to the style gives a "parse error" for those lines when I try to validate and doesn't work anyway as far as getting a color change on hover. I've been trying different combinations in the body and style all afternoon but get error warnings on everything I've tried except the above combo. I'm just trying for links that are never underlined (hate how cluttered that makes things look) but turn red on hoover. Help? Thanks, Ez Hello, I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover). I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS. Angular is ready, now i have to do rounded, which is more hard. I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture. Thank you for your help. This is kind of a continueation of a thread in the JS forum. But I am trying to do a CSS only thing here, so I thought it would be more appropriate here. I have these tabs that change color by altering the background position. Normal is orange, hover is yellow, and active is supposed to go kind of pink. Hover works fine as you see. But active does nothing, both in FF and IE. I gathered up all the style stuff that's relevant and put it all in the one file, tho that's not usually how I code things. But anyway, the code can talke clearer than I can. http://www.colleenweb.com/tests/atest.html Why doesn't active work??? It's late at night so the head isn't 100% but Ive been beating on it a while. Thanks!!! Whats' wrong with this? a:active doesn't seem to work at all: Code: <style type="text/css">
#navcontainer
{
margin: 5px 0 0 5px;
padding: 0;
height: 20px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a
{
background: #000000;
width: 80px;
height: 18px;
border-top: none;
border-left: 1px solid #9B9B9B;
border-bottom: none;
border-right: none;
padding: 0;
margin: 0 0 5px 0;
font-family:Arial, Helvetica, sans-serif;
color: #26DC18;
font-weight:bold;
text-decoration: none;
display: block;
text-align: center;
}
#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}
#navcontainer ul li a:active
{
background: #000000;
color: #fff0000;
}
</style>
HTML [CODE<div id="navcontainer"> <ul id="navlist"> <li><a href="index.php">Home</a></li> <li><a href="inventory.php">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> [/CODE] P.S. I just include this menu in a PHP page. We'll that will work iff you put # on the target page but that must not be. Thanks! is there a method similar to active, so when the user clicks the link it changes style but keeps the style change (after the mouse button is released) until the link is clicked a 2nd time at which point it goes back to its initial state and so on. i hope that makes sense Hi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad. (Ive rewritten the same problem clearly this time hope someone can help me out) My menu image consists of 4 sections and 3 layers which looks like this: img26.imageshack.us/img26/1268/menux.gif 1.home 2.archives 3.news 4.about - (layer 1 unvistided link) 1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over) 1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer. I created the pages via admin panel of wordpress but give the links in the header.php manually myself without using codes. so the links of each section are like this home=http://localhost/wordpress/ archives=http://localhost/wordpress/?page_id=2 news=http://localhost/wordpress/?page_id=35 about=http://localhost/wordpress/?page_id=31 You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to get it worked so please please change my wrong codes. PHP code: Code: <ul id="nav"> <li id="home"><a href="http://localhost/wordpress/">home</a></li> <li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li> <li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li> <li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li> </ul> CSS Code: Code: #nav {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#nav li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#nav li.last { padding: 0; }
ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }
ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }
ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }
ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }
ul#nav li#home a:hover { background-position: 0 -30px; }
ul#nav li#archives a:hover { background-position: -84px -30px; }
ul#nav li#news a:hover { background-position: -168px -30px; }
ul#nav li#about a:hover { background-position: -252px -30px; }
.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }
.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }
The main problem i can understand from the earlier discussion is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code according to the codes i wrote in php file. Can someone please help? Can someone please add or rewrite the active bit (in css codes - last 4 lines from the bottom) and in php file. please. Hi, I have this in the html and so on for each page <div id="nav"> <ul> <li class="current"><a href="one.htm">one</a></li> <li><a href="two.htm">two</a></li> <li><a href="three.htm">three</a></li> </ul> </div> Then css: #nav ul li.current a{ background:#CCCCCC; color:#000000; } But I don't want the first page's link to change colour until it is clicked. Otherwise the menu comes up with first link always active before anything has been selected. It looks wrong. Is there anyway around this in css? Thanks, jdl Hi everyone, I have a menu whereby when it's active it is highlighted by two combining images. Whenever the active link is hovered over the image disappears. I'd like for the image(s) to stay put when it's active and the cursor hovers over it. This particular .css file is above my pay grade and I'm not confident I can do this and have it look good across all browsers. Just click on the header links and hover over it to see what I'm talking about. Thanks for any input, here's the site... spotabusiness dot com/new_spota1 (I apparently can't add URLs yet) Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css. I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link. but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions. PHP code: Code: <?php
$block = ( is_front_page() ? 'h1' : 'div' );
// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable
?>
<?php echo "<$block class='blog-title'>"; ?>
<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>
<p class="description"><?php bloginfo('description'); ?>
<ul id="menu">
<li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
<li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
<li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
<li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>
CSS code: Code: #menu {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#menu li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#menu li.last { padding: 0; }
ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }
ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }
ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }
ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }
ul#menu li#home a:hover { background-position: 0 -30px; }
ul#menu li#archives a:hover { background-position: -84px -30px; }
ul#menu li#news a:hover { background-position: -168px -30px; }
ul#menu li#contact a:hover { background-position: -252px -30px; }
.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }
.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }
i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem. thank you for any single suggestions and comments. Hi there, I have an image rollover css script, but it will not understand a:active so is there a way I can use an inline a:active attribute? Many thanks! i know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button Hello, The hover link looks good on IE7 and FF but not on IE6 Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header_navigation {
background-color:#0000FF;
position:absolute;
float:left;
font-size:11px;
color:#FFFFFF;
font-weight:bold;
left:190px;
top:130px;
width:145px
}
#header_navigation ul {
border:1px solid #FF0000;
float:left;
list-style-type:none;
margin:0 30px 0 0;
}
#header_navigation li {
width:145px
}
#header_navigation li:hover {
background-color:#FFFFFF;
}
#header_navigation a {
text-decoration:none;
color:#ffffff;
background-color:none;
}
#header_navigation a:hover {
color:#000000;
background-color:#FFFFFF;
width:145px
}
</style>
</head>
<body>
<div id="header_navigation"><!--begin of header_navigation-->
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="blog.asp">Blogs</a></li>
<li><a href="shoutbox.asp">Shoutbox</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code: Code: #print_category {
position: absolute;
left: 35%;
top: 30%;
font-size: 13px;
text-align: left;
line-height: 2 ;
margin-right: 5em;
}
Properties I want to apply: A:link {color: #000099; text-decoration: underline; } A:visited {color: #000099; text-decoration: none; } A:hover {color: #000099; text-decoration: none; } A:active {color: #000099; text-decoration: none; } How can this be done, Ive tried but to no avail: - A#print_category:active {color: #000099; text-decoration: none; } Thanks! My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background. Heres the CSS: Code:
.link_hover1{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:visited{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:hover{
background-image: url("images/link_img_01b.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:active{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem. I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail: Code: div.headleft {
text-align: right;
width: 100%;
}
div.headleft a:link {
display: none;
}
div.headleft a:visited {
display: none;
}
div.headleft a:hover {
display: block;
background: inherit;
color: #ff0000;
}
div.headleft a:active {
display: none;
}
I have tried a few variations to the above snippet of code and am at my wits end... My gratitude ahead of time... I have the following code, but the CSS file that I have already defines link and hover to be something else Is there a way I can edit the div#hdr_cnt to have it's own definition of the hover and link? Thanks for the help Code: div#hdr_ctr { width:100%; min-width:670px; background-color:#FFF; overflow:hidden; margin:0; padding:0; text-align:center; color:#000000}
div#hdr_cnt { background: url('http://www.hobbyspeed.com/header/hobbyspeed.jpg') no-repeat center; width:670px; height:73px; margin:0 auto; padding:0;}
div#hdr_cnt ul.l { float:left; margin:15px 0 0 18px; padding:0; list-style-type:none; direction:rtl; text-align:right; color:#000000}
* html div#hdr_cnt ul.l { margin-left: 9px; color:#000000 }
div#hdr_cnt ul.r { float:right; margin:15px 0 0 20px; padding:0; list-style-type:none; direction:ltr; text-align:left;}
Hello I would like to make a hover effect when my mouse is over a link, as shown in my attachment. What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed). Anyone can help me with this? Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries. I'm trying to have a hover effect on a link within a <td> tag. In firefox it works fine, but in IE it's not working. I wasn't sure if there's a special property in CSS to get it working. My CSS code is: Quote: .leftblock a{display: block; border-top: 1px solid #ffffff; font-weight: bold; color: #21536A; text-decoration:none; background-color:#CCCCFF; } Quote: .leftblock a:hover{border-top: 1px solid #cccccc; background-color: #DDEEFF; font-weight: bold; text-decoration: none; } I added display:block to the a:hover class as well to try that to no avail. http://www.sassyproducts.com/hover.php is where you can see what I'm working on. If you hover over anywhere on the first link, Fundraising, it adds the hover effect, but the other ones will only show the hover effect if you hover over the text. This is in IE. In FF, it works properly. Any ideas what I may need to add or change?... Thanks. Thanks for taking the time to read my question. I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why? Here is my css. @charset "iso-8859-1"; .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff } .textCopy { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; hover: #ffffff } .textbigger { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; hover: #ffffff } a:hover { color: #ffffff; } a:link { color: #999999; } a:visited { color: #747474; } a:active { color: #CCCCCC; } body { margin-top: 0; background-color: #000000; } You can see this at work at www.pierced.ca Brad |
|||||||