Foros del Web » Creando para Internet » CSS »

Problema de alineación de menú

Estas en el tema de Problema de alineación de menú en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/07/2008, 04:13
 
Fecha de Ingreso: junio-2008
Mensajes: 5
Antigüedad: 9 años, 6 meses
Puntos: 0
Exclamación Problema de alineación de menú

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">&nbsp;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;">
                           &nbsp;<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">
                           &nbsp;<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 />
                              &nbsp; &nbsp; &nbsp;<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">&nbsp;</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 -->
default.css

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;  
}
  #2 (permalink)  
Antiguo 16/07/2008, 13:51
 
Fecha de Ingreso: junio-2008
Mensajes: 5
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problema de alineación de menú

Cita:
Iniciado por DJxusky Ver Mensaje
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">&nbsp;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;">
                           &nbsp;<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">
                           &nbsp;<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 />
                              &nbsp; &nbsp; &nbsp;<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">&nbsp;</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 -->
default.css

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;  
}
Como informacion os digo que si cambio el position:relative del bloque <p> del logo a position:absolute, todo se pone en su sitio pero se sale de la parte negra con diferentes resoluciones de pantalla evidentemente. La idea es que sea posicion relativa y este dentro de la parte negra a la izquierda. ESPERO RESPUESTAS. GRACIAS A TODOS POR VUESTRA ATENCIÓN.

Última edición por DJxusky; 16/07/2008 a las 13:54 Razón: falta informacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:14.