SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any reason this link style won't work?

    This is my style that I have in my style sheet. It won't affect the links the way I want it to.

    #blue #darkgold #red a:link, a:active {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    background-color: #E3F4DF;
    font-size: 10pt;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    color: #000000;
    text-decoration: none;
    text-align: center;
    }

    Here is my html
    Code:
     <div id="menu"><a href="#" title="Home">Home</a>
    <a href="#" title="Portfolio">Portfolio</a>
    <a href="#" title="Philosophy">Philosophy</a>
    <a href="#" title="Resume">Resume</a>
    <a href="#" title="Contact">Contact</a>
    <div id="color">Style Type: <div id="blue">
    <a href="#" title="Blue">Blue</a></div>
    <div id="darkgold"><a href="#" title="Dark Gold">Dark 
    Gold</a></div>
    <div id="red"><a href="#" title="Red">Red</a></div>
    <div id="green">Green</div></div>
    </div>
    I have broken them in to lines for the browsers sake, so it doesn't stretch this window.

    This is my code for the div, "color"
    Code:
     #color {
     font-weight: bold;
     font-family: Geneva, Arial, Helvetica, sans-serif;
     font-size: 10pt;
     font-style: normal;
     color: #000000;
     text-decoration: none;
     text-align: right;
     display: inline;
     text-transform: none;
     margin-left: 60px;
     border-left-width: 1px;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: none;
     border-left-style: dashed;
     border-left-color: #339933;
    
    }
    Anyways, I have all the links within a layer called "color", which happens to be in the layer "menu". Now, menu has a different set of link attributes, hence why I created new ones. I am attempting to make it so BLUE, DARKGOLD, and RED all have different hover states, but I am focusing on just making them links to work first. I have even attempted to change 10pt to 10px, but there is no difference. What am I doing wrong? Its driving me crazy.

    Thanks

  2. #2
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try putting commas in between the ids you are specifying.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ---EDIT----

    I figured it out. Though it isn't the appropriate method, I had to isolate everything and strictly use a.BLAH:link , etc..

    No more #BLAH a:link . Those caused to many headaches.

    Thanks
    Bryan
    Last edited by jag5311; Sep 9, 2003 at 14:32.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    #blue #darkgold #red a:link, a:active
    I know you said you've sorted it but just to clear up the line above. You are asking the browser to apply that style to the a:link that sits in an id of red, which itself sits in an id of darkgold, which is inside an id of blue.
    e.g.
    Code:
    <div id="blue>
      <div id="darkgold">
    	<div id="red">
    	  <a href=""#">link</a>
    	</div>
      </div>
    </div>
    Obviously this structure doesnt occur in your code. If you wanted the style to apply to each individual id them you would need to separate it with commas as advised by Jeff.

    If you wanted to specify the a:link in each of those separate id's then you need to add the a:link to the definition as follows.
    Code:
    #blue a:link, #darkgold a:link, #red a:link, #blue a:active ,#darkgold a:active, #red a:active {}
    I hope that makes it a bit clearer.

    Paul

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahhhhhhhhhh, man what a learning experience this place is.

    You guys should be paid salary PLUS benefits

    If I was a millionaire, I would take everyone on this board to the Bahamas, but sorry, im not a millionaire, and in fact, I don't have a job


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
  •