Foros del Web » Creando para Internet » CSS »

Menu Fijo Header

Estas en el tema de Menu Fijo Header en el foro de CSS en Foros del Web. Gente . . . estoy modificando una plantilla de WP en la que tengo una imagen de fondo en body que ocupa toda la pantalla ...
  #1 (permalink)  
Antiguo 05/05/2010, 06:08
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Menu Fijo Header

Gente . . .

estoy modificando una plantilla de WP en la que tengo una imagen de fondo en body que ocupa toda la pantalla . . . .

para que se den una idea mejor de lo que estoy haciendo pueden entrar a ACA y ver como esta dispuesta.

basicamente la imagen de fondo que quiero que se vea, llega a los 450px de ancho, lo demas de la imagen, es puro fondo inutil . . .


como veran, tengo elimine todos los menu´s

la idea es que en la parte de arriba, de la div que tengo el contenido del blog . .este el menu . . no hay problema con esto . . . hago una div, lo coloco arriba, y queda, hasta ahi estoy ok...

La pregunta ( en la que espero me puedan ayudar ) es la siguiente . . yo quiero que esa div . . pongamosle, #menu . . . me quede fija . . osea, siempre visible . . .
se que es posible, lo he visto alguna que otra vez en alguna que otra pagina,

ahora les dejo como tendria el menu yo diagramado en css a ver si me peuden orientar de como hacerlo para que solo el menu quede fijo y lo demas se scrolee


body {
background:url(images/bg_total.jpg) fixed left 0;
text-align: right;
float:left;
margin: 0 0 0 500px;
}

#page {
text-align: right;
margin: 0px 0px;
width: 400px;
_width: 400px;
}

#menu_fijo {
width: 400px;
height:53px;
margin: 0;
padding: 0;
}

#resto_blog {
width: 400px;
margin: 0;
padding: 0;
}


y el codigo vendria a ser asi . . .

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MI BLOG</title>
</head>

<body>
<div id="page">


<div id="menu_fijo">
(aca adentro el menu que tiene 400 x 50 - este)
( todo lo que esta dentro de esta div, tendria que quedar fijo y todo el resto del blog, tendria que moverse )
</div>


<div id="resto_blog">
aca todo el blog
</div>


</div> (cierro div page)

</body>
</html>


espero puedan ayudarme y desde ya muchas gracias

Leito
__________________
que fea firma que tenia... prefiero tener esto
  #2 (permalink)  
Antiguo 05/05/2010, 06:43
Avatar de linternazo  
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu Fijo Header

Cita:
como veran, tengo elimine todos los menu´s

la idea es que en la parte de arriba, de la div que tengo el contenido del blog . .este el menu . . no hay problema con esto . . . hago una div, lo coloco arriba, y queda, hasta ahi estoy ok...

La pregunta ( en la que espero me puedan ayudar ) es la siguiente . . yo quiero que esa div . . pongamosle, #menu . . . me quede fija . . osea, siempre visible . .
Yo lo siento nen, pero no te entiendo nada...
  #3 (permalink)  
Antiguo 05/05/2010, 06:55
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Menu Fijo Header

gracias por responder . . si entras a www.leobenz.com.ar

fijate el menu que esta hecho en flash en la parte derecha superior . .

me gustaria que cuando se escrolee quede siempre visible, o sea, que lo de abajo corra pero el menu quede fijo en la posicion que esta apenas se abre la web . .

se entiende un poco mejor?
__________________
que fea firma que tenia... prefiero tener esto
  #4 (permalink)  
Antiguo 05/05/2010, 07:00
Avatar de linternazo  
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu Fijo Header

Ammmmm ok ok. Perdona, no lo había entendido.

Eso se hace con la propiedad position: fixed;


Echale un ojo a este link con info:

http://www.w3schools.com/css/pr_class_position.asp
  #5 (permalink)  
Antiguo 05/05/2010, 07:06
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Menu Fijo Header

como lo aplico al estilo . . porque le di la propiedad, pero ningun resultado

gracias desde yaaaaaaaaaaa

mcuash graciias
__________________
que fea firma que tenia... prefiero tener esto
  #6 (permalink)  
Antiguo 05/05/2010, 08:10
Avatar de linternazo  
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu Fijo Header

Péganos el codigo nuevo, a ver que puede ser.
  #7 (permalink)  
Antiguo 05/05/2010, 08:12
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Menu Fijo Header

estoy haciendo unas chanchadas con ese codigo.. que es terrible . . ahora respondo completo con el codigo
__________________
que fea firma que tenia... prefiero tener esto
  #8 (permalink)  
Antiguo 05/05/2010, 08:12
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Menu Fijo Header

body {
background:url(images/bg_total.jpg) fixed left 0;
text-align: right;
float:left;
margin: 0 0 0 500px;
}

#page {
text-align: right;
margin: 0px 0px;
width: 400px;
_width: 400px;
}

#menu_fijo {
width: 400px;
height:53px;
margin: 0;
padding: 0;
}

#resto_blog {
width: 400px;
margin: 0;
padding: 0;
}




<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MI BLOG</title>
</head>

<body>
<div id="page">


<div id="menu_fijo">
(aca adentro el menu que tiene 400 x 50 - este)
( todo lo que esta dentro de esta div, tendria que quedar fijo y todo el resto del blog, tendria que moverse )
</div>


<div id="resto_blog">
aca todo el blog
</div>


</div> (cierro div page)

</body>
</html>
__________________
que fea firma que tenia... prefiero tener esto
  #9 (permalink)  
Antiguo 05/05/2010, 08:31
Avatar de linternazo  
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu Fijo Header

Emm... te he hablado de position:fixed; pero tú no lo has usado en ningún momento....

Suerte y tal.
  #10 (permalink)  
Antiguo 05/05/2010, 08:33
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Menu Fijo Header

a vos queres el codigo que hice yo ?

yo pense que el coigo inicial . . .

ahora te paso el codigo, tal como lo tengo ahora
__________________
que fea firma que tenia... prefiero tener esto
  #11 (permalink)  
Antiguo 05/05/2010, 08:35
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Menu Fijo Header

aca esta el codigo como lo tengo ahora . . .

---------------------------------


#page {
text-align: right;
margin: 0px 0px;
width: 400px;
}

#menu_fijo {
position:fixed;
left:500px;
top:0px;
bottom:0px;
text-align:left;
width: 400px;
padding:0;
margin:0px 0px 20px 0px;
}

#resto blog {
position: relative;
left:0px;
top:0px;
width: 400px;
padding:0;
margin:0;
background: #99FF00;
}



-----------------------



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MI BLOG</title>
</head>

<body>
<div id="page">


<div id="menu_fijo">
(aca adentro el menu que tiene 400 x 50 - este)
( todo lo que esta dentro de esta div, tendria que quedar fijo y todo el resto del blog, tendria que moverse )
</div>


<div id="resto_blog">
aca todo el blog
</div>


</div> (cierro div page)

</body>
</html>
__________________
que fea firma que tenia... prefiero tener esto

Etiquetas: fijo, header
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 07:31.