posicionar un menu debajo de la web

esebayolo · #1 (**permalink**) 25/01/2012, 04:32

Hola, antes que anda decir que soy novato en el mundo de las webs. Estoy intentanto construir una web con una parte principal(naranja) y dos menús(grises), unos superior y otro inferior(adjunto imagen). El tema sería que pinchando en el menú superior cambiaría lo que se muestra en la parte principal, y el menú inferior sería siempre el mismo.
Ya he conseguido posicionar la parte principal y el menú superior como quería, el problema es que no doy puesto el menú inferior justo debajo de la parte principal...¿alguna ayuda?

Gracias.

HTML:

Código HTML:

<body>

<div id="superior">
	<div id="cuerpo">
   
                AQUI IRÍA LA PARTE PRINCIPAL
        
	</div>
</div> 
       
<div id="inferior">
    <footer>

        AQUI IRÍA EL MENU INFERIOR

    </footer>
</div>

<header>
    
   AQUI IRÍA EL MENU SUPERIOR
        
</header>     
    
</body>

CSS:

Código:

body {
	margin: 0px;
	padding: 0px;
}
#superior {
	margin: 0px;
	padding: 0px;
}
#cuerpo {
	position: absolute; /* Para centrarlo */
	left: 50%; /* lo coloco en el centro */
	margin-left: -475px; /* y le doy la mitad del ancho */
	padding: 0px;
}
#inferior {
	margin: 0px;
	padding: 0px;
}
footer {
	background: url(fondos/headerH.png) repeat scroll 0 0 transparent;
	width: 100%;
	height: auto;
	position: relative;
}
header {
	background: url(fondos/headerH.png) repeat scroll 0 0 transparent;
	position: absolute;
	height: 10mm;
	width: 100%;
	top: 5mm;
}

EDITO: Bueno lo que no he dicho es que así lo que hace es ponerme el menú inferior más o menos a la altura del superior

madhatterdef · #2 (**permalink**) 25/01/2012, 08:24

puedes probar con clear:both;

esebayolo · #3 (**permalink**) 25/01/2012, 09:17

le pongo a #inferior clear: both; pero me sigue apareciendo en la parte de arriba...casi encima del header

Gracias

C2am · #4 (**permalink**) 25/01/2012, 09:27

A ver que te parece esta versión:

Código CSS:

Ver originalbody {
    margin: 0px;
    padding: 0px;
}
#superior {
    width:95%; /* menor a 100% para que no aparezca el scroll por el borde de 4px */
    height:50px;
    position:relative;
    margin: 25px auto 0px; /*margen top para bajarlo un poco, auto para centrarlo */
    padding: 0px;
    border:4px solid #000;
    text-align:center;
    background-color:#CCC;
    z-index:50; /* tiene que ser más grande que el del cuerpo*/
}
#cuerpo {
    position:relative; 
    margin: -80px auto 0px; /*top -80 para subirlo , auto para centrar*/
    padding: 80px 0px 0px; /*top para que el contenido no quede oculto por #superior */
    width:75%; 
    border:4px solid #000;
    height:400px;
    background-color:#F60;
    text-align:center;
    
}
#inferior {
    width:95%; /* menor a 100% para que no aparezca el scroll por el borde de 4px */
    height:150px;
    margin: 0 auto;
    padding: 0px;
    background-color:#CCC;
    border:4px solid #000;
    text-align:center;
}

Código HTML:

Ver original<body>
 
<div id="superior">
    <header>
    
        AQUI IRÍA EL MENU SUPERIOR
            
    </header>   
</div>
 
 
<div id="cuerpo">
   
        AQUI IRÍA LA PARTE PRINCIPAL       
 
</div>
 
       
<div id="inferior">
    <footer>
 
        AQUI IRÍA EL MENU INFERIOR
 
    </footer>
</div>
 
  
    
</body>

El html un poco más ordenado: Superior - Cuerpo - Inferior , para mejor comprensión del código.

Aquí el Ejemplo en vivo y casi directo

Saludos

madhatterdef · #5 (**permalink**) 25/01/2012, 09:28

proba dejándolo y quitando el position: relative;

esebayolo · #6 (**permalink**) 25/01/2012, 10:14

Muchas gracias, me habéis sido de gran ayuda!