Ayuda sobre divs como table en css

anonimo12121 · 24 Noviembre 2012, 12:19 PM

Hola, estoy haciendo la estructura de mi web pero he llegado a un punto que no se como hacer cierta tare llevo 1 día probando un montón de cosas pero nada de nada.

Yo quiero hacer un rectangulo pero con imágenes, el rectángulo debe de constar de los siguientes lados:

top left, top center, top right,
left, center, right;
bottom left. bottom center, bottom right;

quedando de la siguiente forma.

pero no se como hacerlo para que ciertos div tengan el tamaño dinámico dependiendo de los div que hayan en el.

La últimas pruebas que estoy haciendo son las siguientes:

Código (css) [Seleccionar]


.contenido{
	display:block;
	background-color:white;
	position:absolute;
	top:80px;
	width:1100px;
	height:auto;
}
.contenido_top{
	display:block;
	background-color:red;
	width:auto;
	height:auto;
}
.contenido_top .l {
	display:block;
	background-image: url("images/background/tl.png");
	background-repeat: no-repeat;
	width:12px;
	height:12px;
}
.contenido_top .c {
	display:block;
	background-image: url("images/background/t.png");
	background-repeat: repeat-x;
	width:auto;
	height:12px;
}
.contenido_top .r {
	display:block;
	background-image: url("images/background/tr.png");
	background-repeat: no-repeat;
	width:12px;
	height:12px;
}

Es posible lo siguiente?

Código (html4strict) [Seleccionar]

<div class="c1"></div>
<div class="c2"></div>

y que el div de la clase c1 coja el tamaño de c2

#!drvy · 24 Noviembre 2012, 18:04 PM

Hola,

Estoy un poco atontado y no te logro entender asi que te respondo solo a esto:

Cita de: Xafi en 24 Noviembre 2012, 12:19 PM
Es posible lo siguiente?
Código (html4strict) [Seleccionar] Expandir
<div class="c1"></div> <div class="c2"></div>
y que el div de la clase c1 coja el tamaño de c2

Solo con CSS ? Lamentablemente no creo que lo vayas a poder hacer.
A no ser que a la hora de declarar el tamaño de c2 se lo declares a c1 también.

Te quedaría usar javascript para averiguar el tamaño de c2 y dárselo a c1.

Saludos

anonimo12121 · 25 Noviembre 2012, 00:21 AM

mmm quizás tengas razón.

mira esta web por favor.
http://www.3djuegos.com/
ves el marco de la parte de contenido? esta echo con <table> yo lo quiero hacer con divs.
a ver si puedes echarme una mano y explicarme si es posible.

#!drvy · 25 Noviembre 2012, 03:00 AM

Te refieres a la sección de "Novedades" o cual exactamente ?

Saludos

anonimo12121 · 25 Noviembre 2012, 11:09 AM

Cita de: drvy | BSM en 25 Noviembre 2012, 03:00 AM
Te refieres a la sección de "Novedades" o cual exactamente ?

Saludos

El marco más exterior de la web el que encapsula todo el contenido;

Haber me voy aintentar explicar de otra forma.

tengo 2 divs y quiero que la altura de estos sea automatica dependiendo del tamaño de segundo div que esta dentro del primero. el segundo div coge el tamaño de lo que tenga dentro, me eh explicado?

anonimo12121 · 26 Noviembre 2012, 21:09 PM

explicación nueva!

#!drvy · 27 Noviembre 2012, 13:17 PM

Quieres decir que el segundo div es hijo del primero y el tercero seria hijo del segundo y etc..etc.. ?

Puedes hacerlo usando simplemente display:inline-block; Te dejo una muestra:

CSS

Código (css) [Seleccionar]

<style type="text/css">
   body {text-align:center;}
   .div1 {background:#555; display:inline-block; margin:0px auto 0px auto; padding:10px;}
   .div2 {background:#010; display:inline-block; padding:10px;}
   .div3 {background:#FFF; width:500px;}
</style>

HTML

Código (html4strict) [Seleccionar]

<body>
   <div class="div1">
      <div class="div2">
         <div class="div3">
            asdasda
         </div>
      </div>
   </div>
</body>

Como ves, solo el div3 lleva un tamaño fijo y los otros se van a adaptar a el. El margin y padding y text-align son solo decoración.

PD: Creo recordar que una versión de IE (7 o 8) no soportaba inline-block pero puedes buscar un "hack".

PD2: Dijiste altura...yo lo hice con anchura.. porque la altura se adapta sola dependiendo del tamaño de los elementos de dentro... vamos que es automático.

Saludos

anonimo12121 · 28 Noviembre 2012, 16:13 PM

Aaa osea que si por ejemplo en ese código si el div3 tiene 3 lineas de alto
asd
asd
asd
entonces ser modificarían los otros ?
creo que sí es esto lo que busco voy a probarlo lo antes posible vale. saludos y muchas gracias

Que dios te lo pague con mucho dinero y bitches

FUNCIONÓ GRACIAS!!

Probaré lo que necesito a ver si así me funciona .