Calling all HTML coding masters - Link colors help

Discussion in 'Computers' started by MarkHastings, Oct 11, 2006.

  1. MarkHastings

    MarkHastings Executive Producer

    Joined:
    Jan 27, 2003
    Messages:
    12,013
    Likes Received:
    1
    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. NickSo

    NickSo Producer

    Joined:
    Jul 2, 2000
    Messages:
    4,260
    Likes Received:
    0
    Real Name:
    Nick So
    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. ChristopherDAC

    ChristopherDAC Producer

    Joined:
    Feb 18, 2004
    Messages:
    3,729
    Likes Received:
    0
    I think I'd handle the syntax a little differently, but that's exactly what I would do. It does require putting instead of just , 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
    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. MarkHastings

    MarkHastings Executive Producer

    Joined:
    Jan 27, 2003
    Messages:
    12,013
    Likes Received:
    1
    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?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. MarkHastings

    MarkHastings Executive Producer

    Joined:
    Jan 27, 2003
    Messages:
    12,013
    Likes Received:
    1
    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. ChristopherDAC

    ChristopherDAC Producer

    Joined:
    Feb 18, 2004
    Messages:
    3,729
    Likes Received:
    0
    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: [FYI, I am using the HTML escape sequences ">" and "<" 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. MarkHastings

    MarkHastings Executive Producer

    Joined:
    Jan 27, 2003
    Messages:
    12,013
    Likes Received:
    1
    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. ChristopherDAC

    ChristopherDAC Producer

    Joined:
    Feb 18, 2004
    Messages:
    3,729
    Likes Received:
    0
    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. MarkHastings

    MarkHastings Executive Producer

    Joined:
    Jan 27, 2003
    Messages:
    12,013
    Likes Received:
    1
    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. [​IMG]
     
  10. nolesrule

    nolesrule Producer

    Joined:
    Aug 6, 2001
    Messages:
    3,084
    Likes Received:
    0
    Location:
    Clearwater, FL
    Real Name:
    Joe Kauffman
    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.
     

Share This Page