Para el asunto de las cajas redimensionables con bordes redondeados aquí
tienes un artículo:
http://simplelogica.net/caoticoneutral/index.php?p=15
Espero que te sirva.
-----
Jacinto Lajas
[EMAIL PROTECTED]
Fran Rives escribió:
Hola, este es el primer mensaje que escribo a esta lista, pero
enhorabuena por lo buena que es. </pelotilleo :D>
Mi problema es el siguiente. Digamos que aunque CSS es una gran
herramienta para presentación, presenta ciertas limitaciones. El
modelo de cajas cuadradas con únicamente un color y en 2d, no me
permite disponer de todo lo que me gustaría. Por eso me planteé
conseguir una presentación estilo Photoshop (como hacen en CSS zen
garden, sin perder semántica), pero con una diferencia. Yo quiero que
mi presentación se redimensione conforme disminuyo/aumento la pantalla
del navegador, o conforme cambio de resolución o de monitor, algo que
los de Css zen garden no han conseguido (pese a que se autoproclamen
triple A).
Entonces, yéndome un poco más hacia mi caso en particular, yo quiero
meter un menú a la izquierda de mi página. Dentro de ese menú quiero
meter los enlaces hacia las distinas secciones (estos enlaces los he
puesto con outset normal e inset en hover, pero eso es otra historia).
Este menú con los enlaces quiero que sea un rectángulo tridimensional
con bordes redondeados y efectos 3d y sombras (esto lo he hecho con
photoshop, aplicando varios estilos de capa a un rectángulo normal
negro).
El problema viene con la redimensión que le quiero aplicar a este
menú. Para ello he cortado a la imagen del photoshop en 9 pedazos,
cada uno de ellos representando un borde (lógicamente el centro de la
imagen lo he quitado). Así: a1 --> borde superior izquierdo; a2 -->
borde superior medio(me hace falta porque el rectángulo es 3d); a3 -->
borde superior derecho; b1 --> borde izquierdo medio; b2 --> borde
derecho medio; c1 --> borde inferior izquierdo; c2 --> borde inferior
medio; c3 --> borde inferior derecho;
Cada uno de estos pedazos es una nueva imagen. Entonces,
posteriormente lo que hago es meter estas imágenes como divs
posicionados absolutamente dentro de un div padre (la misma técnica
que para bordes redondeados, pero en 3d y con 9 en vez de 4). Esto lo
hago para conseguir que mi menú se redimensione. Entonces el div padre
tiene un background negro y le posiciones los nueve divs con imágenes
de fondo. Así consigo que se me redimensione sin notar nada extraño
hasta cierto punto (lógicamente, si la pantalla es muy muy pequeña, se
verá como los bordes no dan disminuído de tamaño, pero eso sería un
caso extremo).
Ahora os pegaré fragmentos de mi código XHTML y CSS para entender
mejor el caso:
<-- XHTML -->
<div id="lista">
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="b1"></div>
<div id="b2"></div>
<a id="primero" href="#">Primero</a>
<a id="segundo" href="#">Segundo</a>
<a id="tercero" href="#">Tercero</a>
<a id="cuarto" href="#">Cuarto</a>
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
<-- CSS -->
#lista { position: absolute;
width: 12%;
top: 5%;
left: 1%;
padding: 2.3em 0;
background: black; }
/* Posicionando las imágenes del borde para que coincidan con los
bordes reales del div lista (las imagenes cortadas tienen un borde
blanco) */
#a1 { position: absolute;
background:
url(../imagenes/a1.jpg) no-repeat;
width: 43px;
height: 43px;
top: 0%;
left: 0%;
z-index: 101; }
#a2 { position: absolute;
background:
url(../imagenes/a2.jpg) repeat-x;
width: 90%;
height: 43px;
top: 0%;
z-index: 100; }
#a3 { position: absolute;
top: 0%;
right: -5%;
background:
url(../imagenes/a3.jpg) no-repeat;
width: 43px;
height: 43px;
z-index: 101; }
/* Primera línea lograda */
/* Segunda línea */
#b1 { position: absolute;
top: 43px;
bottom: 0%;
background: url(../imagenes/b1.jpg);
width: 20px;
left: 0%; }
#b2 { position: absolute;
top: 43px;
bottom: 0%;
right: 0%;
width: 20px;
background:
url(../imagenes/b2.jpg) repeat-y; }
a { display: block;
height: 1.7em;
background: #c9c9c9;
margin-top: .5em;
border: outset;
text-decoration: none;
margin-left: 6%;
margin-right: 6%;
color: #fff;
font-weight: 900;
font-family: arial, sans-serif;
}
a:hover { border: inset;
color: #c9c9c9;
background: #fff; }
-------------------------
Como podéis ver, todos son divs con backgrounds donde posiciono las
imágenes, no meto ninguna etiqueta img. También véis como el a2 le
meto un background repeat-x a la misma imagen, y a b1 no le doy ningún
tipo de repeat pero limito el width para dar la impresión de que
únicamente hay un repeat-y (dando así esa sensación de rectángulo en
3d que se sale hacia arriba).
¿Mi problema tras esta larga parrafada? Pues que "curiosamente" el
Explorer no interpreta bien el posicionamiento absoluto dentro de
elementos padre. Así, yo al b1 le doy un top:43px para no coincidir
con a1 y un bottom: 0% para que la altura del b1(y así el borde
tridimensional izquierdo) se acople a la altura del rectángulo (div)
padre. Pues el explorer no me interpreta bien esto.
Otra opción que estaba barajando y que probé también es poner un
height en porcentajes, pero todos sabéis la problemática del height
100%... y además: el explorer me lo interpreta otra vez de forma
distinta a los otros navegadores (opera, firefox). Por lo que puedo
poner un height 50% que uno me lo pondrá como 50% del div padre, que
otro me lo pondrá como 50% del body...
¿Alguna solución?
Por cierto, el código no está acabado y posiblemente tenga fallos
después del b1. Solo estaba aquí rompiéndome la cabeza y cambiando
montones de cosas a ver si doy con la solución. Esto no es el código
final ni mucho menos.
Si alguien ha leído todo este rollazo gracias, y si alguien contesta
pues también. Saludos.
_________________________________________________________________
Express yourself instantly with MSN Messenger! Download today it's
FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
------------------------------------------------------------------------
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo