Hola buenas a todos. Tengo un problema en la cabecera de mi página web. El menu no se alinea a la izquierda y parece que el logo que tiene arriba le obliga a desplazarse a la derecha. Podeis acceder a www.filocian.com para comprobarlo.
Esta cabecera (#header) consta de:
1- logo en la parte izquierda
2- login en la parte derecha
3- menu debajo del logo
Os adjunto el código HTML y el código CSS para que me ayudeis. Gracias de antemano.
Template.master
Código:
<!-- Header -->
<div id="header">
<!-- Link/Logo Filocian -->
<p id="lnkHome" style="float:left; position:relative; top:15px; left:80px; z-index:200">
<asp:HyperLink id="home" runat="server" NavigateUrl="~/Default.aspx"><img id="imgLogo" alt="" src="css/logo.png" runat="server" class="transparencia" style="border:none" width="98" height="73" /></asp:HyperLink>
</p>
<!-- AJAX login updatePanel -->
<asp:UpdatePanel ID="loginPanel" runat="server" RenderMode="Block" UpdateMode="Conditional">
<ContentTemplate>
<!-- Update Progress -->
<asp:UpdateProgress ID="updProgress" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div class="TransparentGrayBackground"></div>
<asp:Panel ID="alwaysVisibleAjaxPanel" runat="server" CssClass="alwaysVisiblePanel" >
<div class="PageUpdateProgress">
<asp:Image ID="ajaxLoadNotificationImage" ImageAlign="Middle" runat="server" ImageUrl="Images/ajax-loader.gif" AlternateText="[image]" />
<span style="vertical-align:middle"> Procesando...</span>
</div>
</asp:Panel>
<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
TargetControlID="alwaysVisibleAjaxPanel"
HorizontalSide="Center"
HorizontalOffset="150"
VerticalSide="Middle"
VerticalOffset="0"
>
</cc1:AlwaysVisibleControlExtender>
</ProgressTemplate>
</asp:UpdateProgress>
<!-- Login Box -->
<div id="loginbox">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:Login ID="Login" runat="server" FailureAction="RedirectToLoginPage" meta:resourcekey="LoginResource1">
<LayoutTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="130px">
<tr>
<td style="color:White; width:10px; text-align:right; height: 19px;">
<asp:Label runat="server" ID="lblUserName" AssociatedControlID="UserName" Text="Usuario:" meta:resourcekey="lblUserNameResource1" />
</td>
<td style="text-align:left; width:125px; height: 19px;">
<asp:TextBox id="UserName" runat="server" Width="75%" meta:resourcekey="UserNameResource2" />
</td>
<td style="width:5px;text-align:right; color:white; height: 19px;">
<asp:RequiredFieldValidator ID="valRequireUserName" runat="server" SetFocusOnError="True"
ControlToValidate="UserName" Text="*" ValidationGroup="Login" meta:resourcekey="valRequireUserNameResource1" />
</td>
</tr>
<tr>
<td style="color:White; width:10px; text-align:right">
<asp:Label runat="server" ID="lblPassword" AssociatedControlID="Password" Text="Contraseña:" meta:resourcekey="lblPasswordResource1" />
</td>
<td style="text-align:left; width:125px">
<asp:TextBox ID="Password" runat="server" TextMode="Password" Width="75%" meta:resourcekey="PasswordResource2" />
</td>
<td style="width:5px;text-align:right; color:White">
<asp:RequiredFieldValidator ID="valRequirePassword" runat="server" SetFocusOnError="True"
ControlToValidate="Password" Text="*" ValidationGroup="Login" meta:resourcekey="valRequirePasswordResource1" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!--<td><asp:CheckBox ID="RememberMe" runat="server" Text="Recordar password" meta:resourcekey="RememberMeResource1"></asp:CheckBox></td>-->
<td style="width:5px"></td>
<td style="text-align:center; width:130px;">
<br />
<asp:Button ID="Submit" runat="server" Width="50px" Text="Entrar"
BackColor="Bisque" CommandName="Login" ValidationGroup="Login" meta:resourcekey="SubmitResource1" />
</td>
<td style="width:5px" align="right"> </td>
</tr>
</table>
<div style="border-top: solid 1px black; margin-top: 1px; padding-top: 1px; text-align:center">
<asp:HyperLink ID="lnkRegister" runat="server" NavigateUrl="~/Register.aspx" meta:resourcekey="lnkRegisterResource1">Crear nueva cuenta</asp:HyperLink><br />
<asp:HyperLink ID="lnkPasswordRecovery" runat="server" NavigateUrl="~/PasswordRecovery.aspx" meta:resourcekey="lnkPasswordRecoveryResource1"></asp:HyperLink>
</div>
</LayoutTemplate>
</asp:Login>
</AnonymousTemplate>
<LoggedInTemplate>
<div id="welcomebox">
<asp:LoginName ID="LoginName1" runat="server" ForeColor="White" FormatString="Bienvenido, {0}" meta:resourcekey="LoginName1Resource1" /><br />
<small>
<asp:HyperLink ID="lnkProfile" runat="server" Text="Editar Perfil" NavigateUrl="~/GeneralProfile.aspx" meta:resourcekey="lnkProfileResource1" /><br />
<asp:LoginStatus ID="LoginStatus1" Runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Default.aspx" meta:resourcekey="LoginStatus1Resource1" />
</small>
</div>
</LoggedInTemplate>
</asp:LoginView>
</div>
<!-- End Login Box -->
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="LoginView1" />
</Triggers>
</asp:UpdatePanel>
<div id="menu">
<!-- Menu -->
<asp:Menu ID="headMenu" runat="server" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" CssClass="menuStyle"
DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" OnMenuItemDataBound="headMenu_MenuItemDataBound" >
<StaticMenuStyle CssClass="staticMenu" />
<StaticMenuItemStyle CssClass="staticMenuItem" />
<StaticHoverStyle CssClass="staticHover" />
<StaticSelectedStyle CssClass="staticSelected" />
<DynamicMenuStyle CssClass="dynamicMenu" />
<DynamicMenuItemStyle CssClass="dynamicMenuItem" />
<DynamicHoverStyle CssClass="dynamicHover" />
<DynamicSelectedStyle CssClass="dynamicSelected" />
</asp:Menu>
<!-- End Menu -->
</div>
</div>
<!-- End Header -->
Código:
/* Header */
#header
{
width: 961px;
height: 139px;
margin: 10px auto;
background: url(header.png);
}
/* Header > Menu */
/**************************************************/
#menu
{
position: relative;
float: left;
height:139px;
width: auto;
font-family: Times New Roman;
font-size: 12px;
z-index: 100;
}
#menu a
{
color: Black;
}
#menu a:hover
{
color: Black;
}
.menuStyle
{
margin-top: 114px;
margin-left: 15px;
width: auto;
}
.staticMenu
{
}
.staticMenuItem
{
width: 85px;
height: 25px;
background: url(menu.jpg) center no-repeat;
color: Black;
text-align: center;
}
.staticHover
{
/*background: url(menuHover.png);*/
}
.staticHover a
{
color: Black;
}
.staticSelected
{
}
.dynamicMenu
{
z-index: 100;
}
.dynamicMenuItem
{
width: 100px;
height: 23px;
text-align: center;
text-decoration: none;
background-color: #5593DE;
vertical-align: middle;
color: Black;
border: 1px solid #F46600;
background-color: #FFE4C4;
}
.dynamicHover
{
}
.dynamicHover a
{
color: Black;
font-weight: bold;
}
.dynamicSelected
{
}
/*****************************************************/
/* Login Box */
#loginbox
{
position: relative;
float:right;
width: 140px;
height: 65px;
padding: 15px 2px 2px 2px;
font-size: 10px;
color:Red;
}
#loginbox input
{
color:black;
background-color: #f7d582;
font-size: 10px;
}
#welcomebox
{
font-size: 12px;
text-align: right;
padding-right:15px;
}
.loginName
{
color:White;
}