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
