[xhtml] 3 DIVS SEGUIDOS, EL DEL CENTRO DE ANCHURA VARIABLE.
Muy buenas, este es mi primer post. Felicidades por el foro Dmstk :)
Estoy exportando una web con (anticuadas) tablas a xhtml.
Creo que, como todo, hay que saber algunos trucos para controlar bien los DIVs y me estoy comiendo la cabeza con lo siguiente:
Es la parte superior de un marco de anchura variable. Consta de una imagen que es la esquina superior izquierda y a la derecha su complementaria.
Código de la fila actual:
<code><tr>
<td width="19"><img src="images/esquinaARIZQ.gif" width="19" height="8"></td>
<td background="images/centroarriba.gif"><img src="images/blank.gif" width="1" height="1"></td>
<td width="9"><img src="images/esquinaARDE.gif" width="9" height="8"></td>
</tr></code>
Básicamente quiero poner 3 divx una detrás de otra horizontalmente con la izquierda y derecha de ancho fijo. Y la central variable.
No quiero usar position: absolute
No hace falta que me hagáis un código (como he visto en otros posts O_O) sólo necesito una pista!!
Muchas gracias :)
Miguelz
"float" puede ser una pista
adn
La mejor forma de aprender es mirando el código de distintas técnicas:
http://www.glish.com/css/
meddle
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html http://css.maxdesign.com.au/floatutorial/
pepevi
Qué eficacia!!! :D
Evidentemente, ya lo he solucionado. Aunque el tema de que la parte central sea extensible ha dado sus problemas.
Pongo el código para el que empiece con esto :)
<code><div id="arr-cen">
<div id="arr-izq">
<img src="images/blank.gif" width="1" height="1" />
</div>
<div id="arr-der">
<img src="images/blank.gif" width="1" height="1" />
</div>
</div></code>
Es un DIV que ocupa el 100% del ancho. Y encima tiene dos DIVs. Uno a la derecha y otro a la izquierda.
Tienen un pixel transparente para poder poner una altura pequeña.
<code>#arr-izq {
float: left;
background: #F5F5F5 url(images/esquinaARIZQ.gif) no-repeat left top;
width: 19px;
height: 8px;
}
#arr-cen {
width: 100%;
background: #F5F5F5 url(images/centroarriba.gif) repeat-x center top;
height: 8px;
}
#arr-der {
background: #F5F5F5 url(images/esquinaARDE.gif) no-repeat right top;
float: right;
width: 9px;
height: 8px;
}</code>
No quería recurrir a poner unas encima de otras, por aprender a hacerlo de la otra forma, no por otra cosa. De hecho esta línea tiene un ancho inamovible :D
Me gusta mucho el xhtml. Hacer las páginas compatibles con el último mozilla y a la vez con lynx es... bonito xD
Muchas gracias. Añado este foro a favoritos :P