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;
}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;
}
HavikAre 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*/
}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.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...
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 .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.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">
HavikNo need to use a class, the id will work fine:
<a href "yourpage.htm" id="nav">nav link</a>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...
<!-- m --><a class="postlink" href="http://home.bendcable.com/theallensplace">http://home.bendcable.com/theallensplace</a><!-- m -->
Thanx.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
HavikYou 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
}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!!!
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...)
<!-- m --><a class="postlink" href="http://www.infinitypages.com/research/divinclude.php">http://www.infinitypages.com/research/divinclude.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.infinitypages.com/research/clientsidedivinclude.htmYou">http://www.infinitypages.com/research/c ... ude.htmYou</a><!-- m --> guyz are brainiacs.
I look at both those links and one word comes to mind...
Huh?
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?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...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...Thanx.
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;
}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;
}
HavikAre 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*/
}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.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...
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 .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.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">
HavikNo need to use a class, the id will work fine:
<a href "yourpage.htm" id="nav">nav link</a>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...
<!-- m --><a class="postlink" href="http://home.bendcable.com/theallensplace">http://home.bendcable.com/theallensplace</a><!-- m -->
Thanx.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
HavikYou 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
}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!!!
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...)
<!-- m --><a class="postlink" href="http://www.infinitypages.com/research/divinclude.php">http://www.infinitypages.com/research/divinclude.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.infinitypages.com/research/clientsidedivinclude.htmYou">http://www.infinitypages.com/research/c ... ude.htmYou</a><!-- m --> guyz are brainiacs.
I look at both those links and one word comes to mind...
Huh?
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?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...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...Thanx.