SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting the a:link, a:hover, etc. for DIV's

    Hi.

    I thought I've done this correct before, but...<sigh>

    I have different DIV's, I have specified the different link color, text size for each.

    Now I'm not sure but I can't seem to get the to work? It seems that it's taking a "default" size and color for all.

    The main link color seems to be defaulting to black, thought I specified them as different colors..

    Any suggestions?

    CSS:
    Code:
    html, body {margin:0; padding:0;}
    body {margin:6px 0 0 0;}
    
    h1 {margin:0 8px 8px 18px; font:bold 16px Arial, Helvetica, sans-serif; color:#C62935;}
    h2 {margin:2px 4px 2px 18px; padding:0; font:bold 12px Arial, Helvetica, sans-serif; color:#048f43;}
    h3 {margin:6px 4px 4px 18px; padding:0; font:bold 14px Arial, Helvetica, sans-serif; color:#23006f;}
    p {margin:4px 8px 14px 18px; font:12px Arial, Helvetica, sans-serif; color:#000; text-align:justify;}
    img {border:0;}
    br {clear:both;}
    
    #container {width:701px; margin:0 auto; padding:0; background:url(../images/common/bgContainer.gif) repeat-y;}
    #containerTop {width:701px; height:6px; background:url(../images/common/bgTop.gif) no-repeat left top; overflow:hidden;}
    #header {width:556px; height:84px; float:left; margin:0 0 4px 0; position:relative; z-index:2;}
    #content {width:556px; min-height:375px; position:relative; z-index:1;} 
    #content a, a:active, a:visited {color:#000; font:Arial, Helvetica, sans-serif; text-decoration:underline;}
    #content a:hover {color:#000; font:Arial, Helvetica, sans-serif; text-decoration:none;}
    /** html #content {height:375px;}*/
    #containerBottom {width:701px; height:49px; margin:-40px 0 0 0; background:url(../images/common/bgBottom.gif) no-repeat left top; overflow:hidden; position:relative; z-index:0;}
    
    .top {text-align:right; margin:2px 6px; color:#048f43; font:10px Arial, Helvetica, sans-serif;}
    .top a, a:active, a:visited {color:#048f43; font:Arial, Helvetica, sans-serif; text-decoration:underline;}
    .top a:hover {color:#000; font:Arial, Helvetica, sans-serif; text-decoration:none;}
    
    .source {text-align:right; margin:2px 6px; color:#666; font:10px Arial, Helvetica, sans-serif;}
    .source a, a:active, a:visited {color:#666; font:Arial, Helvetica, sans-serif; text-decoration:underline;}
    .source a:hover {color:#666; font:Arial, Helvetica, sans-serif; text-decoration:none;}
    Specifically my "top" and "source" DIV's

    "Top" Example (top of page link): http://www.jamiegerrard.com/carpentersUnion/training/

    HTML:
    Code:
    <div class="top">[ <a href="#top" title="top of page">top of page</a> ]</div>
    Source Example (source link): http://www.jamiegerrard.com/carpentersUnion/carpenters/

    HTML:
    <div class="source">Source: <a
    Code:
    href="http://www160.hrdc-drhc.gc.ca/english/LMI/occsums/Occsum.asp?which=7271" title="http://www160.hrdc-drhc.gc.ca/english/LMI/occsums/Occsum.asp?which=7271">HRSDC</a></div>
    ----
    Cheers, Jamie

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I haven't checked your pages but looking at the code you have errors that I can see straight away.

    You have defined this:
    Code:
    #content a, a:active, a:visited {
    What you are defining there is any anchor that is within an id of content (#content a,). You are defining the anchor itself (a) so all states of the anchor will be defined in one go.

    Then after the comma you are now defining the a:active and a:visited states of all anchors (not those anchors specific to #content but all anchors.). Anything after the comma is a new style and has nothing to do with what went before.

    therefore I think you meant this:
    Code:
    #content a, #content a:active, #content a:visited {etc..}
    However the last 2 would be unnecessary as you have already defined all states in the first declaration anyway

    You have repeated this error about 4 or 5 times so who knows which style is going to take effect. Correct the code and then if the problem isn't solved already we can take it from there.

    Paul

  3. #3
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not just choose <a class="wutever" href=""
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not just choose <a class="wutever" href=""
    You can declare the link styles that way or through the DIV's, I personally find it easier to manage with the DIV's.

    Thanks (again) Paul. Staring at the screen for hours (and hours) on end..lol

    -jamie
    ----
    Cheers, Jamie


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
  •