Solved

Menu Control CSS background within background help!

Posted on 2007-11-22
6
1,071 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

790 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