Foros del Web » Creando para Internet » CSS »

Menu fijo en Pagina

Estas en el tema de Menu fijo en Pagina en el foro de CSS en Foros del Web. Hola Quisiera saber si alguien me puede ayudar con este problemita: lo que pasa es que quiero que mi menu se quede en el mismo ...
  #1 (permalink)  
Antiguo 24/04/2010, 14:31
 
Fecha de Ingreso: abril-2010
Mensajes: 40
Antigüedad: 7 años, 7 meses
Puntos: 0
Menu fijo en Pagina

Hola
Quisiera saber si alguien me puede ayudar con este problemita:

lo que pasa es que quiero que mi menu se quede en el mismo lugar aun cuando minimize la ventana por que miren:

Menu con pantalla maximizada:


Menu con pantalla minimizada: (si se fijan el menu siempre queda visible, y lo que me importa es que quede en el mismo lugar como el la ventana maximizada, y no me importa si no se ve completo el menu)




Bueno no se si me entendi, gracias espero una sugerencia


NOTA:

este es el codigo de estilos generales:

html{
top:0;
height: 100%;
text-align:center;
margin:0 auto;
padding:0;
background: #000;
overflow: scroll;
}

body {
top:0;
height: 100%;
width:100%;
margin: 0 auto;
padding:0;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
}

a:link{ color: #CF7F18; }

a:visited{ color: #AD660C; }

a:hover, a:focus{ color: #FF9814; text-decoration:none; }

p{ margin:1em 0; }

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p{ margin-top:-0.05em;}

h1, h2, h3, h4, h5, h6{ color: #9CA716; margin-bottom:0.5em; }

h1{ font-size:24px;}

h2{ font-size:20px;}

h3{ font-size:18px;}

h4{ font-size:16px;}

h5{ font-size:14px;}

h6{ font-size:12px;}

ol, ul{ margin: 1em 0 1em 2em; }

ol ol, ol ul, ul ol, ul ul{ margin-top:0; margin-bottom:0; }

ol li{ list-style:decimal }
ol li ol li{ list-style:upper-alpha; }
ol li ol li ol li{ list-style:upper-roman; }

ul li{ list-style:disc;}

em{font-style:italic;}

strong{font-weight:bold;}

em strong, strong em{ font-weight:bold; font-style:italic; }

#container {
display: block;
position: relative;
padding:0;
width:100%;
height:210px;
background:#fff;
top:50%;
margin:-100px 0 0 0;
border:solid #E69623;
border-width:3px 0 3px 0;

opacity: 0.90;
-moz-opacity: 0.90;
filter: alpha(opacity=90);
}

#logo{
display:block;
position: absolute;
width:186px;
height:32px;
background: url(../img/logo.gif) no-repeat 0 0;
left:50%;
margin:0 0 0 -280px;
top:15px;
overflow:hidden;
text-indent:999em;
line-height:999em;
}

#content{
position:relative;
display:block;
width: 660px;
left:50%;
margin:0 0 0 -282px;
padding:15px 0;
top:60px;
}

#footer {
position: absolute;
bottom: 0;
margin:0;
width:100%;
text-align:center;
left:0;
}

Este es el codigo css del menu:

/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
* Dropdowns by Patrick Griffiths and Dan Webb.
* http://carroll.org.uk/sandbox/suckerfish/bones2.html
*/

/* ----[ LINKS ]----*/

/* all menu links */
#nav a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#fff ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
margin:0;
float:left;
}

/* Just sub menu links */
#subMenusContainer a, #nav li li a{
text-align:left;
}

/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#F6C739 ;
color:#FFF;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color:#F6C739 ;
color:#FFF;
}

/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../img/arrow_right.gif) right center no-repeat;
}

/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../img/arrow_right_over.gif) right center no-repeat;
}

/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../img/arrow_down.gif) right center no-repeat;
}

/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../img/arrow_down_over.gif) right center no-repeat;
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}


/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}

/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#fff;
border:1px solid #C3D46A;
left:0;
}


/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#nav li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;
}

#subMenusContainer li{
list-style: none;
}

/* main menu ul or ol elment */
#nav{
display:block;
position: absolute;
list-style:none;
margin:0 0 0 0;
z-index:5;
top:15px;
left:50%;
text-align: center;
display:block;
}

#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }

#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
}

#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}

/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }

/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }
  #2 (permalink)  
Antiguo 25/04/2010, 02:17
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 7 años, 7 meses
Puntos: 154
Respuesta: Menu fijo en Pagina

Estimado, yo pondria una capa contenedora, dentro de la misma estarian todos los elementos, y a cada elemento le daria un position:absolute; asi siempre tomaran como referencia de posicionamiento un lugar fijo en funcion del contenedor, de esa forma, por mas que la pantalla de maximize o minimize siempre todo lo que esta dentro del contenedor estara en la misma posicion, ya que lo hace en funcion del contenedor. Tambien el contenedor tiene que tener heigth y wildht que no sea con %, porque al minimizar el contenedor cambiara de tamaño y ahi tendras problemas con lo que este dentro del contenedor, yo le daria tamaños fijos tanto de ancho como de alto

Saludos
  #3 (permalink)  
Antiguo 25/04/2010, 13:23
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Menu fijo en Pagina

Cita:
Iniciado por ipraetoriux Ver Mensaje
Estimado, yo pondria una capa contenedora, dentro de la misma estarian todos los elementos, y a cada elemento le daria un position:absolute; asi siempre tomaran como referencia de posicionamiento un lugar fijo en funcion del contenedor, de esa forma, por mas que la pantalla de maximize o minimize siempre todo lo que esta dentro del contenedor estara en la misma posicion, ya que lo hace en funcion del contenedor. Tambien el contenedor tiene que tener heigth y wildht que no sea con %, porque al minimizar el contenedor cambiara de tamaño y ahi tendras problemas con lo que este dentro del contenedor, yo le daria tamaños fijos tanto de ancho como de alto
mmmm no hay necesidad de usar position:absolute, basta con un div al 100% como ya lo tienes para simular el fondo y otro div centrado normalmente con medidas fijas (px) para que no pase esto, o tambien tenemos los altos y anchos minimos y maximos, o igual te vale co nun solo div centrado horizontalmente y verticalmente con una imagen de bg de ese tamaño.. enfin hay muchas maneras y de que se vea bien siempre y haciendolo como debe ser
  #4 (permalink)  
Antiguo 25/04/2010, 13:27
 
Fecha de Ingreso: abril-2010
Mensajes: 40
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu fijo en Pagina

Muchas gracias por responder, cambiando los % por px se me soluciono
muchas gracias

Etiquetas: imagenes
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 19:48.