Click to See Complete Forum and Search --> : Controlling link, visit, active, hover elements...
stmasi
06-02-2003, 11:26 AM
Take a look at the following and let me know if there's a way I can have different link, vlink, alink, hlink values for each element listed: (Thanx.) 8^)>
body {
background-color: #fafafa;
background-image: url(images/stucco.jpg);
border-style: none;
color: #000000;
font-family: arial, helvetica, sans-serif, verdana;
font-size: 10px;
font-style: normal;
margin: 5px;
text-align: center;
}
#nav {
background-color: #4a9eb5;
border-color: #000000;
border-style: solid;
border-width: 1px;
color: #ffffff;
font-family: arial, helvetica, sans-serif, verdana;
font-size: 10px;
font-style: normal;
height: 19px;
text-align: center;
width: 600px;
}
havik
06-02-2003, 11:49 AM
How about defining the styles for the link tag by using css instead?
Something like this will work, just edit it to meet your needs
a {
text-decoration: none;
font-family:arial;
font-size:12px;
color: #000000;
BORDER: none;
border: solid 1px #FFFFFF;
}
a:hover {
border: solid 1px #6100C1;
background-color:#F0E1FF;
}
a:visit {
color: #F0F0F0;
}
Havik
Are you talking about having a differnt css for the links in body and nav? If so, try this:
<style type="text/css">
a {
/*your style declarations here*/
}
a#nav {
/*your style declarations here*/
}
stmasi
06-02-2003, 11:59 AM
Okay...
But how would I be able to define different link statuses for different tags? Like a different link setup for the BODY section and a different link setup for the NAV section, etc.
Thanx again.
stmasi
06-02-2003, 12:02 PM
So, would it be...
a#nav.link...
a#nav.visited...
a#nav.active...
a#nav.hover...
or...
a.link#nav...
a.visited#nav...
a.active#nav...
a.hover#nav...
or...
:D
Thanx.
Actually it would be:
a#nav:link { /*your style declarations here*/ }
a#nav:visited { /*your style declarations here*/ }
a#nav:hover { /*your style declarations here*/ }
a#nav:active { /*your style declarations here*/ }
Two things to note: the order they are in (hover before active), and the : rather than the .
stmasi
06-02-2003, 12:19 PM
Nope.
Set `em up like the following, but still doesn't work...just uses the default browser link setup:
a#nav:link {
background-color: #4a9eb5;
color: #ffffff;
text-decoration: none;
}
a#nav:visited {
background-color: #4a9eb5;
color: #ffffff;
text-decoration: none;
}
a#nav:hover {
background-color: #4a9eb5;
color: #ffffff;
text-decoration: none;
}
a#nav:active {
background-color: #4a9eb5;
color: #ffffff;
text-decoration: none;
}
Any other ideas?
Thanx again.
havik
06-02-2003, 12:25 PM
Try this:
a.nav:link {
background-color: #4a9eb5;
color: #ffffff;
text-decoration: none;
}
a.nav:visited {
background-color: #4a9eb5;
color: #ffffff;
text-decoration: none;
}
a.nav:hover {
background-color: #4a9eb5;
color: #ffffff;
text-decoration: none;
}
a.nav:active {
background-color: #4a9eb5;
color: #ffffff;
text-decoration: none;
}
Where the link within the nav section will have "nav" as a class
ie. <a href ... class="nav">
Havik
No need to use a class, the id will work fine:
<a href "yourpage.htm" id="nav">nav link</a>
stmasi
06-02-2003, 12:43 PM
Well, I tried all your suggestions and actually got some pretty interesting results, but none of them worked.
Perhaps you could take a look at it and let me know what you think...
http://home.bendcable.com/theallensplace
Thanx.
havik
06-02-2003, 12:53 PM
We're altering the links here, not any other elements, so remove this code from the page
<td id="nav">
to just <tr>
or to <td style="background-color: #4a9eb5; border: 1px solid; border-color: black;">
if you want the background to have the same color as the links.
I changed the id="nav" to class="nav" for each link
Then, in your .css file, I put "a." in front of the nav sections
ie: a.nav:link, a.nav:visited, a.nav:hover, a.nav:active
Havik
You forgot the a# before your declarations. Try this:
a#nav:link {
COLOR: #ffffff; BACKGROUND-COLOR: #4a9eb5; TEXT-DECORATION: none
}
a#nav:visited {
COLOR: #ffffff; BACKGROUND-COLOR: #4a9eb5; TEXT-DECORATION: none
}
a#nav:hover {
COLOR: #ffffff; BACKGROUND-COLOR: #4a9eb5; TEXT-DECORATION: none
}
a#nav:active {
COLOR: #ffffff; BACKGROUND-COLOR: #4a9eb5; TEXT-DECORATION: none
}
stmasi
06-02-2003, 01:01 PM
Alright!
Got it working with havik's suggestion of the a. in the css and changing the id to class in the html.
Now, I need to be able to make the links open the new page in the "BDY" reference.
Can ya figure that out without having to resort to frames or iframes?
Thanx.
P.S. You guyz are like all brains or something!!!
:D
It would have worked fine with the id, but whatever...
Anyway, here are two links that might interest you, if you do not want to use an iframe (that is what it is for, but...)
http://www.infinitypages.com/research/divinclude.php
http://www.infinitypages.com/research/clientsidedivinclude.htm
stmasi
06-02-2003, 01:24 PM
You guyz are brainiacs.
I look at both those links and one word comes to mind...
Huh?
:D
Could you explain further.
Thanx.
Sure, but first, which one were you thinking of using? I would highly recommend the first one (PHP) as it won't fail for the 13% of users with javascript disabled. Does your server support PHP?
stmasi
06-02-2003, 01:37 PM
How can I tell?
Upload a page named test.php to your server with this in it:
<?PHP
echo "I have PHP!";
?>
and see what you get...
stmasi
06-02-2003, 01:51 PM
HAHAHA!
It's actually just showing me the contents of the file.
I type the url with the "/" and "test.php" at the end and I get this:
<?PHP
echo "I have PHP!";
?>
Guess my server doesn't do php, eh?
Nope, in which case, I would go with an iframe over the javascript method...
stmasi
06-02-2003, 02:10 PM
Thanx.