PDA

Click to See Complete Forum and Search --> : id/class overriding all other classes! PLEASE HELP



Skulky
04-04-2007, 11:32 PM
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


<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


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;back ground:#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}

1407
04-05-2007, 02:19 AM
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.

Skulky
04-05-2007, 03:24 AM
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:D

1407
04-05-2007, 04:00 AM
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. :cool: