Solved

Menu Control CSS background within background help!

Posted on 2007-11-22
6
1,067 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:BobCSD
  • 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 1

Author Comment

by:BobCSD
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 1

Author Comment

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

thanks!
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:BobCSD
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 1

Author Comment

by:BobCSD
ID: 20340137
thanks so much! that worked!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now