Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 menu in asp.net with css troubleshooting
Index -> Web Design
View previous topic Printable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
unoho




PostPosted: Fri Jun 17, 2011 1:44 pm   Post subject: menu in asp.net with css troubleshooting

Hey guys, so i am trying to make a website where it will have few menus at the top but problem i got into is that my css is not working with the menu. i got the original css from a template file and i am trying to use that on my site by copying the css over to my css file. I have attached a copy of what i am trying to achieve. any idea/tips/comments/help is always appreciated. thanks

code:

body
{
}
/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}


and my asp.net file is
code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <link href="App_Themes/Theme1/Stylesheet1.css" rel="stylesheet" type="text/css" />
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="clear hideSkiplink">
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical">
        <Items>
            <asp:MenuItem NavigateUrl="~/webform1.aspx" Text="Home"/>
            <asp:MenuItem NavigateUrl="~/webform1.aspx" Text="About"/>
        </Items>
    </asp:Menu>   
    </div>
    </form>
</body>
</html>




menu_mouseover.JPG
 Description:
 Filesize:  4.19 KB
 Viewed:  56680 Time(s)

menu_mouseover.JPG



menu_normal.JPG
 Description:
 Filesize:  2.86 KB
 Viewed:  56679 Time(s)

menu_normal.JPG


Sponsor
Sponsor
Sponsor
sponsor
2goto1




PostPosted: Sat Jun 18, 2011 9:56 am   Post subject: RE:menu in asp.net with css troubleshooting

What does the rendered html look like for the asp:menu tag? Can you paste your browser's source view?
unoho




PostPosted: Mon Jun 20, 2011 9:18 am   Post subject: Re: menu in asp.net with css troubleshooting

hey sorry for the late reply..i didn't have access to the source code until today. here is the source view. i also attached a copy of how the menu looks like

code:

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link href="App_Themes/Theme1/Stylesheet1.css" rel="stylesheet" type="text/css" /><title>
        Untitled Page
</title><style type="text/css">
        .NavigationMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
        .NavigationMenu_1 { text-decoration:none; }
        .NavigationMenu_2 {  }
 
</style></head>
<body>
    <form name="form1" method="post" action="WebForm1.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTA3NDMyMDZkZMgYQlqq8PQ96QYUcCKVmHpld092" />
</div>
 
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/WebResource.axd?d=S_HKeQsGaaI_vO6luaPAway3g98vm5NaanXZc7uKUQ0lf2pztywZ2OHiW6vPuW91T-lueWon4JbS0pyaasQuIg8H4QI1&amp;t=634382133928560151" type="text/javascript"></script>
 
 
<script src="/WebResource.axd?d=KqLJgaW9yqiTBpoC5vRlo7KGIxs3TXRavQmsZDfiR5BEClPjb1uULpT7aMiPDL6wvnQ20GFcui-n68l37uX3-I9H-8g1&amp;t=634382133928560151" type="text/javascript"></script>
    <div class="clear hideSkiplink">
    <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=vZ04OAkXAPyAJOdwDPrtrJql5qzv00QprC37naPv_raBo_NajDqxa8sv3MI86n6rwVkAN_QEeidpujp7LplVKPCmnKM1&amp;t=634382133928560151" width="0" height="0" style="border-width:0px;" /></a><table id="NavigationMenu" class="menu NavigationMenu_2" IncludeStyleBlock="tru" cellpadding="0" cellspacing="0" border="0">
        <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="NavigationMenun0">
                <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                                <td style="white-space:nowrap;width:100%;"><a class="NavigationMenu_1" href="webform1.aspx">Home</a></td>
                        </tr>
                </table></td>
        </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="NavigationMenun1">
                <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                                <td style="white-space:nowrap;width:100%;"><a class="NavigationMenu_1" href="webform1.aspx">About</a></td>
                        </tr>
                </table></td>
        </tr>
</table><a id="NavigationMenu_SkipLink"></a>   
    </div>
   
 
<script type="text/javascript">
//<![CDATA[
var NavigationMenu_Data = new Object();
NavigationMenu_Data.disappearAfter = 500;
NavigationMenu_Data.horizontalOffset = 0;
NavigationMenu_Data.verticalOffset = 0;
//]]>
</script>
</form>
</body>
</html>



menu_render.JPG
 Description:
 Filesize:  1.6 KB
 Viewed:  56619 Time(s)

menu_render.JPG


2goto1




PostPosted: Mon Jun 20, 2011 10:12 am   Post subject: RE:menu in asp.net with css troubleshooting

It looks like from the rendered HTML, that there is a <table class="menu NavigationMenu_2">. Your CSS rules look like they're defined as div.menu. Were you intended the styles for div.menu to apply to the <table tag that has the class menu? If so, they won't apply. You'd have to change your CSS rule to table.menu for that to happen.

All of the CSS selectors that you have from your first posting (div.menu, div.menu ul, div.menu ul li a, etc.) won't apply to the rendered HTML as is.

Also the CSS rules from your first posting assume ul and li tags, whereas your rendered menu uses HTML table tags.

You'll have to change your CSS rules to apply to your HTML structure
unoho




PostPosted: Mon Jun 20, 2011 11:21 am   Post subject: RE:menu in asp.net with css troubleshooting

ya tht's the problem. how is the table being generated while i am clearly using div tag.. ughh
2goto1




PostPosted: Mon Jun 20, 2011 12:56 pm   Post subject: RE:menu in asp.net with css troubleshooting

The <asp:Menu server tag renders as an HTML table. Since you're only rendering a Home and an About menu item, if you're planning to just have those 2 menu items, there's really no need/benefit to use asp:menu, unless you want the benefit of the correct menu item getting dynamically selected with a 'class="selected"' or something like that. But that's easy enough to hardwire for small websites. I'd just hand code the menu in HTML in that case. For larger menus or more dynamic requirements there are other menu controls that are more lightweight.
unoho




PostPosted: Mon Jun 20, 2011 1:33 pm   Post subject: RE:menu in asp.net with css troubleshooting

ya i used those 2 for just an exam. it's supposed to be more dynamic.. like update a criteria in the database and menu would get updated automatically.

EDIT: okay..this is very weird.. it renders fine when i do it in vs2010 but it wudn't work on vs2005 ,,, i guess it depends on how they render objects
Display posts from previous:   
   Index -> Web Design
View previous topic Tell A FriendPrintable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 7 Posts ]
Jump to:   


Style:  
Search: