Foros del Web » Creando para Internet » CSS »

Menu Siempre en el Top de la Pagina

Estas en el tema de Menu Siempre en el Top de la Pagina en el foro de CSS en Foros del Web. Saludos, Estimados amigos tengo un menu en css estilo windows vista y deseo que este siempre en el top de la pagina, el cuerpo del ...
  #1 (permalink)  
Antiguo 16/10/2009, 16:55
 
Fecha de Ingreso: diciembre-2007
Mensajes: 218
Antigüedad: 10 años
Puntos: 1
Menu Siempre en el Top de la Pagina

Saludos,

Estimados amigos tengo un menu en css estilo windows vista y deseo que este siempre en el top de la pagina, el cuerpo del documento es una tabla, este es el codigo del menu:

#vista_toolbar {
float:left;
font:normal 12px 'Century Gothic';
width:100%;
top: 0; /* esto lo fuerza a ubicarse en la parte inferior de la pantalla */
right: 0; /* y que se extienda de lado a lado */
margin: 0 auto; /* su contenido se centrará */
padding: 0; /* eliminamos cualquier relleno para que la altura sea exacta */
position: fixed; /* lo fijamos para que no se mueva y permanezca siempre visible */
}

#vista_toolbar ul {
background-image:url(../imagenes/herramientas/toolbar/back.gif);
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
/*padding:0 10px 0 10px;
width:500px;*/
}

#vista_toolbar li {
display:inline;
padding:0;
}

#vista_toolbar a {
color:#FFF; /* need because it will use default link color */
float:left;
padding:0 3px 0 3px; /* left 3 px because of left.png image */
text-decoration:none;
}

#vista_toolbar a span {
display:block;
float:none;
padding:0 10px 0 7px;
}

#vista_toolbar a span img {
border:none;
margin:8px 4px 0 0;
}

/* show picture when mouse over link */
#vista_toolbar a:hover{
background: url(../imagenes/herramientas/toolbar/left.png) no-repeat left center;
}

#vista_toolbar a:hover span {
background:url(../imagenes/herramientas/toolbar/right2.png) no-repeat right center;
}

#vista_toolbar a.right {
float:right; /* for help button - just add class "right" -> <a class="right"... */
}
  #2 (permalink)  
Antiguo 16/10/2009, 22:28
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Menu Siempre en el Top de la Pagina

Cita:
Iniciado por lvinuezav Ver Mensaje
#vista_toolbar {
float:left;
font:normal 12px 'Century Gothic';
width:100%;
top: 0; /* esto lo fuerza a ubicarse en la partesuperior de la pantalla */
right: 0; /* se hubica a una distancia de 0 respecto a la derecha de la pantalla */
margin: 0 auto; /* su contenido se centrará */
padding: 0; /* eliminamos cualquier relleno para que la altura sea exacta */
position: fixed; /* lo fijamos para que no se mueva y permanezca siempre visible */ Tendras problemas con IE fijate en www.araudi.net
}

Se me complica si no veo el html, pero dando al div contenedor de tu menu que supongo que es <div id="vista_toolbar"> position:fixed; top:0; debería quedar en el lugar que quieres.

Saludos!
  #3 (permalink)  
Antiguo 19/10/2009, 10:55
 
Fecha de Ingreso: diciembre-2007
Mensajes: 218
Antigüedad: 10 años
Puntos: 1
Respuesta: Menu Siempre en el Top de la Pagina

Disculpa este es e codigo html:

<html>
<head>
<title>Inicio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="../imagenes/herramientas/logo.ico">
<link href="vista_toolbar/style.css" media="all" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="vista_toolbar">
<ul>
<li><a href="http://www.ibelex.com"><span><img align="left" src="vista_toolbar/logo_ibelex.gif"
alt="add new" height="20" width="80"/></span></a></li>
<li><a href="#"><span><img align="left" src=
"vista_toolbar/mail.gif" alt="check mail" />La Camara Civica</span></a></li>
<li><a href="#"><span><img align="left" src=
"vista_toolbar/chart.gif" alt=
"statistic" />Entrevistas Destacadas</span></a></li>
<li><a href="#"><span><img align="left" src=
"vista_toolbar/mona.gif" alt="my pictures" />PodCast</span></a></li>
<li><a class="right" href="#"><span><img align="left" src=
"vista_toolbar/sos.gif" alt="help" />Help</span></a></li>
</ul>
<table id="Table_01" width="1025" height="691" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<form id="frm_w3FormValidation" name="frm_w3FormValidation" method="post" onSubmit="return validateStandard(this, 'error');" action="../interfaces/interface001.php">
<div style="float:left; margin-top:1px; margin-left:4px; vertical-align:top;" class="formulario">&nbsp;Usuario&nbsp;<input name="txt_usuario" type="text" class="txt" size="10" required="1" regexp="/^\w*$/" realname="Usuario"></div>
<div style="float:left; margin-top:0px; margin-left:4px; vertical-align:top;" class="formulario">&nbsp;Clave&nbsp;&nbsp;&nbsp;<i nput name="txt_clave" id="txt_clave" type="password" class="txt" size="10" onKeyPress="return ver(event)" required="1" regexp="/^\w*$/" realname="Clave">
</div>
</form>
</td>
</tr>
</table>
</div>

