div fijo

[juancile]

Hola!.
Estoy haciendo mi pagina y teno el menu principal que es horizontal y esta ubicado en la parte superior de la pantalla y centrada.

Quisiera que esta quede fija al hacer scroll y por encima de los demas divs, y que al seleccionar un item se dirija al sector respectivo de la pantalla, como se hace en esta pagina.

Mi codigo HTML:

Código HTML:

<div id="menu">
    	<div id="logo"><img src="imgs/logo.gif" /></div>
    	<ul>
    	<li><a href="#">Trabajos</a></li>
    	<li><a href="#">Servicios</a></li>
    	<li><a href="#">Contacto</a></li>
	</ul>
                <div id="flecha"><a href="#"><img src="imgs/flecha.gif" alt="Subir"/></a></div>
</div> 

Mi codigo CSS:

Código HTML:

#menu{
	width:718px;
	height:42px;
	border:1px solid #FFF;
	background-color:#0e283f;
	padding:0;
	margin:0 auto;
	margin-top:-1px;
	text-align:center;
	position:fixed;
}
#menu ul{
    list-style:none;
    margin:2px;
    padding:10px;
}
#menu ul li {
    float:left;
    padding-left:15px;
    padding-right:15px;
}
#menu ul li a{
    font-size:18px;
    text-decoration:none;
    color:#FFF;
    font-weight:bold;
}
#menu ul li a:hover{
    color:#C1EAFF;
}
#logo{
	float:left;
	margin-left:20px;
	margin-right:160px;
	height:32px;
	width:188px;
	padding:10px 0 0 0;
	display:inline;
}
#flecha{
	float:right;
	height:42px;
	width:53px;
	margin:-30px 0 0 0;
	padding:0;
	display:inline;
}

Le aplique "position:fixed;" para que quede fijo pero en IE me queda a la izquierda y hay divs que quedan por encima del menu.
Tambien me gustaria saber como lograr el efecto cuando se hace click de la pagina mencionada.

Muchas graciasssssssss!.

[C2am]

Para que quede por encima del resto aplica a #menu un z_index:100 o un valor mayor al que uses en otros div.

Para ir a una parte especifica de la página busca "anclas html", que basicamente es poner:
<a name="punto"><b>Este es el punto donde quiero ir del documento!!</b></a>
En realidad solo es necesario: <a name="punto"></a>.
Creo que era así, investiga un poco por si estoy equivocado

[juancile]

Buenisimo. Ahora el menu esta por encima de todo. Solo que me queda en la parte superior Izquierda de la pantalla, y yo lo necesito CENTRADO.
A que se debe esto?.

Y en IE6 no queda fijo, parece que position:fixed no da resultado.

[cristian_cena]

Puedes mirar este ejemplo de mikmoro:
http://www.araudi.net/ejemplos/fondo_fijo_IE.html

Saludos!

[juancile]

Hola Cristian. Me podes explicar que es lo que hace "scroll left bottom" en tu ejemplo?.

[cristian_cena]

Hola juancile, no se a que te refieres con "scroll left bottom" pues este es el css del ejemplo, que por cierto no es mío sino de mikmoro:

* {margin:0; padding:0;}
html, body {width:100%;
height:100%;
overflow:hidden;
background: url(../img/bloque.png) no-repeat bottom left;
}
#contenido {width:100%;
height:100%;
color: #f00;
overflow: auto; /*estimo que aquí está el truco, al darle que se vea la barra de scroll a partir de un div y no del body*/
}

Para centrar horizontalmente un <div id="mi_div"> hazlo así: #mi_div {margin:0 auto;}

Saludos!

[C2am]

Para que quede por encima del resto aplica a #menu un z_index:100 o un valor mayor al que uses en otros div.

Me parece que meti mal el dedito: es z-index no z_index,
Aunque me parece que ya te diste cuenta

[jomaruro]

Hola:

Iniciado por juancile

