Comunidad de diseño web y desarrollo en internet online

menu "fixed" vs contenido

Citar            
MensajeEscrito el 12 Dic 2006 03:18 pm
Estoy haciendo una web en XHTML y CSS y le he creado un menu dentro de la cabecera, al estilo del que hay aqui en cristalab para que os hagais a la idea. La diferencia radica en que quiero que este menu este siempre visible en la parte superior del navegador, aunque subas y bajes con la barra de desplazamiento.

He conseguido que este menu se quede donde quiero haciendo una caja con "position:fixed" pero al hacer esto, la caja que contiene el contenido de la seccion se mete debajo del menu...hay alguna forma de conseguir que esto no suceda usando XHTML y CSS solamente?

Os dejo un crokis de como es la web:

Código :

<body>
<div id="CabeceraMenu">
<h1> Titulo de la web</h1>
<div id="menu">
<ul>
    <li>las diferentes secciones</li>
</ul>
</div>
</div>
<div id="contenido">
<p>El que toque en cada seccion</p>
</div>
</body>


y el CSS:

Código :

#CabeceraMenu {
position:fixed;
margin: 0 auto;
padding:0px;
top:0px;
}

#contenido {
margin:0px;
padding: 10px;
}


como hago para que no se meta debajo? he pensado en hacer a contenido "position:fixed" tb, pero al hacer eso no me aparece la barra de desplazamiento vertical en el navegador

Por noctam

Claber

197 de clabLevel



 

firefox
Citar            
MensajeEscrito el 12 Dic 2006 06:25 pm
Yo hice lo mismo ensayando con CSS, aquí está. Me pasó lo mismo y lo solucioné de manera sencilla.

En tu caso:

Código :

#CabeceraMenu {
  position:fixed;
  margin: 0 auto;
  padding:0;
  top:0;
  height:160px; /* El tamaño que quieras que tenga la cabecera */
}
#contenido {
  margin:0;
  padding:10px;
  top:170px; /* 160px de la altura de CabeceraMenu + los 10px del padding (Y si hubiera margin y border tambien se suman) */
}


Lo del top en #contenido soluciona el problema.

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 12 Dic 2006 07:58 pm
Para que la capa no se meta debajo usa esta propiedad, con ese valor por ejemplo:
z-index:99;
Y a "contenido" tienes que darle un margin-top suficiente para que le de espacio a "CabeceraMenu" y sea tapado por este, también un position:absolute (creo), para que el margin funcione, por cierto este sistema te funcionara en exploradores decentes, pero por desgracia el IE es algo bruto con esto del posicionamiento y no lo entenderá... así que debes implementar un hack, coloca estas dos propiedasdes al final del estilo de #CabeceraMenu:
_position: absolute;
_top: expression((dummy = document.documentElement.scrollTop) + "px");
con este par de instrucciones ya debería funcionar el fixed en IE también, Saludos

PD: ryuz... quise ver ese sitio en IE y casi me quedo ciego con la alerta... cielos... ten cuidado los colores, son peligrosos jejeje... quítale por favor un poco de radioactividad a esa advertencia, ya sé que es por el bien del usuario, pero es bastante intrusiva, y el color con el contraste del fondo es... arrgg mis ojos.

Por EmiR

Claber

678 de clabLevel

2 tutoriales

Genero:Masculino   Héroes

firefox
Citar            
MensajeEscrito el 14 Dic 2006 06:33 pm

EmiR escribió:

PD: ryuz... quise ver ese sitio en IE y casi me quedo ciego con la alerta... cielos... ten cuidado los colores, son peligrosos jejeje... quítale por favor un poco de radioactividad a esa advertencia, ya sé que es por el bien del usuario, pero es bastante intrusiva, y el color con el contraste del fondo es... arrgg mis ojos.


No lo haré porque es sólo una preuba. aunque lo tendré en cuenta pra futuras ocasiones.

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 15 Dic 2006 12:27 am
el problema lo hallo de facil solución ¿pero conviene hacerlo de este modo?
tener el menu siempre visible le quita espacio a tu web, en el caso de ryuz le quita exactamente 120px, no te recomiendo hacer esto si pretendes mostrar mucha información, de echo es casi lo mismo que usar frame(solo que es un poco menos malo) de todos modos si tienes una idea muy clara puedes seguir el ejemplo de mi idolo http://www.cssplay.co.uk/layouts/frame.html eso es un ejemplo por lo que si ves el codigo fuente te muestra el css con el que lo logro, repito es mi idolo :alabado:

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.