A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: id/class overriding all other classes! PLEASE HELP

  1. #1
    Member
    Join Date
    Aug 2006
    Location
    Australia
    Posts
    64

    Unhappy id/class overriding all other classes! PLEASE HELP

    Hi everyone,
    I have a designed a menu that works the way I like it.
    It uses the 'display:block' property. Now when I try to add any link they inherit the display block property and anything else that's inside that class.
    How can I set it so that the menu doesn't affect any other anchor links.
    Maybe there is better way to construct this menu. When you rollover the links they are meant to jump up.

    Thank you in advance

    HTML CODE
    Code:
    <div id="goldMenu">
        <table width="600px" border="0" align="center">
          <tr>
            <td><div class="lin"><a href="">Home</a></div></td>
            <td><div class="lin"><a href="">About Us</a></div></td>
            <td><div class="lin"><a href="">What We Offer</a></div></td>
            <td><div class="lin"><a href="">Our Portfolio</a></div></td>
            <td><div class="lin"><a href="">Contact Us</a></div></td>
            <td><div class="lin"><a href="">Links</a></div></td>
          </tr>
        </table>
    </div>
    <div id="noLimits">Webmaster: <a href="">NoLimitsDesign</a> - for all your design needs. </div>
    CSS CODE
    Code:
    html{font-family:arial, helvetica, sans-serif;font-size:13px}
    body{background-color:#ccc;color:#000;margin: 100px 0}
    
    #mainWrapper{width:100%;height:550px;margin:0;background:#fff}
    #heading{height:107px;background:url(images/goldBan.jpg) repeat}
    #mainContent{height:300px;background:url(images/botWaves.jpg) repeat-x #fff bottom;}
    
    #topWave{background:url(images/topWaves.jpg) repeat-x;height:100px}
    
    #goldMenu{background:url(images/goldMenu.jpg) repeat-x; text-align:center; height:35px}
    
    .lin {height:30px;padding-top:0px;text-align:center}
    .lin a, a:link , a:visited{display:block; padding-top:10px; text-decoration:none; color:#000; font-weight:bold; font-size:14px}
    .lin a:hover {margin-top:-5px;height:25px; color:#555}
    
    #noLimits{font-size:11px; text-align:center; height:15px; background:#444;padding:5px;color:#ccc}
    #noLimits a:link, a:active, a:visited{text-decoration:none;color:#fc0;font-weight:100;font-size:11px; }
    #noLimits a:hover{color:#ff0}

  2. #2
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    for your links, CSS should look like this (way easier, and clear)

    a.lin:link { ... }
    a.lin:hover { ... }
    a.lin.etc...

    a.noLimits:link { ... }
    a.noLimits:visited { ... }
    a.noLimits.etc...


    and your html should look like this

    <a class="lin" href="...">text</a>
    or
    <a class="noLimits" href="...">text</a>



    Works like a charm, all the time.

  3. #3
    Member
    Join Date
    Aug 2006
    Location
    Australia
    Posts
    64
    Thanks for the reply man
    I didn't use your scripting style in the end, but coding with it made me realise a big mistake I was making all this time. Every time I was writing [BEFORE:#id a:link, a:visited, a:active][AFTER:#id a:link, a:visited, a:active] I overwrote my main anchors.

    Thanks again heaps

  4. #4
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    Not that you have to code the way I do or anything, but that's the main reason I code that way, unless you do it on purpose it's almost impossible to overwrite or "typo" anything since the class is only applied to the actual <a you put it into.

    good thing you found your own method.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center