En IE funciona OK pero en FF solo se muestra la mitad y desentrado.
Algo adicional cuando pongo esta linea:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
el textbox del formulario me cambia de tamaño, este es el codigo css del textbox:

.txt{
font-family: Century Gothic;
font-size: 8px;
font-weight: bold;
width: 80px;
height:14px;
border:1;
border-style:solid;
border-color:#1E7FA5;
color: #1E7FA5;
margin-top:0px;
margin-bottom:0px;
margin-right:4px;
}

.formulario{
font-family: Century Gothic;
font-size:10pt;
color:#1E7FA5;
}

De antemano muchas gracias.
  #4 (permalink)  
Antiguo 19/10/2009, 20:15
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Menu Siempre en el Top de la Pagina

Hola lvinuezav
Si tu menu top solo es esto:

Cita:
<div id="vista_toolbar">
<ul>
<li><a href="http://www.ibelex.com"><span><img align="left" src="vista_toolbar/logo_ibelex.gif"
alt="add new" height="20" width="80"/></span></a></li>
<li><a href="#"><span><img align="left" src=
"vista_toolbar/mail.gif" alt="check mail" />La Camara Civica</span></a></li>
<li><a href="#"><span><img align="left" src=
"vista_toolbar/chart.gif" alt=
"statistic" />Entrevistas Destacadas</span></a></li>
<li><a href="#"><span><img align="left" src=
"vista_toolbar/mona.gif" alt="my pictures" />PodCast</span></a></li>
<li><a class="right" href="#"><span><img align="left" src=
"vista_toolbar/sos.gif" alt="help" />Help</span></a></li>
</ul>
Entonces estas cerrando mal el div.
Prueba de cerrarlo después del </ul> y antes de <table>
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 20/10/2009, 10:07
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Menu Siempre en el Top de la Pagina

Hola lvinuezav:

Cita:
Iniciado por lvinuezav Ver Mensaje
Disculpa este es el codigo html:

En IE funciona OK pero en FF solo se muestra la mitad y desentrado.

- con que version de IE trabajas? busca "IE Tester" en google y bájatelo.
- asegurate de incluir un reset css al principio de tu hoja de estilos. Uno básico es *{margin:0; padding:0;}
- el ancho total de tu div es la suma de las propiedades css: margin+padding+width+border.



Algo adicional cuando pongo esta linea:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
el textbox del formulario me cambia de tamaño.

El DTD transitional tengo entendido que fue concebido para quienes estan pasando del diseño con tablas a diseño con divs. Fijate en las FAQ sobre la "migración sin dolor" artículo aporte de mikmoro, muy valioso para la comprensión de este tema.

Aunque creo que lo que ocurre es un error del explorer, pero ya te digo no se con que version estas viendo tu pagina.


Busca en google:
- "bugs css box IE"
- "comentarios condicionales para IE"

Además, una pequeña sugerencia:

Puedes reducir las líneas de tu código por ejemplo:

esto:
border:1;
border-style:solid;
border-color:#1E7FA5;
por esto:
border: 1px solid #1E7FA5;

esto:
margin-top:0px;
margin-bottom:0px;
margin-right:4px;
por esto:
margin: 0px(top) 0px(left) 4px(right) 0px(bottom);

Lo "ideal" para poder ayudarte es que postees una URL, pues como no domino con fluidez el lenguaje a lo mejor viendo el sitio me pueda inspirar un poco más y abordar a una respuesta más precisa.

Espero te sirva, saludos!
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




La zona horaria es GMT -6. Ahora son las 08:19.