Printable View
Hi,
I am creating a simple project with ASP.NET 4 menu and I would like to middle align it within whatever container it is sitting. I have tried everything that I can think of with no joy.
I am allowed to use jQuery but I don't know much about it and not sure if it can be helpful or not.
Please see the sample project.
TA :)
Will you be keeping the menu like it is now, that is with two level 1 items or adding more top level items?
Edit:
I noticed that you are using a cascading style sheet in your project. Have you tried the align method as you would if you were creating a normal html website?
Thanks. No there will me more than 2 top level items. This was just an example.
I have tried everything I can with CSS.
Not sure if this would help? I disable the external css when testing so you may have to do the same. Although, you could place the style code in the css file. the external css seems override that of the css that is internal.
HTML Code:<style>
.MainMenu
{
position:relative;
vertical-align:middle;
}
</style>
"asp.net" Code:
Hey thanks Nightwalker. I tried that but no change! Could I be missing anything?
Hello,Quote:
Originally Posted by wrack
When you say there is no change, did you first clear out your browsers cache? Browsers are notorious for keeps references to cached CSS and JS files etc, and as a result, changes that you have made on the server aren't pushed down to the client.
Try clearing your cache and try again.
Gary
Hi Gary, thanks for the pointer and yes I did clear the browser cache before testing.
I think Nightwalker fixed the middle alignment as in vertical-align: middle;
Apologies if the topic title caused confusion. I meant it to align center horizontally.
i tried your project,
i think there is something into your css it self,
i will see more
in the design mode it is center but not in the run mode :S
ok,
removing your css class named AdminMasterMenu from your <td>
and adding align="center" to your menu <td>
this sent your menu to the center
but i didn't actually know why text-align:center inside your css class is not working,
sure there is something else we are missing :)
Thanks :)
BTW this is ASP.NET menu control and looking through FireBug, or IE Developer Tools I noticed it adds a whole heap of inline styles itself! Could they be the culprits?
I am confused, this is what I did above:Quote:
Originally Posted by wrack
In Fire fox when I run that code it moves the menu horizontally to the center because that is how the div in aligned. Are you saying you want to have the div on the side of the page then the menu appear halfway down?HTML Code:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<title></title>
<style>
.MainMenu
{
position:relative;
vertical-align:middle;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table style="width: 100%; height: 100%; min-width: 960px; min-height: 704px;" cellpadding="0"
cellspacing="0">
<tr class="AdminMasterRow">
<td class="AdminMasterUser">
<asp:Label ID="lblUserPrefix" runat="server" Text="Welcome back, " CssClass="UserPrefix"></asp:Label>
<asp:HyperLink ID="hlUser" runat="server" CssClass="UserSuffix">HyperLink</asp:HyperLink>
</td>
<td class="AdminMasterMenu">
<asp:Menu ID="mnuMain" class="MainMenu" runat="server" Orientation="Horizontal" IncludeStyleBlock="False">
<Items>
<asp:MenuItem Text="Level 1 Item 1" Value="Level 1 Item 1">
<asp:MenuItem Text="Level 2 Item 1" Value="Level 2 Item 1"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Level 1 Item 2" Value="Level 1 Item 2">
<asp:MenuItem Text="Level 2 Item 1" Value="Level 2 Item 1">
<asp:MenuItem Text="Level 3 Item 1" Value="Level 3 Item 1"></asp:MenuItem>
<asp:MenuItem Text="Level 3 Item 2" Value="Level 3 Item 2"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</td>
<td class="AdminMasterLoginLogout">
<asp:LoginStatus ID="lsMain" runat="server" CssClass="LoginLogout" LoginText="LOGIN"
LogoutText="LOGOUT" />
</td>
</tr>
<tr>
<td colspan="3" class="AdminMasterContent">
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks Nightwalker. Basically I want the menu (whatever ASP.NET renders the menu control to) aligned centrally within the TD.
I think I know what you are trying to do. But with all the other CSS I have, something gets screwed up! Also it is aligned in the middle when I remove the external css as you mentioned but then I need help with the CSS that may be causing this.
Try putting:Quote:
Originally Posted by wrack
in the css file if you haven't already and see if that makes a difference. If you do that don't forget the asp.net code in post #4.Code:.MainMenu
{
position:relative;
vertical-align:middle;
}
Sorry Nightwalker but I tried that with no joy. Can you post your solution please? I want to see the whole thing and find out what am I doing wrong.
EDIT:
I have decided to give this up for now as I have higher priority things to do. I will change the whole layout later to make things work better.
Thanks for all your help.
Sorry, I couldn't be of help! Maybe you could draw a picture of what you are trying to do and post it?Quote:
Originally Posted by wrack
No no, you have been of great help. I think my choice of using table as a basic layout is very bad. I am going to properly redesign the site with DIVs.
That would certainly be my recommendation, yes.Quote:
Originally Posted by wrack
I would start here:
http://htmldog.com/
Gary