CAPAS dentro de otras capas

rulzzz · #1 (**permalink**) 15/03/2011, 12:26

buenas, tengo una configuracion de capas como la de esta imagen:

Digamos que la capa externa de la izquierda es MENU, y las dos interiores SUBMENU1 y SUBMENU2. la de la derecha seria CONTENIDO

Entonces la capa MENU, y los 2 submenus interiores tienen position:relative y float:left ............ y de esta forma se me ve bien.

El problema es que quiero que los dos SUBMENUS tengan position:absolute, el caso es que al hacer eso la capa CONTENIDO se pone encima de todo el menu(lo sobreescribe).

¿ Como hago para que, a pesar de que las dos capas SUBMENU sean absolute, si la externa MENU es relative, que no sea sobreescrita ? He probado a asignarle un tamaño fijo pero tampoco funciona

kseso? · #2 (**permalink**) 15/03/2011, 12:46

Esa es la típica y vieja conocida estructura de dos columnas. Hay infinidad de ejemplos en la red.
Mire a ver si entre estos 715 encuentra el suyo y compare/estudie las diferencias con su código
http://designshack.co.uk/articles/cs...ee-css-layouts

P.D.: en css NO existen las capas. Esa es terminología de photoshoperos y cebolleros (entiéndase que me refiero a quienes se dedican al cultivo o comercialización de las cebollas)

rulzzz · #3 (**permalink**) 15/03/2011, 13:08

antes de preguntar estube buscando ejemplos, la cuestion es que hay miles y los pocos que vi todos ponian la capas de MENU como "RELATIVE". Otra opcion es poner todo como absolute y colocarlo con los margenes.

Pero yo lo que quiero es alguna manera de que una capa "relative" poder adjudicarle un tamaño para que no sea sobrepuesta aunque sus capas interiores sean "absolute".

PD: veo mas logico llamar capa que llamar directamente DIV no? :S, o hay alguna otra forma de llamarlo en español?

sanxuan · #4 (**permalink**) 15/03/2011, 16:03

Si pones el css y el HTML quizás podamos ayudar mejor. Yo no veo razones para que no funcione lo que dices que has hecho.
Te muestro un ejemplo que reproduce el esquema que indicas:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Título</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
<style type="text/css">
<!--
#contenedor {
    background:#FFFF00;
    width: 800px;
    height:800px;
}
#menu {
    background:#00FF00;
    float: left;
    position: relative;
    width:300px;
    height:300px;
}
#menu1 {
    background:#00FFFF;
    width: 300px;
    height: 150px;
    position: absolute;
}
#menu2 {
    background:#FF00FF;
    height: 150px;
    width: 300px;
    top:150px;
    position: absolute;
}
#contenido {
    background:#FF0000;
    float: left;
    height: 600px;
    width:300px;
}
 
-->
</style>
</head>
 
<body>
<div id="contenedor">
<div id="menu">
<div id="menu1"></div>
<div id="menu2"></div>
</div>
<div id="contenido"></div>
</div>
</body>
</html>

mtreik · #5 (**permalink**) 15/03/2011, 17:51

Cita:

Iniciado por sanxuan

Si pones el css y el HTML quizás podamos ayudar mejor. Yo no veo razones para que no funcione lo que dices que has hecho.
Te muestro un ejemplo que reproduce el esquema que indicas:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Título</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
<style type="text/css">
<!--
#contenedor {
    background:#FFFF00;
    width: 800px;
    height:800px;
}
#menu {
    background:#00FF00;
    float: left;
    position: relative;
    width:300px;
    height:300px;
}
#menu1 {
    background:#00FFFF;
    width: 300px;
    height: 150px;
    position: absolute;
}
#menu2 {
    background:#FF00FF;
    height: 150px;
    width: 300px;
    top:150px;
    position: absolute;
}
#contenido {
    background:#FF0000;
    float: left;
    height: 600px;
    width:300px;
}
 
-->
</style>
</head>
 
<body>
<div id="contenedor">
<div id="menu">
<div id="menu1"></div>
<div id="menu2"></div>
</div>
<div id="contenido"></div>
</div>
</body>
</html>

Yo mismo iba a poner un ejemplo como este realizando lo que comentas, ya que yo he implementado muchas veces ese esquema con las características que indicas y no me ha dado ningún problema como el que comentas. Espero que el compañero te haya ayudado con su ejemplo.

alexk · #6 (**permalink**) 15/03/2011, 17:59

Cita:

Iniciado por rulzzz

PD: veo mas logico llamar capa que llamar directamente DIV no? :S, o hay alguna otra forma de llamarlo en español?

hombre, lo mas logico es llamar las cosas por su nombre div=div.... de "division/divisiones"

kseso? · #7 (**permalink**) 16/03/2011, 07:38

Cita:

Iniciado por rulzzz

antes de preguntar estube buscando ejemplos, la cuestion es que hay miles y los pocos que vi todos ponian la capas de MENU como "RELATIVE"<--¿y no le hizo pensar que habrá alguna poderosa razón para ello?. Otra opcion es poner todo como absolute y colocarlo con los margenes.

Pero yo lo que quiero es alguna manera de que una capa "relative" poder adjudicarle un tamaño para que no sea sobrepuesta aunque sus capas interiores sean "absolute".<-- ¿y qué se lo impide? Dos cajas en "relative" ya no se solapan, con independencia de lo que contengan y cómo lo contengan. Otra cosa es que altere sus propiedades intrínsecas definiendo propiedades/valores que no debería.

PD: veo mas logico llamar capa que llamar directamente DIV no? <--Me recuerda al chiste del "vete al federico y trae una cerveza". Puede usted llamarlo como le apetezca, que la estándares y convenciones ¿pa qué? :S, o hay alguna otra forma de llamarlo en español?<-- desde su lógica, abra el diccionario por cualquier página, que cualquier vocablo será válido

Veamos su estructura de colorines ¿no la encontró en ningún layout? Rojo y verde con position relative y flotadas y las naranjas a su gusto (position absolute)

rulzzz · #8 (**permalink**) 16/03/2011, 12:34

pues el fallo era una tonteria, en la capa MENU en vez de poner "heigh:500px" puse "Height:500" sin el PX..... ........ y como era la primera vez que usaba una estructura de ese tipo pues pense que lo estaba haciendo mal en vez de pensar que era un fallo de gramatica :(

voy a tener que usar un editor que detecte los fallos de gramatica para no perder tiempo en esas chorradas, aunque ahora uso el dreamweaver que para recordarme algunas funciones de CSS viene bien, pero no me indica cuando hay un fallo... al menos la version que yo uso.

en fin, gracias a todos

sanxuan · #9 (**permalink**) 16/03/2011, 12:47

La mejor posibilidad para comprobar los fallos en el HTML y el CSS es usar los validadores del w3c.
http://validator.w3.org
http://jigsaw.w3.org/css-validator/