Foros del Web » Creando para Internet » CSS »

div fijo

Estas en el tema de div fijo en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 19/10/2009, 21:16
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
div fijo

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!.
  #2 (permalink)  
Antiguo 19/10/2009, 22:34
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: div fijo

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 20/10/2009, 07:19
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: div fijo

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.
  #4 (permalink)  
Antiguo 20/10/2009, 11:23
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: div fijo

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

Saludos!
  #5 (permalink)  
Antiguo 20/10/2009, 12:33
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: div fijo

Hola Cristian. Me podes explicar que es lo que hace "scroll left bottom" en tu ejemplo?.
  #6 (permalink)  
Antiguo 20/10/2009, 13:12
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: div fijo

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!
  #7 (permalink)  
Antiguo 20/10/2009, 13:16
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: div fijo

Cita:
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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #8 (permalink)  
Antiguo 20/10/2009, 15:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: div fijo

Hola:

Cita:
Iniciado por juancile Ver Mensaje
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.

  #9 (permalink)  
Antiguo 20/10/2009, 16:36
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: div fijo

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??
  #10 (permalink)  
Antiguo 20/10/2009, 17:41
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: div fijo

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!
  #11 (permalink)  
Antiguo 20/10/2009, 18:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: div fijo

Cita:
Iniciado por juancile Ver Mensaje
Que sera??
Esto:
Cita:
#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).
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 21/10/2009, 10:07
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: div fijo

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.
  #13 (permalink)  
Antiguo 21/10/2009, 11:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: div fijo

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.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 21/10/2009, 14:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: div fijo

Hola:

Es lo que hay.

Saludos.

  #15 (permalink)  
Antiguo 22/10/2009, 16:23
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: div fijo

Gracias a todos por su ayuda!.
Saludos!.
  #16 (permalink)  
Antiguo 22/10/2009, 16:40
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: div fijo

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.
  #17 (permalink)  
Antiguo 22/10/2009, 20:24
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: div fijo

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!
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 15:11.