SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with CSS and links

    I have long seen the point of CSS, but it's for reasons such as the following that I have avoided them until I started redesigning this site. Temporarily, the link is http://www.livingpages.net/anc. The front page is not yet done. Tomorrow I will add some hidden layers and DIVs (if I can figure them out). and it will end up looking good. The menu on top works for navigation so you can see what I am referring to.

    Throughout the site, when there are links, they are #CCCCCC (lt. grey). Now the reason for this is because of the menus on top. When those menu (javascript) are any other color, then it ends up being too dark, or whatever, so I want to keep those menu items that color. I tried to create a class for these, but I can't seem to implement them, so I reversed the process and tried to use those classes on links in the main part of the HTML...it was supposedly easier. However, the links in the HTML don't seem to want to change away from the standard "link" tags. Could someone help me on this. If you need to download the CSS sheet to look at it is at http://www.livingpages.net/anc.css

    Thanks.
    Sketch

    PS. Any other tips you have are good, but keep in mind this is a prototype site still. :-)
    Aaron Brazell
    Technosailor



  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, for starters, it appears that your stylesheet is not working properly. All of your text is huge and the text links are not gray at all but the normal blue. When I downloaded your stylesheet it opened up and was blank. Did you possibly overwrite the right one with a blank page?

    As for classes, here is the way to do it:

    a:link { font-family: verdana; color: #FFFFFF; font-size: 9pt; }
    a:hover { font-family: verdana; color: #66FF00; font-size: 9pt; }
    a:visited { font-family: verdana; color: #666666; font-size: 9pt; }
    a:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt; }

    a.footer:link { font-family: verdana; color: #FFFFFF; font-size: 9pt; }
    a.footer:hover { font-family: verdana; color: #66FF00; font-size: 9pt; }
    a.footer:visited { font-family: verdana; color: #cccccc; font-size: 9pt; }
    a.footer:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt; }

    The default page style is on top. If you use a generic HREF tag then it will assume those styles. To use the bottom set of styles, you simply call it like so:

    <a href="somelink.html" class="footer">footer links</a>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oi! sorry about the CSS not working, it appears, that my pages keep looking for the style sheet in the wrong place and I have to fix that.

    But my question is about defining the "a.footer". Does it have to use a. in the definition in order for it to be used for links or can I naem it however. The reason why I ask is,,except fora different class name, my tag looked like what you just typped, unless I'm mistaken...

    Anyways, take another look at it, and maybe redownload my style sheet cause I just repuploaded everything to make sure it is current.

    Thanks, Creole
    Sketch
    Aaron Brazell
    Technosailor



  4. #4
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm...it's still not working...<pause>

    Sketch
    Aaron Brazell
    Technosailor



  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay, the CSS file is in the right place now and all the pages are pointing at it. My question remains, but now I add to it slightly. I notice that in my HTML, Dreamweaver has this link twice
    Code:
    <link rel="stylesheet" href="anc.css" type="text/css">
    the first tag is before the javascript for the menu. The second tag is after the menu, before the <BODY> tag. If I created a new stylesheet for the body and redefined those link colors, etc. in that CSS, could I refer to it in the second <link rel=> tag and not affect the menu bar? Am I making sense?

    Sketch
    Aaron Brazell
    Technosailor



  6. #6
    :) delemtri's Avatar
    Join Date
    Jun 2001
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I do:

    #menu A:link {text-decoration: none; color: #CC6600}
    #menu A:visited {text-decoration: none; color: #993333}
    #menu A:active {text-decoration: none; color: #FF3333}
    #menu A:hover {text-decoration: underline; color: #FF3333}

    #main A:link {text-decoration: none; color: #FF9933}
    #main A:visited {text-decoration: none; color: #CC6600}
    #main A:active {text-decoration: none; color: #669966}
    #main A:hover {text-decoration: underline; color: #669966}

    #foot A:link {text-decoration: none; color: #000000}
    #foot A:visited {text-decoration: none; color: #000000}
    #foot A:active {text-decoration: none; color: #333333}
    #foot A:hover {text-decoration: underline; color: #333333}

    for example. Then use
    <div id="menu">
    [menu]
    </div><div id="main">
    [stuff]
    </div><div id="foot">
    copyright &copy; 2001 Sketch
    </div>

  7. #7
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PERFECT, delemitri!

    Thank you so much...

    Sketch
    Aaron Brazell
    Technosailor



  8. #8
    :) delemtri's Avatar
    Join Date
    Jun 2001
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, glad to help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •