Foros del Web » Creando para Internet » CSS »

problema con crecimiento de capaz

Estas en el tema de problema con crecimiento de capaz en el foro de CSS en Foros del Web. hola, me gustaria que me ayudaran con esto. tengo tres divs, de los cuales uno es el contenedor y los otros dos estan dentro del ...
  #1 (permalink)  
Antiguo 01/06/2009, 08:52
 
Fecha de Ingreso: mayo-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
problema con crecimiento de capaz

hola, me gustaria que me ayudaran con esto.

tengo tres divs, de los cuales uno es el contenedor y los otros dos estan dentro del mismo. que son A y B.

lo que quiero hacer es que si coloco algo dentro de A que supere su tamaño (alto) este cresca y que al crecer A, B se mueva hacia abajo y el contenedor tambien cresca lo mismo que crecio A para guardar las proporciones.

espero haberme explicado bien y muchas gracias por su tiempo

Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#contenedor {
	position:absolute;
	left:34px;
	top:34px;
	width:679px;
	height:298px;
	z-index:1;
	background-color: #00FFFF;
}
#A {
	position:absolute;
	left:45px;
	top:42px;
	width:583px;
	height:170px;
	z-index:2;
	background-color: #CC0000;
}
#B {
	position:absolute;
	left:45px;
	top:214px;
	width:582px;
	height:50px;
	z-index:3;
	background-color: #00FF00;
}
-->
</style>
</head>

<body>
     <div id="contenedor">
     
         <div id="A"></div>
         
         <div id="B"></div>
         
     </div>
</body>
</html> 
  #2 (permalink)  
Antiguo 01/06/2009, 10:09
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: problema con crecimiento de capaz

A eso le solemos llamar "columnas equilibradas", y hay muchas formas de hacerlo, según lo que necesites. Yo en las FAQ de CSS te muestro una forma de hacerlo, pero hay muchas más. Busca en google por esos términos y verás muchos resultados, supongo.
  #3 (permalink)  
Antiguo 01/06/2009, 19:34
 
Fecha de Ingreso: mayo-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: problema con crecimiento de capaz

gracias viejo, hice un ejecicio y me funciono bien pero tengo otro en el que no me funciona, uso mas divs y ya he hecho de todo y no me sale, voy a poner el codigo con los divs en absolute que es como me funciona.

la idea es que al colocar bastante texto o poquito el pie siempre este al final.

espero alguien me guie que debo cambiar. y a que capaz debo ponerle relativo

yo cambiaba la capa global la principal y el pie a relativas, pero entonces no sabia como acomodarlas despues, se colocaban donde ellas querian y se perdia toda la maquetacion que tengo.

Código HTML:
<body>

<div id="globlal">
  
  <div id="curva-superior"></div>
  
   <div id="cabecera">
    <div id="escudo"> reservado para el escudo</div>
    <div id="logo"></div>
   </div>
  
  <div id="menu">
    
  </div>
  
  <div id="navegacion">
       
  </div>
  
  <div id="principal" ></div>
 
  <div id="pie"> </div>

  <div id="curva-superior"></div>

</div>

</body> 
y el css

Código HTML:
#globlal {
	position:absolute;
	width: 800px;
	height:688px;
	z-index:1;
	left:50%;
	margin-left:-400px;
}


    #curva-superior {
   	  background-image: url(../objetos/curva-superior.gif); 
	  background-repeat: no-repeat ;
	  position:absolute;
	  width:800px;
	  height:12px;
	  z-index:1;
	  left: 1px;
	  overflow : hidden
    }
    #curva-inferior {
	background-image: url(../objetos/curva-inferior.gif);
	background-repeat: no-repeat;
	position:absolute;
	width:800px;
	height:12px;
	z-index:2;
	left: 1px;
	top: 658px;
	overflow : hidden
     }
	 
#cabecera { border-right: black 1px solid ; border-left: black 1px solid ;
	position:absolute;
	width:798px;
	height:85px;
	z-index:3;
	left: 1px;
	top: 12px;
}
	#logo {
	       background:url("../objetos/LJ1.jpg");
		   position:absolute;
	       width:645px;
	       height:85px;
	       z-index:1;
	       left: 0px;
	       top: 2px;
    }
    #escudo {
	      
	       position:absolute;
	       width:155px;
	       height:85px;
	       z-index:2;
	       left: 645px;
	       top: -1px;
     }

/* inicio barra de navegacion */
#navegacion {
    background:url("../objetos/barra.gif");
	border-right: black 1px solid;
	border-left: black 1px solid ;
	float:left;
	position:absolute;
	width:800px;
	height:35px;
	z-index:4;
	left: 0px;
	top: 97px;
}


    
#menu {
	background:url("../objetos/menu.jpg");
	background-position: bottom;
	border-left: black 1px solid;
	position:absolute;
	width:165px;
	height:491px;
	z-index:5;
	left: 0px;
	top: 133px;
	padding:10px 0px 0px 0px;
}

#menu li {list-style:none ; margin: 4px 0px 4px 6px}

#principal {
	background:url("../objetos/fondo.jpg");
	position:absolute;
	width:634px;
	height:503px;
	z-index:2;
	left: 166px;
	top: 133px;
	border-right: black 1px solid;
	
}

#pie {
	background:url("../objetos/barra.gif");
	border-right: black 1px solid;
	border-left: black 1px solid;
	position:absolute;
	width:800px;
	height:36px;
	z-index:7;
	left: 0px;
	top: 636px;
}

  #4 (permalink)  
Antiguo 02/06/2009, 05:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con crecimiento de capaz

Cita:
Iniciado por lester_18 Ver Mensaje
gracias viejo,
Ves como ya se te nota, "abuelo"
Cita:
Iniciado por lester_18 Ver Mensaje
la idea es que al colocar bastante texto o poquito el pie siempre este al final.
www.araudi.net
Las faq´s de css

Todo lo anterior del "abuelo" D.H.2C.L. Mikmoro

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 11:00.