-
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}
-
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.
-
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
-
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|