Jump to content



Sign up for a free account to remove the pop-up ads

Signing up for an account is fast and free. As a member you can join in the conversation, enter contests and remove the pop-up ads that guests get. Click here to create your free account.

Photo
- - - - -

Calling all HTML coding masters - Link colors help


This topic has been archived. This means that you cannot reply to this topic.
9 replies to this topic

#1 of 10 OFFLINE   MarkHastings

MarkHastings

    Executive Producer



  • 12,013 posts
  • Join Date: Jan 27 2003

Posted October 11 2006 - 03:56 AM

I have a problem that may require javascripting or some kind of CSS (or whatever)...I was wondering if anyone knows how to do this:

I have a web page where there are links on a white background and a colored background. Here's an example. I actually made the link color a little lighter so you can see it on the dark background, but on the real site my text links are the exact same color as the dark background. So that's where my problem lies.

I've done the "trick" where I created a transparent GIF to resemble white text, but I would really prefer to have it all as editable text since I will be constantly changing links, adding link, etc. in that space.

Does anyone know of a way to have more than one hyperlink color on a page? I should also add that I don't want to do it as frames.

#2 of 10 OFFLINE   NickSo

NickSo

    Producer



  • 4,274 posts
  • Join Date: Jul 02 2000

Posted October 11 2006 - 04:39 AM

Assign a class to one (or both if you wish) of the types of text.

In the HTML you'll use or
to wrap around the link.

In the CSS, you do:

.classname a {
color: #xxxxxx;
}

use a:hover to change the hover color, a:visited to change the color when the site has been visited.

#3 of 10 OFFLINE   ChristopherDAC

ChristopherDAC

    Producer



  • 3,729 posts
  • Join Date: Feb 18 2004

Posted October 11 2006 - 05:42 AM

I think I'd handle the syntax a little differently, but that's exactly what I would do. It does require putting <a class="name" href="target"> instead of just <a href="target">, but that shouldn't be too big an issue. Then in the CSS you can put a.name and the style.

For an alternative way of doing things, you could made a special generic dummy container such as <div class="dark"> </div> to inclose the areas where the background is to be dark. Then you use CSS to set the colour of "div.dark" to what you want, and then the colour of "div.dark a" to your preferred link colour. In this way, you don't need to put a class on the links.

If you have a DOCTYPE declaration of HTML 4, at least (most browsers will try to do it even without one), you can put the CSS right into the Web page. If you're doing more than one page, though, it's quicker to have just the one sheet.

#4 of 10 OFFLINE   MarkHastings

MarkHastings

    Executive Producer



  • 12,013 posts
  • Join Date: Jan 27 2003

Posted October 11 2006 - 06:24 AM

I never really got into CSS, so I may need to play with it a little...

I actaully do use CSS in a library item that I use as navigation (on the right hand side) for a lot of pages, but I only use font and size in the CSS...

All of the other text on the page is just straight HTML styled text. I would like to use the CSS for the links, so I assume I can just add the CSS to the link I need to be white and not have to create the entire page as CSS text?
Quote:
Originally Posted by ChristopherDAC
I think I'd handle the syntax a little differently, but that's exactly what I would do - a class="name" href="target"
LOL - I couldn't quote your post without having it parse the HTML so I edited out the <>

So, I would create the style (making the hyperlinks white) and then anyplace I want white links, I add the class name to the HREF? I'll have to try that out...

#5 of 10 OFFLINE   MarkHastings

MarkHastings

    Executive Producer



  • 12,013 posts
  • Join Date: Jan 27 2003

Posted October 11 2006 - 06:37 AM

OK, so I created a CSS file and just used the color white...When I added it to the link, it worked - Click Here

Of course it created the CSS file which I saved. So what do I do now that I want it on several pages? I am using Dreamweaver and I notice that it only appears in the CSS panel when I open the page that uses it. Do I have to import that file into every page I want the CSS used?

I assume I should create a CSS folder in the site to house the CSS fille and have every page refer to the one file. Is that the best way? I assume that way I can just change the one file and every page gets updated to the new CSS??

Or wait, since this link is going to be the same on every page, I should probably just make a library item of the link (with the CSS style) and then add the library item to every page. That's probably the best way to do it, right? That way I just have to update the library item (or CSS file) and every page gets updated accordingly...

#6 of 10 OFFLINE   ChristopherDAC

ChristopherDAC

    Producer



  • 3,729 posts
  • Join Date: Feb 18 2004

Posted October 11 2006 - 12:57 PM

God, I don't know what Dreamweaver does. I write all my stuff by hand. The important thing is that you can use CSS in a document in two ways (well, more, but the others aren't important). The first is to use the STYLE element in the header to hide CSS a the top of the HTML document. The second is to use the LINK element, again in the header, to reference an external style sheet, a text file with extension ".CSS".

For example, if you open up my homepage, the headers look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<link href="caldc.css" rel="stylesheet" type="text/css">

<title>
Anime LaserDisc Census
</title>
</head>

[FYI, I am using the HTML escape sequences "&gt;" and "&lt;" here. Escape sequences are your friend : you can use anything in the Unicode character set, which can be a lot of fun.]
As you can see, there is a .CSS file in the home directory, and all my HTML files have this link to it (with "../" as many times as needed to get into the home directory). In this way, they all reference the one style sheet.

One thing I would recommend is to open your HTML files manually and look at them, even if you create them all with a WYSIWYG editor. When you see what you are doing at the low-level, you can get better results (and you can often tidy things up, too). Personally, I use EDXOR for a text editor because of its useful functions, and OPERA for a browser because it's highly standard-compliant, and because it has a shortcut to feed the present page to the W3C HTML Validator utility.

Also, I recommend downloading the HTML specification and CSS specification. They're very technical, but you can use them to look things up when you have a problem.

#7 of 10 OFFLINE   MarkHastings

MarkHastings

    Executive Producer



  • 12,013 posts
  • Join Date: Jan 27 2003

Posted October 11 2006 - 01:19 PM

Quote:
One thing I would recommend is to open your HTML files manually and look at them
Yeah, I do that all the time. I used to write HTML by hand as well, but now I use the WSIWYG app, then go through the code and clean it up by hand.

I guess I'll put my CSS in the root directory and link to it from every page. Like I said, I'll probably use the library item to do it.
Quote:
God, I don't know what Dreamweaver does
Dreamweaver is great with library items. If every page has the same link on it, I make it into a library item. That way, if I need to change something, I just change the library item and Dreamweaver goes through every page (that uses it) and updates it.

and it's better than copy and pasting because copy'ing and pasting doesn't allow for adding the slashes and "../" in the links (as necessary). Dreamweaver knows where the link goes and adjusts each page accordingly.

#8 of 10 OFFLINE   ChristopherDAC

ChristopherDAC

    Producer



  • 3,729 posts
  • Join Date: Feb 18 2004

Posted October 11 2006 - 03:01 PM

Then you know what I mean. I wasn't sure how far you'd understand ; a lot of times people seem to have learned to use Dreamweaver, or Frontpage, or something, but don't know anything about HTML, so it's hard to tell them what to do if you don't know their specific development environment. I have to say, I've found the specifications very useful, and "authoring tools" often have quirks and don't support them properly (MS Word is an abomination in this regard).

#9 of 10 OFFLINE   MarkHastings

MarkHastings

    Executive Producer



  • 12,013 posts
  • Join Date: Jan 27 2003

Posted October 11 2006 - 03:52 PM

Quote:
(MS Word is an abomination in this regard).
LMAO! Then you'll REALLY appreciate this tid bit...

In Dreamweaver, there's actually a menu item that says "Clean up Word HTML..." which goes through and strips out all of the 'crap' that Word puts into the HTML page. Posted Image

#10 of 10 OFFLINE   nolesrule

nolesrule

    Producer



  • 3,084 posts
  • Join Date: Aug 06 2001
  • Real Name:Joe Kauffman
  • LocationClearwater, FL

Posted October 11 2006 - 04:11 PM

That's just too funny. I've had to clean up Word HTML too many times to count.

But I'm one of those people that hand-codes everything too, and I don't think I ever used Dreamweaver for more than 30 minutes.





Forum Nav Content I Follow