homepage Welcome to WebmasterWorld Guest from 54.242.241.20
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
how do you change link style in one page
<a href
soulphoto

10+ Year Member



 
Msg#: 735 posted 8:09 am on Aug 7, 2003 (gmt 0)
Dear experienced people,

I consider myself a newbie, as I mostly handcode simple HTML, tables and frames, and make use of Frontpage, and Dreamweaver to get more of a sense of how things work.

I have/am busy creating a site, in which I want to use links with different styles on one page, I want to use a left nav menu with different color to my text. I know how to use this basic link stuff

<style type="text/css">
<!--A:link, a:visited, a:active {text-decoration: none;}-->
</style>
<style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
</style>
</head>

<body LINK="#FFFFFF" VLINK="#663399" ALINK="#FF0000" bgcolor="#006666">

...to change the properties of all links on a page, but ... I want to change the properties in different tables on one page.

If I use tables, (nice for the fluidity so no big issues with people using either 800x600 or 1024x768) trying to change style just knocks my table in two

I know for instance the the Denda sw Web Pro Extended can do this (every link can have a different look,color, etc,) but as far as I know, this is fixed res size sw.

Much looking forward to hints/ solutions if they do exist without completely going off into heavy coding.....

thanks,

soulphoto

 

legster

10+ Year Member



 
Msg#: 735 posted 12:43 pm on Aug 7, 2003 (gmt 0)

Setup classes like this:

Put this in your style tag.
.table1 { font-size:10px;font-color:#000000;font-weight:bold; }
.table2 { define the look here }
.table3 { define the look here }

Then in your code just put this around the text you want to define:
<div class="table1">text here</div>
or
<div class="table2">text here</div>
etc...

soulphoto

10+ Year Member



 
Msg#: 735 posted 3:18 pm on Aug 7, 2003 (gmt 0)

Dear Legster,

You have got me experimenting and working this, Thanks for the tips/advice.

But, me being pretty new to the intricacies of coding styles, I got me some questions.

First of all the div stuff is great, however does it matter where you place the tags? do the tags need to be around perfect sets of table tags? or could I create a div around or across two tables or a table and a row of another table?

second,I'm not to familiar with coding styles, where do I find a good source to see how to code /work with these css and other(?) styles?

In the examples above

<style type="text/css">
<!--A:link, a:visited, a:active {text-decoration: none;}-->
</style>
<style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
</style>
</head>

<body LINK="#FFFFFF" VLINK="#663399" ALINK="#FF0000" bgcolor="#006666">


I used a hodgepodge of thinds I know.

Is this <style type="text/css">
<!--A:link, a:visited, a:active {text-decoration: none;}-->
</style>

the correct way to do this?

should <body LINK="#FFFFFF" VLINK="#663399" ALINK="#FF0000" bgcolor="#006666">
be inside the <style> and </style> tags?

or is it HTML? I would immagine this could be done with styles instead and div as requested?

So how do I figure out how to code the link color with styles? Is there a good manual somewhere you can advise?

Thanks & regards,

Soulphoto

legster

10+ Year Member



 
Msg#: 735 posted 4:09 pm on Aug 7, 2003 (gmt 0)

It does matter where you define it. If you define text within a div, then put it around a table it won't work. So it has to be right around the text.

Example:
<table>
<tr>
<td><div class="whateverYouDefine">text here</div></td>
</tr>
</table>

You can assign the class to the TD, but that doesn't work so well for all browsers.

The best source I can recommend is:
w3schools.com

They have great basic to intermediate tutorials to get you started, and quizzes to let you know where you stand.

As far as the rest of your questions. Spend a few hours going through the tutorials on W3schools, and you will be able to answer those yourself. :)

Good luck!

soulphoto

10+ Year Member



 
Msg#: 735 posted 5:38 pm on Aug 7, 2003 (gmt 0)

Hi guys,

Sorry to nag,

but how do you mix this knowledge with the div stuff?

<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

The div around the text inside the links is still seen as a link, so no go?

legster

10+ Year Member



 
Msg#: 735 posted 8:59 pm on Aug 7, 2003 (gmt 0)

Generally you define a link differently. So keep different classes for your links and text.

<style type="text/css">
.specialLink { color:pink; }
a.specialLink:link {color: #FF0000}
a.specialLink:visited {color: #00FF00}
a.specialLink:hover {color: #FF00FF}
a.specialLink:active {color: #0000FF}
</style>

Then in your code call it like this:
<a class="specialLink" href="page.html">link</a>

Hope that helps. :)

soulphoto

10+ Year Member



 
Msg#: 735 posted 10:21 pm on Aug 7, 2003 (gmt 0)

Thanks Legster,

Works like a charm!

spot on!

Thanks

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved