Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Set each cells colors for the hyper links

Status
Not open for further replies.
help120

help120

Technical User
Joined
Apr 15, 2001
Messages
198
Location
US
Take a visit to I would like to have the hyper links in the navbar white and then have a roll over to orange. Now if I do this through front page its sets all the hyper links to white which in turn makes the hyper links in my news section not viewable. Is their a way to set each cells colors for the hyper links? If not in front page but html thats would work to.
 
Sort by date Sort by votes
Hi there,

you can use style sheets for this effect:

<style TYPE=&quot;text/css&quot;>
A.bar {
color : White;
}

A:HOVER.bar {
color : #FF8C00;
}
</style>

and set your links:
<a href=&quot;link.html class=&quot;bar&quot;>Link</a>

Hope this helps...
 
Upvote 0 Downvote
Nope wont work..got any thing else I can try?
 
Upvote 0 Downvote
Works for me on your page. Try removing the four exta style's that are setting the anchor style. Then copy in Arion123 and set the class in the link.

Tim
 
Upvote 0 Downvote
This is the start of your code...

<html>

<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot;>
<meta name=&quot;GENERATOR&quot; content=&quot;Microsoft FrontPage 4.0&quot;>
<meta name=&quot;ProgId&quot; content=&quot;FrontPage.Editor.Document&quot;>
<title>Final Phase Home</title>
<style fprolloverstyle>A:hover {color: #FFFFFF}
</style>
</head>
<body bgcolor=&quot;#ffffff&quot; leftmargin=&quot;0&quot; marginwidth=&quot;0&quot; topmargin=&quot;0&quot; marginheight=&quot;0&quot; link=&quot;#C0C0C0&quot; vlink=&quot;#C0C0C0&quot; alink=&quot;#FF9A00&quot;>

<div align=&quot;left&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;800&quot;>
<tr>
<td width=&quot;144&quot; height=&quot;144&quot; background=&quot;navebarbackground.jpg&quot; valign=&quot;top&quot; align=&quot;left&quot;><img border=&quot;0&quot;
src=&quot;topleft.jpg&quot; width=&quot;144&quot; height=&quot;144&quot; align=&quot;top&quot;></td>
<td width=&quot;504&quot; height=&quot;144&quot; valign=&quot;top&quot; align=&quot;left&quot; background=&quot;topcenterbackground.jpg&quot;><img
border=&quot;0&quot; src=&quot;topcenter.jpg&quot; width=&quot;504&quot; height=&quot;144&quot;></td>
<td width=&quot;152&quot; height=&quot;144&quot; background=&quot;topcenterbackground.jpg&quot; valign=&quot;top&quot; align=&quot;left&quot;><img
border=&quot;0&quot; src=&quot;topright1.jpg&quot; width=&quot;157&quot; height=&quot;148&quot;></td>
</tr>
<tr>
<td background=&quot;navebarbackground.jpg&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;800&quot; rowspan=&quot;2&quot;>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;right&quot;> </p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot;><img border=&quot;0&quot;
src=&quot;indexnav.jpg&quot; width=&quot;114&quot; height=&quot;22&quot;></p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;><STYLE>
<!--
a:visited { text-decoration: none }
-->
</STYLE>


First of all move the text in red to the same place as the text in green.
Second remove the text in purple, green and orange.

Your hyperlink colors are set in your body tag link=&quot;#C0C0C0&quot; vlink=&quot;#C0C0C0&quot; alink=&quot;#FF9A00&quot; These colours are grey, grey and orange so try this it might work.
Tip:- try exiting frontpage then make these modifications then upload these pages using FTP as FrontPage is notorious at changing your HTML to code that doesn't work as soon as the file opens. Klae

You're only as good as your last answer!
 
Upvote 0 Downvote
So how would I add that css to this code?
<style>
<!--
A:link { text-decoration: none }
A:hover { text-decoration: none }
A:Visited { text-decoration: none }
-->FF9900}
</style>
<style fprolloverstyle>A:hover {color: #FF9A00}
</style>
</head>

<body bgcolor=&quot;#ffffff&quot; leftmargin=&quot;0&quot; marginwidth=&quot;0&quot; topmargin=&quot;0&quot; marginheight=&quot;0&quot; link=&quot;#FFFFFF&quot; vlink=&quot;#FFFFFF&quot; alink=&quot;#FF9A00&quot;>
<div align=&quot;left&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;144&quot;>
<tr>
<td width=&quot;100%&quot; background=&quot;navebarbackground.jpg&quot;>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;>
<a href=&quot;../index1.asp&quot;>
News</a><br>
<a href=&quot; In</a></font></p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;><a href=&quot;../about.asp&quot;>About</a></font></p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;><a href=&quot;../movies.asp&quot;>Movies</a></font></p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;><a href=&quot;../games.asp&quot;>Games</a></font></p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;><a href=&quot;../music.asp&quot;>Music</a><br>
<a href=&quot;../art.asp&quot;>
Art</a></font></p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;><a href=&quot;../clubsdjs.asp&quot;>Clubs/DJs</a><br>
<a href=&quot;../crazycrap.asp&quot;>
Crazy Crap</a></font></p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;><a href=&quot;../merchandise.asp&quot;>Merchandise</a></font></p>
<p style=&quot;margin-top: 0; margin-bottom: 0&quot; align=&quot;left&quot;><font
face=&quot;Arial Narrow&quot; color=&quot;#C0C0C0&quot;>
<a href=&quot;../links.asp&quot;>
Links</a><br>
<a href=&quot;../forums.asp&quot;>
Forums</a><br>
<a href=&quot;../contact.asp&quot;>
Contact</a></font></p>
</td>
</tr>
</table>
</div>
 
Upvote 0 Downvote
change the background color from white (ffffff) to another colour for you can see the links on your page. ;-) I believe page does exactly what you want without any other changes

<body bgcolor=&quot;#ffffff&quot; leftmargin=&quot;0&quot; marginwidth=&quot;0&quot; topmargin=&quot;0&quot; marginheight=&quot;0&quot; link=&quot;#FFFFFF&quot; vlink=&quot;#FFFFFF&quot; alink=&quot;#FF9A00&quot;>

to

<body bgcolor=&quot;#000000&quot; leftmargin=&quot;0&quot; marginwidth=&quot;0&quot; topmargin=&quot;0&quot; marginheight=&quot;0&quot; link=&quot;#FFFFFF&quot; vlink=&quot;#FFFFFF&quot; alink=&quot;#FF9A00&quot;>

and you will actually be able to see the links in white and the roll over in orange
 
Upvote 0 Downvote
Just an addendum to my previous post:

A.bar {
color : White;
}

This style tells that browser that any <a ...> tags given the class bar <a href=&quot;&quot; class=&quot;bar&quot;> should be rendered in white. This will leave all the other links <a href=&quot;&quot;> set to whatever style you've given them.

EG
A.bar { color : White; }
A { color : Blue; }
A:hover.bar { color : Orange; }
A:hover { color : Red; }

will let your normal links be blue, with a hover of red, while all your class=bar links be white, with a hover of orange...

That way you can keep the white background for your general page, and change the background of you navigation bars to whatever colour you want and the links will remain visible.

Changes I'd make to help120s last post on June 3 are as following (in red)

<style>
<!--
A:link { text-decoration: none }
A:hover { text-decoration: none }
A:Visited { text-decoration: none }

A:link.bar { text-decoration: none; color: White; }
A:hover.ba
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question Question
Searching for a string that contains brackets
Replies
0
Views
501
Alt255
Alt255
lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
539
lmcate
lmcate
scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis
Camila James
  • Locked
  • Question Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
416
lucasbrown
lucasbrown

Part and Inventory Search

Sponsor

Back
Top