As a novice in web page coding, I am seeking assistance with centering elements on my master page. The layout includes a banner at the top and an ASP menu control on the left side. To achieve center alignment, I have created an "outer_div" with CSS attributes: text-align:center, margin-left:auto, margin-right:auto.
Within this "outer_div," the "menu" div (which contains the ASP menu control) is set to text-align:left. However, I am facing challenges positioning the menu control to the left of the outer div; it either aligns extreme left or centers on the screen.
I have included the .master file and relevant CSS below. Any guidance would be greatly appreciated!
<body>
<div id="outer_div" class="bxcen cenx">
<form id="form1" runat="server">
<div id="header">
<asp:Label ID="lblHeader" runat="server" CssClass="header_image" Width="1024px" Height="121px"></asp:Label>
<div id="branding">
<span id="companyName" class="redText">Arcadia</span> <br />
<span id="slogan">Reference Data Load Manager</span>
</div>
</div>
<div id="divTopPanel">
<asp:Label ID="lblPageName" runat="server" CssClass="top_panel" Width="1024" Height="30"></asp:Label>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<div id="holder">
<div id="menu" class="left_align">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" Orientation="Vertical"
StaticSubMenuIndent="10px" StaticDisplayLevels="5">
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticSelectedStyle BackColor="#507CD1" />
</asp:Menu>
</div>
<div id="content" align="left">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</div>
Here is the relevant CSS...
body
{
font-family: Verdana;
font-size: small;
background-color: #808080;
}
#standard
{
font-family: Verdana;
font-size: small;
background-color: #FFCC99;
}
#menu {
background-color: #FDA343;
position:relative;
left:0px;
top:0;
width: 161px;
}
#content
{
width: 600px;
float: left;
text-align: left;
}
.button
{
font-family: Verdana;
font-size: small;
background-color: #6699FF;
color: #FFFFFF;
}
.top_panel
{
background-color: #FDA343;
font-family: Tahoma;
font-size: large;
text-align: center;
}
.header_image
{
background-color: #B5C7DE;
font-family: Tahoma;
font-size: large;
text-align: left;
vertical-align: middle;
background-image: url('Images/SmallOrangeRig.jpg');
color: #FFFFFF;
}
.cenx
{
text-align: center;
}
.ceni
{
clear: both;
}
.bxcen
{
margin-left: auto;
margin-right: auto;
border: none;
padding: 0;
}
.left_align
{
text-align:left;
}
#branding {
position: absolute;
right: 20px;
top: 20px;
z-index: 1000;
text-align: left;
color: #9f0f0e;
font-family: "Arial", Courier, monospace;
}
#companyName {
color: #FFF9E9;
font-size: 40px;
}