Hola Cristian. Me podes explicar que es lo que hace "scroll left bottom" en tu ejemplo?.

Lo más parecido a lo que dices es esto:

Código:

html, body {
width:100%; 
height:100%; 
overflow:hidden; 
background: url(../img/bloque.png) no-repeat bottom left;
}

pero no veo nada de scroll.

Por si es eso te dire que el backgroud del html no se repite y está en el pie de la página a la izquierda, es decir son las indicaciones para colocar la imagen del fondo de la página.

Saludos.

[juancile]

Gracias a todos por responder!.

Mi problema sigue siendo que el #menu no queda centrado en pantalla, sino alineado a la izquierda. Aún con margin: 0 auto;

Vuelvo a poner mi CSS:

Código HTML:

/* Menú */
#menu{
	width:718px;
	height:42px;
	border:1px solid #FFF;
	background-color:#0e283f;
	padding:0;
	margin:0 auto;
	margin-top:-1px;
	position:fixed;
	z-index:100;
	overflow:hidden;
}
#menu ul{
    list-style:none;
    margin:2px;
    padding:10px;
}
#menu ul li {
    float:left;
    padding-left:15px;
    padding-right:15px;
}
#menu ul li a{
	font-size:18px;
    text-decoration:none;
    color:#FFF;
    font-weight:bold;
}
#menu ul li a:hover{
    color:#C1EAFF;
}
#logo{
	float:left;
	margin-left:20px;
	margin-right:160px;
	height:32px;
	width:188px;
	padding:10px 0 0 0;
	display:inline;
}
#flecha{
	float:right;
	height:42px;
	width:53px;
	margin:-30px 0 0 0;
	padding:0;
	display:inline;
}

Que sera??

[cristian_cena]

juancile postea tu codigo html también.

#menu{
...
margin-top:-1px; /*esto esta de más*/
...
}

<div id="menu">aquí tu menú</div>

incluye un reset en tus estilos, puede ser el básico *{margin:0; padding:0;}

Saludos!

[Mikmoro]

Iniciado por juancile

Que sera??

Esto:

#menu{
width:718px;
height:42px;
border:1px solid #FFF;
background-color:#0e283f;
padding:0;
margin:0 auto;
margin-top:-1px;
position:fixed;
z-index:100;
overflow:hidden;
}

La posición fixed no permite que centres una caja con margin auto (además de que ya te han comentado que no funcionará en IE6, ofreciéndote otras alternativas).

[juancile]

Hola Mikmoro.
El fixed lo necesito porque quiero que el menu quede fijo cuando hago scroll. No vi que se comento que no funciona en IE6, hay algo que pueda reemplazar esto en IE6?.
Gracias.

[Mikmoro]

Hola.
En el mensaje #2, tú mismo dices:

"Y en IE6 no queda fijo, parece que position:fixed no da resultado."

¿No lo recuerdas? ¿lo escribiste y se te olvidó?

En el #4 cristian_cena te ofrece un enlace a una solución que consigue el mismo efecto y que es compatible con IE6.
Le preguntaste qué era "scroll left bottom" , te respondió y como si no hubiera dicho nada, no le hiciste ni responder.

[jomaruro]

Hola:

Es lo que hay.

Saludos.

[juancile]

Gracias a todos por su ayuda!.
Saludos!.

[juancile]

Amigos.
Les cuento que solucione el problema mediante este codigo:

Código HTML:

#menu{
	width:718px;
	height:42px;
	border:1px solid #FFF;
	background-color:#0e283f;
	padding:0;
	margin:0 auto;
	margin-top:-1px;
	position:fixed;
	z-index:100;
	left:50%;
	margin-left:-361px;
}

El secreto es este: left:50%; margin-left:-361px;

Lo unico que no funciona para IE6.

[cristian_cena]

Que bueno que lo hayas solucionado! me parece juancile que el unico modo de engañar a IE6 es con el truco de Mikel. Al menos yo no conozco otro modo. Saludos!