Menu Fijo Header

lbenz · #1 (**permalink**) 05/05/2010, 05:08

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

linternazo · #2 (**permalink**) 05/05/2010, 05:43

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...

lbenz · #3 (**permalink**) 05/05/2010, 05:55

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?

linternazo · #4 (**permalink**) 05/05/2010, 06:00

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

lbenz · #5 (**permalink**) 05/05/2010, 06:06

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

gracias desde yaaaaaaaaaaa

mcuash graciias

linternazo · #6 (**permalink**) 05/05/2010, 07:10

Péganos el codigo nuevo, a ver que puede ser.

lbenz · #7 (**permalink**) 05/05/2010, 07:12

estoy haciendo unas chanchadas con ese codigo.. que es terrible . . ahora respondo completo con el codigo

lbenz · #8 (**permalink**) 05/05/2010, 07:12

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>

linternazo · #9 (**permalink**) 05/05/2010, 07:31

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

Suerte y tal.

lbenz · #10 (**permalink**) 05/05/2010, 07:33

a vos queres el codigo que hice yo ?

yo pense que el coigo inicial . . .

ahora te paso el codigo, tal como lo tengo ahora

lbenz · #11 (**permalink**) 05/05/2010, 07:35

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>