Solved

Menu Control CSS background within background help!

Posted on 2007-11-22
6
1,075 Views
Last Modified: 2010-05-18
I have created a menu using the built-in menu control. I setup a skin and a style sheet.

On my sub menu, my menu background displays fine, but the text itself also has a mini version of the background. So I have a background within a background with the text inside the inner background.

Help me get rid of the background behind the text. I only want the actual sub menu background.

 <asp:Menu ID="menu1" SkinID="menuskin1" runat="server" DataSourceID="SiteMapDataSource1">
                                    </asp:Menu>

<asp:Menu runat="server" SkinID="menuskin1" DynamicEnableDefaultPopOutImage="false"
    StaticEnableDefaultPopOutImage="false" Orientation="Horizontal"
    MaximumDynamicDisplayLevels="2" StaticDisplayLevels="2">
    <StaticMenuItemStyle CssClass="menua" HorizontalPadding="8px"
        ItemSpacing="0px" Height="30px" />
    <DynamicMenuItemStyle CssClass="menub" HorizontalPadding="8px"
        Height="30px" />
    <DynamicMenuStyle HorizontalPadding="0px" />
    <StaticHoverStyle Height="30px" />
    <DynamicHoverStyle Height="30px" />
</asp:Menu>

.menub
{
    font-size: 13px;
    background-image: url(menubg.gif);
    color: #FFFFFF;
    font-family: Verdana;
    text-decoration: none;
    font-weight: Bold;
    text-align: left;
    border: 0;
    padding: 1;
}


.menub a:visited, .nav a:visited
{
    color: #FFFFFF;
    text-decoration: none;
}

.menub a:hover
{
    color: #c7cfeb;
    text-decoration: none;
}
0
Comment
Question by:Starr Duskk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 20337025
try this
.menub a:visited, .nav a:visited
{
    color: #FFFFFF;
    text-decoration: none;
    background:none !important;
}
 
.menub a:hover
{
    color: #c7cfeb;
    text-decoration: none;
    background:none !important;
}

Open in new window

0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20337297
That works for the visited and hovers, but what about the unvisited? how do i get it to go away for that?
thanks!
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20337360
figured it out. needed to add a:link

thanks!
0
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 2

Author Comment

by:Starr Duskk
ID: 20337398
I added a:link like so:

.menub a:link, a:visited
{
    color: #FFFFFF;
    text-decoration: none;
   background:none !important;    
}

And it caused all my other hyperlink background images to disappear. I even added important there....

.Logo
{
    display: block;
    width: 227px;
    height: 75px;
    background: url(logo.gif) !important;
}

It is called like this:
<a href="<%= ResolveClientUrl("default.aspx")%>" class="Logo"></a>

How do I fix that please?
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 20337937
ok... what you need to do is to give the links that don't need backgrounds a class. like this:

<a class="nobg" href="#">link</a>

then alter the styles above as follows:

.menub a.nobg:visited, .nav a.nobg:visited
{
    color: #FFFFFF;
    text-decoration: none;
    background:none !important;
}
 
.menub a.nobg:hover
{
    color: #c7cfeb;
    text-decoration: none;
    background:none !important;
}
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20340137
thanks so much! that worked!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question