Foros del Web » Creando para Internet » CSS »

CAPAS dentro de otras capas

Estas en el tema de CAPAS dentro de otras capas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/03/2011, 13:26
 
Fecha de Ingreso: octubre-2009
Mensajes: 103
Antigüedad: 8 años, 1 mes
Puntos: 2
CAPAS dentro de otras capas

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
  #2 (permalink)  
Antiguo 15/03/2011, 13:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CAPAS dentro de otras capas

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)
  #3 (permalink)  
Antiguo 15/03/2011, 14:08
 
Fecha de Ingreso: octubre-2009
Mensajes: 103
Antigüedad: 8 años, 1 mes
Puntos: 2
Respuesta: CAPAS dentro de otras capas

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?
  #4 (permalink)  
Antiguo 15/03/2011, 17:03
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: CAPAS dentro de otras capas

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
  3. <title>Título</title>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.  
  6. <style type="text/css">
  7. <!--
  8. #contenedor {
  9.    background:#FFFF00;
  10.    width: 800px;
  11.    height:800px;
  12. }
  13. #menu {
  14.    background:#00FF00;
  15.    float: left;
  16.    position: relative;
  17.    width:300px;
  18.    height:300px;
  19. }
  20. #menu1 {
  21.    background:#00FFFF;
  22.    width: 300px;
  23.    height: 150px;
  24.    position: absolute;
  25. }
  26. #menu2 {
  27.    background:#FF00FF;
  28.    height: 150px;
  29.    width: 300px;
  30.    top:150px;
  31.    position: absolute;
  32. }
  33. #contenido {
  34.    background:#FF0000;
  35.    float: left;
  36.    height: 600px;
  37.    width:300px;
  38. }
  39.  
  40. -->
  41. </head>
  42.  
  43. <div id="contenedor">
  44. <div id="menu">
  45. <div id="menu1"></div>
  46. <div id="menu2"></div>
  47. </div>
  48. <div id="contenido"></div>
  49. </div>
  50. </body>
  51. </html>
  #5 (permalink)  
Antiguo 15/03/2011, 18:51
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: CAPAS dentro de otras capas

Cita:
Iniciado por sanxuan Ver Mensaje
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
  3. <title>Título</title>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.  
  6. <style type="text/css">
  7. <!--
  8. #contenedor {
  9.    background:#FFFF00;
  10.    width: 800px;
  11.    height:800px;
  12. }
  13. #menu {
  14.    background:#00FF00;
  15.    float: left;
  16.    position: relative;
  17.    width:300px;
  18.    height:300px;
  19. }
  20. #menu1 {
  21.    background:#00FFFF;
  22.    width: 300px;
  23.    height: 150px;
  24.    position: absolute;
  25. }
  26. #menu2 {
  27.    background:#FF00FF;
  28.    height: 150px;
  29.    width: 300px;
  30.    top:150px;
  31.    position: absolute;
  32. }
  33. #contenido {
  34.    background:#FF0000;
  35.    float: left;
  36.    height: 600px;
  37.    width:300px;
  38. }
  39.  
  40. -->
  41. </head>
  42.  
  43. <div id="contenedor">
  44. <div id="menu">
  45. <div id="menu1"></div>
  46. <div id="menu2"></div>
  47. </div>
  48. <div id="contenido"></div>
  49. </div>
  50. </body>
  51. </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.
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #6 (permalink)  
Antiguo 15/03/2011, 18:59
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: CAPAS dentro de otras capas

Cita:
Iniciado por rulzzz Ver Mensaje
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"
  #7 (permalink)  
Antiguo 16/03/2011, 08:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CAPAS dentro de otras capas

Cita:
Iniciado por rulzzz Ver Mensaje
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)
  #8 (permalink)  
Antiguo 16/03/2011, 13:34
 
Fecha de Ingreso: octubre-2009
Mensajes: 103
Antigüedad: 8 años, 1 mes
Puntos: 2
Respuesta: CAPAS dentro de otras capas

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
  #9 (permalink)  
Antiguo 16/03/2011, 13:47
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: CAPAS dentro de otras capas

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/

Etiquetas: capas
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 23:24.