Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Competencias CSS (http://www.forosdelweb.com/f95/)
-   -   Todos juegan - Reto 10Kb (http://www.forosdelweb.com/f95/todos-juegan-reto-10kb-552724/)

metacortex 22/02/2008 16:40

Re: Todos juegan - Reto 10Kb
 
No hades87, yo no deslumbro ni en mi casa. Sólo era un comentario referente a estadísticas y términos.

hades87 22/02/2008 16:49

Re: Todos juegan - Reto 10Kb
 
jaja, nah tranqui meta solo te lo decía como un cumplido, ya que al verdad eres bastante mañoso en esto :P

PD se podría mirar de hacer algún toro reto no?

Mikmoro 01/04/2008 16:33

Re: Todos juegan - Reto 10Kb
 
Cita:

Iniciado por metacortex (Mensaje 2293213)
Daz me había hecho la misma observación. Al parecer Firefox toma la capa entera como un enlace, lo que no sucede con IE y Opera (en esos navegadores sí funciona bien el hover sobre las letras). Al final no supe cómo resolverlo.

Al principio ese asunto se me hizo complicado, pero luego le agarré la "maña": Ahí la palabra Okologie está repetida 5 veces. Cada SPAN está posicionado absoluto. El visibility: hidden oculta lo que no quiero que se muestre y dejo libre el pedazo que me interesa, el cual también cambia con el hover.

Hola, Metacortex.

Probablemente tienes este asunto más que olvidado, pero me acabo de enterar hoy mismo de la existencia de esta competencia (he estado mucho tiempo fuera de juego).

La cosa es que decías que no supiste cómo resolver el asunto del Firefox y que siempre se iluminara el último link con la "e" cuando pasabas el ratón por la letra grande.
Por si tienes algo de curiosidad, te cuento cómo lo he resuelto:

- En el selector "a span.letra,h1 a", he cambiado el left:0; por right: 0;

a span.letra,h1 a{font-size:190px;font-weight:bold;position:absolute;right:0;top:0;color:#122871;background:transparent}

- he aligerado un poco el contenido de los enlaces de esta manera:

Cita:

<ul id="toc">
<li><a accesskey="i" href="index.php"><span
class="letra">&Ouml;<span class="inv">kologie
</span></span><span class="titulo ecologia">Inicio</span><span
class="guion"> - </span><span class="subtitulo">Definiendo
conceptos</span></a></li>
<li><a href="hist.php"><span class="letra">ko<span
class="inv">logie
</span></span><span class="titulo historia">Historia</span><span
class="guion"> - </span><span class="subtitulo">&iquest;De
d&oacute;nde surgi&oacute; todo?</span></a></li>
<li><a href="obj.php"><span class="letra">lo<span
class="inv">gie
</span></span><span class="titulo objeto">Objeto
de estudio</span><span class="guion"> - </span><span
class="subtitulo">Bajo la lupa cient&iacute;fica</span></a></li>
<li><a href="disc.php"><span class="letra">gi<span
class="inv">e
</span></span><span class="titulo disciplina">Disciplinas
relacionadas</span><span class="guion"> - </span><span
class="subtitulo">Metodolog&iacute;a investigativa</span></a></li>
<li><a href="rama.php"><span class="letra">e
</span><span class="titulo ramas">Ramas de la
Ecolog&iacute;a</span><span class="guion"> - </span><span
class="subtitulo">Ciencias
derivadas</span></a></li>
</ul>
es decir, quitando todo el contenido a la izquierda de cada letra "iluminable".

¿Qué he hecho con esto?
He alineado siempre el span principal ("letra") a la derecha en lugar de a la izquierda. Entonces he eliminado todo el contenido oculto que cada letra que va a ser iluminada tenía a su izquierda.
¿Qué se consigue? que las capas de los span que van a ser iluminadas estén solapadas hacia la derecha, de manera que siempre posicionas el ratón sobre la que quieras, porque hacia su izquierda no hay nada.
¿Por qué? porque el problema que tenías era que cada capa con todo su relleno oculto siempre ocupaba todo el ancho del recuadro de las letras grandes, y conforme aparecían en el flujo del código se iban poniendo sobre las otras. De esta manera, la última era la de la "e", y por eso se iluminaba siempre, porque siempre cubría a las otras.

Ha sido por pura curiosidad y como un ejercicio muy divertido, porque no podía ser que un diseño tan guapo hiciera quedar mal a Firefox :-).

El diseño me parece muy, pero que muy bueno. Tienes un gusto con los colores y las formas excelente, de verdad. Me quito el sombrero. Espero que esto no te moleste.

Mikel.

metacortex 01/04/2008 17:04

Re: Todos juegan - Reto 10Kb
 
Qué cosas dices man. Para nada molesta eso :arriba:. Todo lo contrario te lo aseguro. Déjame analizar ese pedazo de código y te doy respuesta ¿seguro que la parte de los estilos sólo lleva esas modificaciones?.


Edito:

La curiosidad mató al gato y no resistí probar de una vez. Excelente solución :si:. Sorprendente que haya intentado una y otra vez y al final la cosa era tan simple jeje. La explicación estuvo bastante buena también.

Probé además en IE6 y Opera. Todo en orden, gracias por ese datazo :arriba:.

Mikmoro 01/04/2008 17:17

Re: Todos juegan - Reto 10Kb
 
Cita:

Iniciado por metacortex (Mensaje 2345928)
¿seguro que la parte de los estilos sólo lleva esas modificaciones?.

Sí, seguro, y si lo piensas es muy lógico: lo que hiciste fue alinear desde la izquierda, y por eso debías completar con el texto oculto desde el borde para que la letra estuviera en su sitio, y por eso mismo ocupaba siempre todo el ancho.

Con ese pequeño cambio, alineando desde la derecha, sobra todo el relleno de la izquierda, y poniendo sólo el relleno de la derecha, las capas se solapan, teniendo todas siempre a la vista del ratón, ya que el flujo del documento hace que las sucesivas capas se vayan colocando sobre las anteriores.

Mikel.

P.D.: una vez más, quien lo hacía bien era FF. :arriba:

EDITO: siento el choque: este mensaje iba antes de tu última edición.

Venechat 22/04/2008 10:42

Re: Todos juegan - Reto 10Kb
 
Muy bien me gusto mucho la competencia, lo mejor de todo es que no hay perdedores todos ganan ?


La zona horaria es GMT -6. Ahora son las 14:13.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.