Solved

Menu Control CSS background within background help!

Posted on 2007-11-22
6
1,072 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
  • 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
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!

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

685 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