As a newcomer to CSS styling, I'm still learning the ropes and trying to figure things out.
I already have a defined class .logo, but now I want to create a second class specifically for the logo image and background from the Header template below.
<div id="container">
<a name="top" id="top"></a>
<div id="header">
**<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>**
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
I need help extracting just the logo part to create a new class from the bolded section of code in the header. Any suggestions would be appreciated!
Edit for Update
Thank you for the responses so far. I realize I haven't fully explained my issue.
Here's my current situation: I have two divs with drop shadows that intentionally overlap each other to create a 3D effect. However, where the shadows overlap, there is a darker portion that I want to address.
The image linked below highlights the divs and the overlapping shadows:
image here
Although I tried using overflow: hidden, I'm struggling to find the right solution. Any guidance would be helpful as I seem to confuse myself most of the time :)