10.3.07

Marcos movibles

Voy a explicar rápidamente como hice el marco movible del blog que he visto un par de comentarios pidiéndolo.

Antes de nada decir que nose nada de CSS (mis conocimientos de programar webs son de un HTML muy básico). Pero conseguí hacerlo modificando un poco el código de "Demasiado cool para IE".

Al final de la cabecera he declarado los "objetos"

...
a#Hojas {
position: fixed;
top: 0;
bottom: 3;
display: block;
height: 20px;
width: 100000px;
background: url(http://img226.imageshack.us/img226/4396/hojas1rx.gif) bottom left no-repeat;

}

a#Calvin {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 1000px;
width: 150px;
background: url(http://img226.imageshack.us/img226/2898/calvin4oa.gif) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
}


a#Hobbes {
position: fixed;
left: 0;
bottom: 0;
display: block;
height: 1000px;
width: 200px;
background: url(http://img226.imageshack.us/img226/4821/hobbes4cv.png) bottom left no-repeat;
text-indent: -999em;
text-decoration: none;
}

[/head]

Y al inicio del cuerpo los utilizo

[body]
[a id="Hojas"][/a]
[a id="Calvin"][/a]
[a id="Hobbes"][/a]


Hojas es el marco superior, Calvin el niño y Hobbes el tigre.
Dentro de los objetos tenemos variables que podemos modificar a nuestro gusto como el tamaño, la alineación, etc...
Una vez mas por problemas con el blog sustituyo los < > por [ ].

3 comentarios:

EL SENSEI dijo...

Buena informacion... espero usara adecuadamente. Un saludo desde el otro lado del mundo!

Syl dijo...

Muchas gracias por la explicacion! voy a ponerme a ello, a ver que es lo q me sale....
Un saludo!!

Fer dijo...

Que marco ni que leches. Anda quieres colgar en el blog como te ha ido en la playa esa a la que has ido??? :P