[color=red]Prueba y práctica[/color]
Últimos temas
» LINKS ÚTILES
Miér Oct 11, 2017 1:12 am por Trollface

» CÓDIGOS DE BOKU NO HERO
Vie Sep 22, 2017 6:38 pm por Trollface

» Archivo de SC y otros tutoriales
Miér Mar 15, 2017 11:14 am por Trollface

» Otras tablas
Miér Mar 08, 2017 7:20 pm por Trollface

» Prueba de tablas
Lun Mar 06, 2017 5:43 pm por Trollface

» ESPACIO DE PRUEBAS PARA ALF
Lun Mar 06, 2017 5:19 pm por Trollface

» TABLILLAS WITCH ACTIVITY
Dom Mar 05, 2017 3:09 pm por Trollface

» codigosssssssss
Vie Mar 03, 2017 12:16 am por Trollface

» TODO DE KAGAMI NO SEKAI
Vie Feb 07, 2014 7:49 pm por Trollface










¡Bienvenid@!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et augue nulla. Etiam odio risus, luctus id iaculis a, scelerisque a dolor. Donec felis nulla, viverra in imperdiet aliquam, ultricies quis elit. Phasellus felis nibh, pellentesque a euismod vitae, interdum id ligula. Proin tristique est at ligula varius vitae porttitor lectus lobortis. Nunc est felis, molestie at dapibus id, elementum vel est.



¡Conectate!

Ingresa con tu nick, Nombre y Apellido, se admiten iniciales.
WidPrueba1




















¡Bienvenid@!

No olvides votar por nosotros. El foro necesita de tu ayuda para crecer.
Enlaces e info








Enlaces Rápidos






Ambientación

Pasa el ratón por encima para desplazar la información.
















Administración

Reina
MP - PERFIL
Créditos
































Créditos&Copyright

Skin diseñado por Skaôi de SourceCode. Licencia de Creative Commons
Ragnarok: Royal Wars is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.
Afiliados




Élite


www.dreamself.me

Rate this Dream Selfy or make your own!

www.dreamself.me
Photobucket Pandora Hearts Rol SSTL RXJ DarkRomance Ao no Yume Kuroi Bara Pandora Shin Seiki Photobucket Eien no Haru Heaven's Feel Etherion Photobucket Infernal Apocalyptic SeikonnoMafia Amaranth Mundo Mágico Latino





www.dreamself.me
Online

Archivo de SC y otros tutoriales

Ver el tema anterior Ver el tema siguiente Ir abajo

Archivo de SC y otros tutoriales

Mensaje  Trollface el Jue Mar 09, 2017 9:40 pm

Antes que nada, quiero agradecer a la administración por este espacio, ya que realmente es muy necesario para quienes estamos aprendiendo.

Ahora bien, el motivo por el que estoy publicando en este apartado es el siguiente: soy muy novata en cuanto a códigos, conozco poco y nada de HTML, por lo que mis tablillas básicamente son hechas a pura improvisación. Voy armando y corrigiendo en medida de lo que me sale, así que a veces se me descuadran las tablillas al pasarlas de un foro a otro y surgen muchísimos problemas que no sé cómo resolver.

Por esto mismo me abstendré de colocar directamente la tablilla que voy a diseccionar aquí, porque en una de esas capaz y descuadro todo el foro por un mal acomodo de códigos. En lugar de eso, les dejaré una imagen de ella y abajo de todo expondré el código para que alguien más entendido en el tema vea de primera mano cómo está hecha.

Siguiendo la "ficha" de lo que me interesa solicitar al crear el post:
"¿Qué deseas que se valore?": la estructura HTML. Me gustaría que quienes realmente saben de esto revisen sus componentes y me digan de qué forma puedo solucionar lo que está mal.
"¿Cuántas opiniones deseas?": con dos o tres personas que comenten creo que ya podría ir bien encaminada, aunque si alguien más quiere aportar algo también me vendría fantástico.

La tablilla en cuestión es la siguiente:
spoiler

Tuve muchos problemas para elaborarla, principalmente porque noté que al pasar de Firefox a Chrome se me descuadraron todas las letras grandes contenidas en las tablas, así que tuve que retocar todo de nuevo. Y así como ese problema, me surgieron muchos más que me han generado algunas dudas específicas.

spoiler

Mi primera duda es acerca de la colocación de "bordes" dobles en las cajas. Hasta el momento sólo me he manejado con la forma tradicional de colocarlos, pero he visto que otras tablillas tienen hasta triple borde. Yo lo "solucioné" al fabricar el borde mediante la superposición de cajas, como se ve en la imagen. La "caja" base es la morada oscura, que allí cumple la función de borde. ¿Así es como se hace normalmente, o hay una forma más convencional de colocar estos diferentes bordes en una tablilla?

spoiler

Mi siguiente duda es sobre el espaciado entre distintos elementos. Para lograr esa pequeña separación entre ambas líneas que puse debajo de los títulos, tuve que meter en medio de ellas otra caja transparente y ajustar su tamaño. Del mismo modo, para arreglar el descuadre de las letras de ambas tablas tuve que encerrarlas a todas en otras cajas transparentes. ¿Debería haberlas colocado en un span en vez de un div? ¿Qué se recomienda en esos casos?

spoiler


Y mi tercera duda es una de las que más me hizo comerme la cabeza. Al armar las tablas noté que estas comenzaban a subir y a bajar según la extensión del contenido en ellas, por lo que tuve que quitar el "auto" en height y regularla con un tamaño en específico para evitar que se me descuadren. Lo malo con esto es que voy a tener que regularlas a mano cada vez que el texto interior aumente, y no se supone que funcione de esa manera. ¿Cómo lo regulo en esos casos?

Bueno, básicamente esas serían mis principales dudas con respecto a esta tablilla. De todos modos aquí les dejo el código para que lo puedan ver con más detalle y avisarme de otros errores que se me hayan pasado por alto.

Código:
    <center><div style="width: 520px; height: auto; background-color: #180C1F; border-left:2px solid #e65c5c; border-right:8px solid #8a5cad;"><div style="width: 510px; height: auto; background-color: #f2f2f2; margin-left: 5px; margin-right: 0px;"><link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Sansita' rel='stylesheet' type='text/css'><div style="font-family:'Anton'; color: #8a5cad; text-align: left; font-size: 36px; margin-top: 0px; padding: 20px; text-shadow: 1.4px 2px 0px #e65c5c;">•<span style="color: #180C1F;">P</span>ersonajes <span style="color: #180C1F;">o</span>cupados</div><div style="width: 410px; height: 1px; margin-left: -20px; padding: 0px; background-color:#180C1F;"></div><div style="width: 410px; height: 1px; margin-left: 20px; padding: 3px; background-color:transparent;"><div style="width: 410px; height: 1px; margin-left: 10px; padding: 0px; background-color:#8a5cad;"></div></div>
    <div style="width:440px; height: auto; background-color: transparent; border-left: 5px dotted #e65c5c; border-right: 1px solid #e65c5c; font-family:'Sansita'; color: #180C1F; font-size: 13px; padding: 3px; text-align: center; line-height:105%;"> ► Algunas normas por acá.
    ► Otras por acá.
    ► Efecto de resaltador en los colores de los personajes <span style="background: #eb84dc;">femeninos</span>, <span style="background: #96b8f2;">masculinos</span> y <span style="background: #d2ff08;">reservados</span>.
    </div>
    <div style="width: 510px; height: auto; background-color: transparent"><table><tr><td><div style="width: 230px; height: auto; padding: 5px; background-color: transparent; font-family: 'Anton', cursive; color: #96b8f2; font-size: 16px; text-align: left; line-height: 99%; center; margin-top: -45px;">•<span style="color: #180C1F;">P</span>ERSONAJES <span style="color: #180C1F;">M</span>ASCULINOS</div><div style="width: 190px; height: 1px; margin-left: 0px; padding: 0px; background-color:#180C1F;"></div><div style="width: 190px; height: 1px; margin-left: 20px; padding: 3px; background-color:transparent;"><div style="width: 190px; height: 1px; margin-left: 10px; padding: 0px; background-color:#8a5cad;"></div></div><div style="width: 245px; height: 500px; background-color: transparent; border-left: 0px solid; border-right: 0px solid; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; border-left: 0px solid; padding: 0px; line-height: 105%; letter-spacing: -0.1px;">
    <center><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -70px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 62px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">A-B-C-D-E</div></div></div></center>texto por aquí
    texto por aquí
    <center><div style="width: 100px; height: 3px; padding: 3px; background-color:transparent;"></div><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -65px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 54px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">F-G-H-I-J</div></div></div></center>texto por aquí
    texto por aquí
    <center><div style="width: 100px; height: 3px; padding: 3px; background-color:transparent;"></div><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -75px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 62px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">K-L-M-N-O</div></div></div></center>texto por aquí
    texto por aquí
    <center><div style="width: 100px; height: 3px; padding: 3px; background-color:transparent;"></div><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -70px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 58px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">P-Q-R-S-T</div></div></div></center>texto por aquí
    texto por aquí
    <center><div style="width: 100px; height: 3px; padding: 3px; background-color:transparent;"></div><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -85px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 75px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">U-V-W-X-Y-Z</div></div></div></center>texto por aquí
    texto por aquí</div></div></div></div></div>
    </td>
    <td><div style="width: 240px; height: auto; padding: 5px; background-color: transparent; font-family: 'Anton', cursive; color: #eb84dc; font-size: 16px; text-align: right; line-height: 99%; center; margin-top: -45px;">•<span style="color: #180C1F;">P</span>ERSONAJES <span style="color: #180C1F;">F</span>EMENINOS</div><div style="width: 190px; height: 1px; margin-left: 60px; padding: 0px; background-color:#180C1F;"></div><div style="width: 190px; height: 1px; margin-left: 20px; padding: 3px; background-color:transparent;"><div style="width: 190px; height: 1px; margin-right: 10px; padding: 0px; background-color:#8a5cad;"></div></div><div style="width: 255px; height: 500px; background-color: transparent; border-left: solid 1px #e65c5c; border-right: transparent; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; margin-left: -1px; padding: 0px; line-height: 105%; letter-spacing: -0.1px;">
    <center><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -70px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 62px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">A-B-C-D-E</div></div></div></center>texto por aquí
    texto por aquí
    <center><div style="width: 100px; height: 3px; padding: 3px; background-color:transparent;"></div><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -65px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 54px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">F-G-H-I-J</div></div></div></center>texto por aquí
    texto por aquí
    <center><div style="width: 100px; height: 3px; padding: 3px; background-color:transparent;"></div><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -75px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 62px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">K-L-M-N-O</div></div></div></center>texto por aquí
    texto por aquí
    <center><div style="width: 100px; height: 3px; padding: 3px; background-color:transparent;"></div><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -70px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 58px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">P-Q-R-S-T</div></div></div></center>texto por aquí
    texto por aquí
    <center><div style="width: 100px; height: 3px; padding: 3px; background-color:transparent;"></div><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -85px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 75px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">U-V-W-X-Y-Z</div></div></div></center>texto por aquí
    texto por aquí</div></div></div></div></div>
    </div></td>
    </tr></table>
    <div style="width: 510px; heigt: 15px; background-color: #180C1F; margin-top: 0px; font-family: 'Anton', cursive; color: #d2ff08; font-size: 16px; text-align: center;">RESERVAS</div>
    <div style="width: 450px; heigt: auto; background-color: #ffffff; border-radius: 10px 10px 10px 10px; margin-top: 0px; font-family: 'Sansita', cursive; color: #180C1F; font-size: 13px; text-align: center;">texto por aquí
    texto por aquí
    texto por aquí</div>
    </div></div></div>
    <div style="width: 300px; background: transparent;"><div style="font-family:'Verdana'; color: #180C1F; text-align: center; font-size: 9px; margin-top: -25px;">Supernatural</div></div></center>

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Jue Mar 09, 2017 10:27 pm

Bueno, abrochense el cinturón que esto va a ser largo Spiderman

Primero, dándole un vistazo general a tu código quiero darte unos consejos generales para trabajar con tablillas HTML.

1. Intenta no usar la etiqueta < center > hay muchos otros y más apropiados métodos para centrar cosas.

2. Intenta usar siempre el mismo tipo de comillas en tu HTML. En algunas partes mezclas comillas simples ( ' ) con comillas dobles ( " ) y eso puede causar errores, sobre todo si más adelante quieres involucrar Javascript.

3. Si vas a trabajar con códigos así de largos y/o complejos, te recomiendo que uses clases CSS. Quiero decir, cuando empiezas, está bien que pongas todas las propiedades en un div, para entender exactamente lo que hacen. Pero una vez ya entiendes como funciona, es mejor pasarse a usar la mezcla de HTML y CSS, es menos engorroso. Por ejemplo, en vez de esto

Código:
   <div style="width: 520px; height: auto; background-color: #180C1F; border-left:2px solid #e65c5c; border-right:8px solid #8a5cad;"><div style="width: 510px; height: auto; background-color: #f2f2f2; margin-left: 5px; margin-right: 0px;"> Contenido </div></div>

Separamos el CSS del HTML de esta forma

Código:
   <style type="text/css">.caja1 { width: 520px; height: auto; background-color: #180C1F; border-left:2px solid #e65c5c; border-right:8px solid #8a5cad;} .caja2 { width: 510px; height: auto; background-color: #f2f2f2; margin-left: 5px; margin-right: 0px; }</style>

    <div class="caja1"><div class="caja2"> Contenido </div></div>

Es mucho más facil de entender y de editar un código largo de esta manera. Por un lado los estilos y por el otro el contenido.

4. Las etiquetas como style o link que usas para linkear las fuentes, es mejor ponerlas siempre al principio del todo o al final del todo. Nunca por medio del código HTML.

5. No es recomendable usar tablas (table) de esa manera. Hay métodos mucho más apropiados para colocar contenido en varias columnas.

___________

Segundo, voy a por la duda de los "bordes múltiples" ahora.

En los lenguajes informáticos nunca suele haber una única manera de hacer las cosas. Meter una caja dentro de otra para generar bordes múltiples es una posible solución. Otra, que yo uso a veces, es usar box-shadow dentro de una misma caja, para generar varias sombras que parezcan bordes. El problema es que el box shadow genera la sombra en las 4 direcciones, así que no sirve siempre. Por ejemplo

Código:
   <div style="width:50%; height:100px; margin: 0 auto; background: white; box-shadow: 0px 0px 0px 10px #434, 10px 0px 0px 10px orchid, -3px 0px 0px 10px tomato;"></div>

Depende del método con el que cada cual se sienta más cómodo o lo vea más sencillo en este caso.

______

Tercero, las lineas esas que tienes para subrayar los títulos.

Para hacer una linea muy fina, no merece la pena usar un div. Y aún en el caso de que queramos usarlo, es más cómodo generar la linea a partir del borde, no del background. Osea, en vez de esto

Código:
   <div style="width: 410px; height: 1px; margin-left: -20px; padding: 0px; background-color:#180C1F;"></div>

Mejor esto

Código:
   <div style="width: 410px; margin-left: -20px; border-top: solid 1px #180C1F;"></div>

Por cierto, el padding YA es cero por defecto. No hace ninguna falta en este caso. Lo mismo para los background: transparent; Los divs YA son transparentes por defecto, sólo es necesario indicárselo en casos muy especiales. Es bueno ahorrar código.

A tenor de esto, ten en cuenta también que los divs, por defecto, ocupan siempre el 100% del ancho de donde están puestos. Entonces en los casos en los que el div ocupe todo el ancho de una caja, no es necesario indicarselo.

Por lo que podríamos coger este trozo de tu código

   
Código:
<div style="width: 410px; height: 1px; margin-left: -20px; padding: 0px; background-color:#180C1F;"></div><div style="width: 410px; height: 1px; margin-left: 20px; padding: 3px; background-color:transparent;"><div style="width: 410px; height: 1px; margin-left: 10px; padding: 0px; background-color:#8a5cad;"></div>

Y resumirlo en algo asi (me he inventado los numeros los ajustas al efecto que desees)

   


Código:
   <div style="margin-left: 40px; margin-right:80px; border-top: solid 1px #180C1F; height:5px;"></div><div style="margin-left: 80px; margin-right:40px; border-top: solid 1px #8a5cad;"></div>

Fijate que la separación entre ambos divs la genera la altura del primer div, simplemente, sin necesidad de añadir otro elemento. También se podría generar por un margin-bottom.

____

Cuarto, esta parte de tu duda

   Del mismo modo, para arreglar el descuadre de las letras de ambas tablas tuve que encerrarlas a todas en otras cajas transparentes. ¿Debería haberlas colocado en un span en vez de un div? ¿Qué se recomienda en esos casos?

La verdad, no entiendo a qué te refieres. Si me intentas explicar un poco mejor cual era el problema que te llevó a tomar esa solución, te podré responder. Lo que si puedo decirte, de nuevo, es que indicarle que el fondo transparente no es necesario. Ya veras como si quieras el "transparent" de todo tu código, se queda como está.

También, en esta zona es más recomendable que en ninguna otra usar una clase CSS para darle estilo a todos esos títulos. Para no tener que copiar una y otra vez las mismas propiedades para cada linea de titulo.

_____

Quinto, el tema de las "alturas".

Primero, no entiendo porqué pones height: auto; por todas partes. No es necesario en ninguna parte de tu tabla. De nuevo, height: auto; es la propiedad por defecto. No es necesario indicar el height de un div a no ser que desees modificarlo.

De hecho, te recomiendo quitar el height: auto de todos los sitios en los que lo has puesto y estoy 99% segura de que nada se descuadraría. Es totalmente redundante ponerlo.

Todos los div o tablas se ajustarán automaticamente al contenido de texto que les pongas dentro. Es su funcionamiento natural.

___

No se si te he ayudado o te he liado más, pero de momento lo dejo aquí, que creo que tienes bastante. Prueba a hacer las modificaciones que te he comentado y me dices si te dan algún problema, y juntas por aquí podemos ir optimizando el código hasta que quede perfecto.

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Jue Mar 09, 2017 10:28 pm

Ante todo, muchas gracias por contestar. Sí hay algunas cosas que no entendí del todo, pero la mayor parte me fue de mucha utilidad, hay muchas cosas de las que no tenía ni idea y tu comentario me aclaró bastante el panorama. Principalmente por lo de los estilos. Siempre los vi en otras tablillas y nunca entendí cómo se armaban o para qué servían, ahora creo que lo entiendo un poco mejor.

 
 Cuarto, esta parte de tu duda

     

       Del mismo modo, para arreglar el descuadre de las letras de ambas tablas tuve que encerrarlas a todas en otras cajas transparentes. ¿Debería haberlas colocado en un span en vez de un div? ¿Qué se recomienda en esos casos?



   La verdad, no entiendo a qué te refieres. Si me intentas explicar un poco mejor cual era el problema que te llevó a tomar esa solución, te podré responder. Lo que si puedo decirte, de nuevo, es que indicarle que el fondo transparente no es necesario. Ya veras como si quieras el "transparent" de todo tu código, se queda como está.

Con respecto a eso, me refiero a que trabajando en Firefox, las letras grandes que van dentro de las tablas se veían de maravilla así como estaban, pero al pasar a visualizarlo en Chrome vi que todo se "caía" hacia abajo en fila. Para arreglarlo, tuve que introducir las propiedades de width y height con fondo transparente dentro del div de ese texto.

Por ponerlo de otra manera, creo que se entenderá mejor si coloco el antes y el después.

Así me aparecía antes de meter el texto en cajas transparentes:

spoiler

El código lo tenía de esta manera:

Código:
   <div style="font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">K-L-M-N-O</div>

Y después de meterlo en las cajas transparentes quedó así:

spoiler

Lo que hice fue añadirle más cosas al código:

Código:
   <div style="width: 62px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">K-L-M-N-O</div>

También mencionaste que había otra forma de centrar las cosas y utilizar las tablas. ¿Podrías explicarme un poco mejor? No tengo idea de cómo sería su uso correcto para este tipo de cosas. Y de ser posible, también me interesa saber con más detalle ese asunto de los estilos, que no comprendí muy bien cómo usarlo.

Gracias de nuevo por la ayuda y por la paciencia. Editaré la tablilla según las correcciones que me has hecho. Para postear el resultado, ¿lo hago en este mismo tema?

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Jue Mar 09, 2017 10:35 pm

No te preocupes, puedes preguntar todo lo que no entiendas, estamos aquí para aprender.

A. Arreglando los subtitulos

Una vez veo la duda explicada, ese desajuste tiene que ver con cómo has construido esos dos "bordes" de la izquierda de cada titulo. Al usar los margins para posicionarlos, haces que se descuadre todo. Además, se puede reducir muchísimo esa parte del código.

Es decir, tienes esto

Código:
   <center><div style="width: 2px; height: 15px; background-color: #e65c5c; padding: 2px; margin-left: -70px;"><div style="width: 6px; height: 15px; background-color: #180C1F; padding: 2.3px; margin-left: 3px; margin-top: -2px;"><div style="width: 62px; height: 15px; background-color: transparent; font-family: 'Anton', cursive; color: #180C1F; font-size: 16px; text-align: center; margin-left: 10px; margin-top: 1px;">A-B-C-D-E</div></div></div></center>

Cuando podrías usar algo asi:

Código:
   <div style="width:90px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c;">A-B-C-D-E</div>

El resultado a la vista es prácticamente el mismo:

   
A-B-C-D-E


Pero ademas te genera las siguientes ventajas:
— Lo tenemos en un solo div, en vez de necesitar 4
— No usamos center
— Hemos pasado de tener 453 caracteres a tener 189 para cada titulo
— Por lo tanto, nuestro código será más corto, más eficiente y más fácil de editar.

Aprovecho esto para explicarte lo de los estilos CSS. Ahora mismo si quieres poner 20 subtitulos igual que ese, tendrías que copiar 20 veces, esa linea de código que te he dado.

Sin embargo, como todos los subtitulos tienen el mismo estilo (el mismo aspecto, las mismas propiedades CSS), lo más normal es utilizar lo que llamamos una clase.

Esto se hace de la manera siguiente:

Tenemos este código

Código:
   <div style="width:90px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c;"> Texto </div>

Creamos, arriba del todo o abajo del todo del código, la etiqueta style

Código:
   <style>  Aqui irá el CSS </style>

    <div style="width:90px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c;"> Texto </div>

Escogemos un nombre para la clase. Por ejemplo, misletras

Las clases se indican en el CSS poniendo un punto y después, su nombre, asi

Código:
   <style>.misletras {  Aqui va el CSS de la clase misletras } </style>

Copiamos todas propiedades CSS de nuestro div dentro de esta clase

Código:
   <style>.misletras { width:90px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c; } </style>

    <div style=" "> Texto </div>

Le decimos a nuestro div qué clase tiene que usar

Código:
   <style>.misletras { width:90px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c; } </style>

    <div class="misletras"> Texto </div>

Ahora, cada vez que usemos esa clase, dentro de la tablilla, automaticamente los div cogerán las propiedades CSS de la clase, sin tener que repetirlas una y otra vez. Por ejemplo

Código:
   <style>.misletras { width:90px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c; } </style>

    <div class="misletras"> Texto 1 </div>
    <div class="misletras"> Texto 2 </div>
    <div class="misletras"> Texto 3 </div>
    <div class="misletras"> Texto 4 </div>

   

   
Texto 1

   
Texto 2

   
Texto 3

   
Texto 4


Repitiendo esto con todos nuestros divs, conseguiremos que TODO el CSS esté por un lado y todo el HTML esté por otro lado. Y así será más sencillo editar y trabajar con ambos.

Hay que tener cuidado al escoger los nombres de las clases

El nombre de una clase tiene que ser lo suficientemente descriptivo para que nosotros sepamos lo que hay dentro, pero que no sea una palabra de uso muy habitual porque entonces puede "chocar" con otras clases que se llamen igual.

Por ejemplo, evita llamar a tu clase con palabras muy comunes como "texto" o "titulo", puede generar conflicto si hay cosas en el skin del foro que ya se llaman de esa manera ^^

Para más información sobre esto, te recomiendo leer los tutoriales básicos que tenemos en el foro sobre el lenguaje CSS, empezando por lo básico: http://sourcecode.foroactivo.com/t293-css-como-llamar-elementos

____

B. Centrar elementos

Para centrar el contenido interior de cualquier caja, se utiliza la propiedad text-align: center;

Para centrar la caja con respecto a los elementos que hay fuera de ella, se utiliza la propiedad margin: auto;

Por ejemplo, para que una tablilla aparezca centrada en el post, simplemente tienes que poner el margin: auto en el div más exterior.

   
Contenido


Código:
   <div style="margin: auto; width: 45%; background: pink; padding: 10px;"> Contenido </div>

_____

C. Colocar cosas en columnas sin usar tablas

Esto es un poco más avanzado, pero para lo que necesitas ahora te puede bastar con conocer la propiedad display:inline-block; Si la usas en conjunción con el width, te permite poner los bloques en columnas.

Por ejemplo

   
   
Columna 1
Columna 2


Código:
   <style>.doscolumnas { display:inline-block; background: khaki; padding: 10px; margin: 5px; width: 45%; }</style>
    <div class="doscolumnas">Columna 1</div><div class="doscolumnas">Columna 2</div>

   
   
Columna 1
Columna 2
Columna 3


Código:
   <style>.trescolumnas { display:inline-block; background: palegreen; padding: 10px; margin: 5px; width: 28%; }</style>
    <div class="trescolumnas">Columna 1</div><div class="trescolumnas">Columna 2</div><div class="trescolumnas">Columna 3</div>

Sólo hay que tener cuidado de que el ancho TOTAL no sea mayor que el 100% del ancho de la caja que los contiene (en este caso, que el post).

La explicación de porqué esto funciona así, la tienes en este tutorial, entre otras muchas cosas: http://sourcecode.foroactivo.com/t9912-tipos-de-elementos-html-y-el-uso-de-display

____

Y de momento creo que esto es todo. Coméntame cualquier cosa que no hayas entendido o que necesites que explique de nuevo. Y si, puedes ir posteando aquí tus progresos con el código. Seguro que luego es divertido comparar la cantidad de caracteres que hemos conseguido optimizarlo con respecto a la primera versión

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Jue Mar 09, 2017 10:36 pm

OMG. Este tema prácticamente lo puedo consagrar como la gran iluminación No sabía que podía conseguir esos resultados sin andar metiéndole tanto código a la pobre tablilla.

Recuerdo haber visto lo del display:inline-block; en uno de tus tutoriales, pero no se me ocurrió usarlo para esto. Probaré con ese en la siguiente tablilla que lleve distintas filas.

La verdad que estoy aprendiendo mucho de esta revisión, y de hecho sí es cierto lo último que mencionaste. El tamaño total del código de la tablilla se redujo de forma drástica, jamás pensé que podría economizarse tanto en materia de códigos y llegar al mismo resultado. De hecho, voy a dejar el código actual aquí abajo para que se aprecie mejor la diferencia

Lo que sí no entiendo es por qué a mí en la tablilla me queda tanto espacio entre los cuadritos de colores y el título, a pesar de que en el style está colocado todo junto.

spoiler

Código:
    <center><style> .caja { width:90px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c; } </style><div style="width: 520px; height: auto; background-color: #180C1F; border-left:2px solid #e65c5c; border-right:8px solid #8a5cad;"><div style="width: 510px; height: auto; background-color: #f2f2f2; margin-left: 5px; margin-right: 0px;"><link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Sansita' rel='stylesheet' type='text/css'><div style="font-family:'Anton'; color: #8a5cad; text-align: left; font-size: 36px; margin-top: 0px; padding: 20px; text-shadow: 1.4px 2px 0px #e65c5c;">•<span style="color: #180C1F;">P</span>ersonajes <span style="color: #180C1F;">o</span>cupados</div><div style="width: 410px; height: 1px; margin-left: -20px; padding: 0px; background-color:#180C1F;"></div><div style="width: 410px; height: 1px; margin-left: 20px; padding: 3px;"><div style="width: 410px; height: 1px; margin-left: 10px; padding: 0px; background-color:#8a5cad;"></div></div>
    <div style="width:440px; border-left: 5px dotted #e65c5c; border-right: 1px solid #e65c5c; font-family:'Sansita'; color: #180C1F; font-size: 13px; padding: 3px; text-align: center; line-height:105%;"> ► Algunas normas por acá.
    ► Otras por acá.
    ► Efecto de resaltador en los colores de los personajes <span style="background: #eb84dc;">femeninos</span>, <span style="background: #96b8f2;">masculinos</span> y <span style="background: #d2ff08;">reservados</span>.
    </div>
    <div style="width: 510px;"><table><tr><td><div style="width: 230px; padding: 5px; font-family: 'Anton', cursive; color: #96b8f2; font-size: 16px; text-align: left; line-height: 99%; center; margin-top: -45px;">•<span style="color: #180C1F;">P</span>ERSONAJES <span style="color: #180C1F;">M</span>ASCULINOS</div><div style="width: 190px; height: 1px; margin-left: 0px; padding: 0px; background-color:#180C1F;"></div><div style="width: 190px; height: 1px; margin-left: 20px; padding: 3px;"><div style="width: 190px; height: 1px; margin-left: 10px; background-color:#8a5cad;"></div></div><div style="width: 245px; height: 500px; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; line-height: 105%; letter-spacing: -0.1px;">
    <div class="caja">A-B-C-D-E</div>texto por aquí
    texto por aquí

    <div class="caja">F-G-H-I-J</div>texto por aquí
    texto por aquí
    <div class="caja">K-L-M-N-O</div>texto por aquí
    texto por aquí
    <div class="caja">P-Q-R-S-T</div>texto por aquí
    texto por aquí
    <div class="caja">U-V-W-X-Y-Z</div>texto por aquí
    texto por aquí
    </div></div></div></div></div>
    </td>
    <td><div style="width: 240px; padding: 5px; font-family: 'Anton', cursive; color: #eb84dc; font-size: 16px; text-align: right; line-height: 99%; center; margin-top: -45px;">•<span style="color: #180C1F;">P</span>ERSONAJES <span style="color: #180C1F;">F</span>EMENINOS</div><div style="width: 190px; height: 1px; margin-left: 60px; padding: 0px; background-color:#180C1F;"></div><div style="width: 190px; height: 1px; margin-left: 20px; padding: 3px;"><div style="width: 190px; height: 1px; margin-right: 10px; padding: 0px; background-color:#8a5cad;"></div></div><div style="width: 255px; height: 500px; border-left: solid 1px #e65c5c; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; margin-left: -1px; line-height: 105%; letter-spacing: -0.1px;">
    <div class="caja">A-B-C-D-E</div>texto por aquí
    texto por aquí
      <div class="caja">F-G-H-I-J</div>texto por aquí
    texto por aquí
      <div class="caja">K-L-M-N-O</div>texto por aquí
    texto por aquí
      <div class="caja">P-Q-R-S-T</div>texto por aquí
    texto por aquí
    <div class="caja">U-V-W-X-Y-Z</div>texto por aquí
    texto por aquí
    </div></div></div></div></div>
    </div></td>
    </tr></table>
    <div style="width: 510px; heigt: 15px; background-color: #180C1F; margin-top: 0px; font-family: 'Anton', cursive; color: #d2ff08; font-size: 16px; text-align: center;">RESERVAS</div>
    <div style="width: 450px; heigt: auto; background-color: #ffffff; border-radius: 10px; font-family: 'Sansita', cursive; color: #180C1F; font-size: 13px; text-align: center;">texto por aquí
    texto por aquí
    texto por aquí</div>
    </div></div></div>
    <div style="width: 300px;"><div style="font-family:'Verdana'; color: #180C1F; text-align: center; font-size: 9px; margin-top: -25px;">Supernatural</div></div></center>

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Jue Mar 09, 2017 10:37 pm

Es por culpa del centrado del div que lo contiene. Ten en cuenta que las propiedades CSS se heredan de unos divs a otros. Si el div de fuera tiene "center" todos los de dentro también lo tendrán.

Y por favor, no dejes la clase nombrada como "caja", es aun peor que "texto" y "titulo". Esto es como lo de ponerse como contraseña "1234" xDDDD

Ánimo aplicando el resto de recomendaciones

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Jue Mar 09, 2017 10:37 pm

¡Aleluya!

Después de aplicar muchas de las correcciones que me hiciste y corregir todo lo que había que alinear tras quitar el center, puedo decir que ¡estoy muy contenta de finalmente haber terminado mi primera tablilla decente!

Ver el antes y el después es increíble, los códigos parecen de dos tablillas completamente distintas. Y si bien no pude aplicar todo lo que señalaste, gracias a tu ayuda conseguí pulirla lo suficiente para lograr un resultado aceptable. De verdad, muchas gracias, aprendí un montón corrigiendo esta tabla. Intentaré aplicar estas nuevas herramientas en mis siguientes diseños.

Código:
    <style> .aleluya { width:65px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c; } </style><link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Sansita' rel='stylesheet' type='text/css'><div style="width: 520px; height: auto; background-color: #180C1F; border-left:2px solid #e65c5c; border-right:8px solid #8a5cad;"><div style="width: 510px; height: auto; background-color: #f2f2f2; margin-left: 5px; margin-right: 0px;"><div style="font-family:'Anton'; color: #8a5cad; text-align: left; font-size: 36px; margin-top: 0px; padding: 20px; text-shadow: 1.4px 2px 0px #e65c5c;">•<span style="color: #180C1F;">F</span>ísicos <span style="color: #180C1F;">o</span>cupados</div><div style="width: 410px; height: 1px; margin-left: 35px; padding: 0px; background-color:#180C1F;"></div><div style="width: 410px; height: 1px; margin-left: 20px; padding: 3px;"><div style="width: 410px; height: 1px; margin-left: 45px; padding: 0px; background-color:#8a5cad;"></div></div>
    <div style="margin:auto; width:440px; border-left: 5px dotted #e65c5c; border-right: 1px solid #e65c5c; font-family:'Sansita'; color: #180C1F; font-size: 13px; padding: 3px; text-align: center; line-height:105%;"> ► Algunas normas por acá.
    ► Otras por acá.
    ► Efecto de resaltador en los colores de los personajes <span style="background: #eb84dc;">femeninos</span>, <span style="background: #96b8f2;">masculinos</span> y <span style="background: #d2ff08;">reservados</span>.
    </div>
    <div style="width: 510px;"><table><tr><td><div style="width: 230px; padding: 5px; font-family: 'Anton', cursive; color: #96b8f2; font-size: 16px; text-align: left; line-height: 99%; margin-top: -45px;">•<span style="color: #180C1F;">P</span>ERSONAJES <span style="color: #180C1F;">M</span>ASCULINOS</div><div style="width: 190px; height: 1px; margin-left: 5px; padding: 0px; background-color:#180C1F;"></div><div style="width: 190px; height: 1px; margin-left: 20px; padding: 3px;"><div style="width: 190px; height: 1px; margin-left: 10px; background-color:#8a5cad;"></div></div><div style="width: 245px; height: 500px; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; line-height: 105%; letter-spacing: -0.1px;">
    <div class="aleluya">A-B-C-D-E</div>texto por aquí
    texto por aquí

    <div class="aleluya">F-G-H-I-J</div>texto por aquí
    texto por aquí
    <div class="aleluya">K-L-M-N-O</div>texto por aquí
    texto por aquí
    <div class="aleluya">P-Q-R-S-T</div>texto por aquí
    texto por aquí

    <div style="width:80px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c;">U-V-W-X-Y-Z</div>texto por aquí
    texto por aquí
    </div></div></div></div></div>
    </td>
    <td><div style="width: 240px; padding: 5px; font-family: 'Anton', cursive; color: #eb84dc; font-size: 16px; text-align: right; line-height: 99%; center; margin-top: -45px; margin-left: 11px;">•<span style="color: #180C1F;">P</span>ERSONAJES <span style="color: #180C1F;">F</span>EMENINOS</div><div style="width: 190px; height: 1px; margin-left: 65px; padding: 0px; background-color:#180C1F;"></div><div style="width: 190px; height: 1px; margin-left: 20px; padding: 3px;"><div style="width: 190px; height: 1px; margin-left: 10px; padding: 0px; background-color:#8a5cad;"></div></div><div style="width: 255px; height: 500px; border-left: solid 1px #e65c5c; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; margin-left: 3px; line-height: 105%; letter-spacing: -0.1px;">
    <div class="aleluya">A-B-C-D-E</div>texto por aquí
    texto por aquí
      <div class="aleluya">F-G-H-I-J</div>texto por aquí
    texto por aquí
      <div class="aleluya">K-L-M-N-O</div>texto por aquí
    texto por aquí
      <div class="aleluya">P-Q-R-S-T</div>texto por aquí
    texto por aquí

    <div style="width:80px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c;">U-V-W-X-Y-Z</div>texto por aquí
    texto por aquí
    </div></div></div></div></div>
    </div></td>
    </tr></table>
    <div style="width: 510px; heigt: 15px; background-color: #180C1F; margin-top: 0px; font-family: 'Anton', cursive; color: #d2ff08; font-size: 16px; text-align: center;">RESERVAS</div>
    <div style="margin: auto; width: 450px; heigt: auto; background-color: #ffffff; border-radius: 10px; font-family: 'Sansita', cursive; color: #180C1F; font-size: 13px; text-align: center;">texto por aquí
    texto por aquí
    texto por aquí</div>
    </div></div></div>
    <div style="margin: auto; width: 300px;"><div style="font-family:'Verdana'; color: #ffffff; text-align: center; font-size: 9px; margin-top: -25px;">Supernatural</div></div>

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Dom Mar 12, 2017 1:22 pm

Bueno, la idea era que aplicases las recomendaciones a toda la tablilla. Sólo tienes una clase CSS. Ahora es repetir el procedimiento con el resto de elementos de la tabla. De otra manera, el código está a medias ^^

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Dom Mar 12, 2017 1:22 pm

¿Cómo? ¿No se suponía que esa clase CSS ya englobaba toda la zona de los títulos? ¿O necesito ponerle más?

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Dom Mar 12, 2017 1:23 pm

Esa clase es para los titulos, si. Pero ¿qué pasa con el resto de la tablilla?

Como te expliqué más arriba, el objetivo es separar TODO el código CSS por un lado (dentro del style) y el HTML por el otro.

Es decir, cambiar todos los

Código:
    <div style="codigos codigos codigos mas codigos todavia mas codigos">

Por div con clases

Código:
    <div class="clase1">

Y mientras lo haces, intentar optimizar cada zona, igual que te he enseñado con el ejemplo de los titulos (que pasamos de tener 4 divs a tener uno).
Para eso te he explicado el procedimiento de cómo hacerlo

A la tabla aun le queda mucho camino por delante ^^

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Dom Mar 12, 2017 1:25 pm

Okay... creo que hay algo raro aquí, porque según lo que tengo entendido, las clases CSS en teoría eran para ahorrar códigos y poder simplificar las etiquetas de un contenido repetitivo. Lo que hice fue encerrar en clases CSS el resto de los códigos que tenía la tablilla, pero más bien me parece que en vez de ahorrar códigos sucedió lo contrario. Como que hay demasiado bulto arriba de todo, incluso para cosas innecesarias.

No sé si era eso lo que debía hacer, capaz entendí mal y metí un exceso de clases CSS. Pero mientras lo hacía me vinieron algunas dudas.

¿Qué diferencia hay entre colocar esto

Código:
    <style type="text/css">

y esto?

Código:
    <style>

¿Qué diferencia hay entre dejar la tablilla con la versión anterior y esta (suponiendo que era esto lo que debía hacer)? ¿Le afecta en algo relevante a la estructura o era nada más para mayor comodidad a la hora de editar? Porque en apariencia no cambió mucho.

Y la última duda, yo había pensado que la versión anterior ya estaba completa, aunque al parecer no resultó ser así. ¿Cómo puedo saber si la tablilla ya está satisfactoriamente terminada o no?

Dejaré por aquí al pequeño Frankenstein que salió luego de los últimos arreglos (creo que a esto te referías con lo de separar el CSS por un lado y el HTML por otro).

Código:
    <style> .aleluya { width:65px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c; }</style><style> .titulofamiliar { font-family:'Anton'; color: #8a5cad; text-align: left; font-size: 36px; margin-top: 0px; padding: 20px; text-shadow: 1.4px 2px 0px #e65c5c;}</style><style type="text/css">.rayita1 { width: 410px; height: 1px; margin-left: 35px; padding: 0px; background-color:#180C1F;} .rayita2 { width: 410px; height: 1px; margin-left: 20px; padding: 3px;"><div style="width: 410px; height: 1px; margin-left: 45px; padding: 0px; background-color:#8a5cad}</style><style type="text/css">.cajatexto { margin:auto; width:440px; border-left: 5px dotted #e65c5c; border-right: 1px solid #e65c5c; font-family:'Sansita'; color: #180C1F; font-size: 13px; padding: 3px; text-align: center; line-height:105%;}</style><style> .titulocajitas1 {width: 230px; padding: 5px; font-family: 'Anton', cursive; color: #96b8f2; font-size: 16px; text-align: left; line-height: 99%; margin-top: -45px;}</style><style> .titulocajitas2 { width: 240px; padding: 5px; font-family: 'Anton', cursive; color: #eb84dc; font-size: 16px; text-align: right; line-height: 99%; center; margin-top: -45px; margin-left: 11px;}</style><style type="text/css">.rayitaboys1 { width: 190px; height: 1px; margin-left: 5px; padding: 0px; background-color:#180C1F;} .rayitaboys2 { width: 190px; height: 1px; margin-left: 10px; background-color:#8a5cad;}</style><style type="text/css">.rayitagirl1 { width: 190px; height: 1px; margin-left: 65px; padding: 0px; background-color:#180C1F;} .rayitagirl2 { width: 190px; height: 1px; margin-left: 10px; padding: 0px; background-color:#8a5cad;}</style><style> .fila1 { width: 245px; height: 500px; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; line-height: 105%; letter-spacing: -0.1px;}</style><style> .fila2 { width: 245px; height: 500px; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; line-height: 105%; letter-spacing: -0.1px;}</style><style> .reservas { width: 510px; heigt: 15px; background-color: #180C1F; margin-top: 0px; font-family: 'Anton', cursive; color: #d2ff08; font-size: 16px; text-align: center;}</style><style> .bloque { margin: auto; width: 450px; heigt: auto; background-color: #ffffff; border-radius: 10px; font-family: 'Sansita', cursive; color: #180C1F; font-size: 13px; text-align: center}</style>
    <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Sansita' rel='stylesheet' type='text/css'><div style="width: 520px; height: auto; background-color: #180C1F; border-left:2px solid #e65c5c; border-right:8px solid #8a5cad;"><div style="width: 510px; height: auto; background-color: #f2f2f2; margin-left: 5px; margin-right: 0px;"><div class="titulofamiliar">•<span style="color: #180C1F;">F</span>ísicos <span style="color: #180C1F;">o</span>cupados</div><div class="rayita1"></div><div style="width: 410px; height: 1px; margin-left: 20px; padding: 3px;"><div class="rayita2"></div></div>
    <div class="cajatexto">► Algunas normas por acá.
    ► Otras por acá.
    ► Efecto de resaltador en los colores de los personajes <span style="background: #eb84dc;">femeninos</span>, <span style="background: #96b8f2;">masculinos</span> y <span style="background: #d2ff08;">reservados</span>.
    </div>
    <div style="width: 510px;"><table><tr><td><div class="titulocajitas1">•<span style="color: #180C1F;">P</span>ERSONAJES <span style="color: #180C1F;">M</span>ASCULINOS</div><div class="rayitaboys1"></div><div style="width: 190px; height: 1px; margin-left: 20px; padding: 3px;"><div class="rayitaboys2"></div></div><div class="fila1">
    <div class="aleluya">A-B-C-D-E</div>texto por aquí
    texto por aquí

    <div class="aleluya">F-G-H-I-J</div>texto por aquí
    texto por aquí

    <div class="aleluya">K-L-M-N-O</div>texto por aquí
    texto por aquí

    <div class="aleluya">P-Q-R-S-T</div>texto por aquí
    texto por aquí

    <div style="width:80px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c;">U-V-W-X-Y-Z</div>texto por aquí
    texto por aquí
    </div></div></div></div></div>
    </td>
    <td><div class="titulocajitas2">•<span style="color: #180C1F;">P</span>ERSONAJES <span style="color: #180C1F;">F</span>EMENINOS</div><div class="rayitagirl1"></div><div style="width: 190px; height: 1px; margin-left: 20px; padding: 3px;"><div class="rayitagirl2"></div></div><div class="fila2">
    <div class="aleluya">A-B-C-D-E</div>texto por aquí
    texto por aquí
    <div class="aleluya">F-G-H-I-J</div>texto por aquí
    texto por aquí
    <div class="aleluya">K-L-M-N-O</div>texto por aquí
    texto por aquí
    <div class="aleluya">P-Q-R-S-T</div>texto por aquí
    texto por aquí

    <div style="width:80px; margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c;">U-V-W-X-Y-Z</div>texto por aquí
    texto por aquí
    </div></div></div></div></div>
    </div></td>
    </tr></table>
    <div class="reservas">RESERVAS</div>
    <div class="bloque">texto por aquí
    texto por aquí
    texto por aquí</div>
    </div></div></div>

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Dom Mar 12, 2017 1:30 pm

Tranquila, vamos por partes. Esto es un proceso de ir corrigiendo el código poco a poco hasta que lo tengamos lo más depurado posible. ¿Cómo puedes saber cuando esta lo mejor posible? Sólo con la experiencia.

Primero de todo ¡claro que arriba tienes mucho código! Es que no está puesto bien. Has hecho esto:

Código:
    <style> Codigo </style>
    <style> Codigo </style>
    <style> Codigo </style>
    <style> Codigo </style>

Cuando en realidad deberías de tener

Código:
    <style> AQUI TODOS LOS CODIGOS CSS </style>

Con respecto a lo de poner el type="text/css" o no, ambos funcionan de la misma forma. Sin embargo, tienes razón en que es más correcto ponerlo. Yo no lo puse en la primera explicación para evitar liarte con ello.

Luego, ten cuidado, porque hay algunas cosas que no has copiado bien. Dentro del CSS se te ha escapado algún div, por ejemplo.

Código:
    <style type="text/css">.rayita1 { width: 410px; height: 1px; margin-left: 35px; padding: 0px; background-color:#180C1F;} .rayita2 { width: 410px; height: 1px; margin-left: 20px; padding: 3px;"><div style="width: 410px; height: 1px; margin-left: 45px; padding: 0px; background-color:#8a5cad}</style>


Esto es un error muy grave, probablemente parte del codigo no se esté ejecutando.

Luego, sobre la optimización del código. No se trata de ponerle a cada div una clase distinta. Se trata de buscar cuales son los que pueden tener la misma clase, así es como ahorras código.

Ejemplo 1, para los titulos de "personajes masculinos" y "personajes femeninos" has creado dos clases. Te basta con una sola y con muchísimo menos código en cada una.

Tu tienes esto:

Código:
    .titulocajitas1 {width: 230px; padding: 5px; font-family: 'Anton', cursive; color: #96b8f2; font-size: 16px; text-align: left; line-height: 99%; margin-top: -45px;} .titulocajitas2 { width: 240px; padding: 5px; font-family: 'Anton', cursive; color: #eb84dc; font-size: 16px; text-align: right; line-height: 99%; center; margin-top: -45px; margin-left: 11px;}

Son practicamente el mismo código. Ponlo en una sola clase. Además, los margenes y los width no son necesarios ahi. Fijate

Código:
    .titulocaj { padding: 5px; font-family: Anton; font-size:16px; line-height:99%; }

Código:
    <div class="titulocaj" style="color:#96b8f2;">Texto 1</div>
    <div class="titulocaj" style="color:#eb84dc; text-align:right;">Texto 2</div>

Mismo resultado.

Ejemplo 2. Para las rayitas moradas y negras que tienes, has creado 6 clases cuando basta con una sola, o dos como muchísimo y no has corregido el código de las rayas tal y como te expliqué, sigues teniendo 3 divs para crear cada pareja de rayas.

Ejemplo 3. Para poner esas letras en "negro", que tienes varias veces, cada vez pones lo siguiente

Código:
    <span style="color: #180C1F;">P</span>

Cuando podrías tener una clase y aplicarla

Código:
    .negri { color: #180C1F; }

Código:
    <span class="negri">P</span>

Lo que además tiene la ventaja de que si quieres cambiar ese color, sólo lo tienes que cambiar una vez, en el CSS, no lo tienes que ir buscando y cambiando por todo tu HTML.

Ejemplo 4. Muchas de las clases que has hecho se pueden reducir, tienen código absolutametne innecesario, por ejemplo

Código:
    .titulofamiliar { font-family:'Anton'; color: #8a5cad; text-align: left; font-size: 36px; margin-top: 0px; padding: 20px; text-shadow: 1.4px 2px 0px #e65c5c;}

Aqui, el "text-align: left;" no es necesario. El texto ya se alinea él solito a la izquierda por defecto. Tampoco sirve para nada el margin-top: 0. Podrías quitar ambas propiedades y el texto ni se inmutaría.

Esto es algo que tienes que analizar en cada uno de los divs de tu foro. ^^


No se si he conseguido explicarme mejor esta vez. Sino, por favor, pregunta lo que sea. Vete realizando este tipo de cambios y vamos viendo que tal la siguiente versión ^^

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Trollface el Dom Mar 12, 2017 1:31 pm

Ahh, claro, ahora tiene más sentido XD ya entendí por qué me quedó tan rara. Yo pensaba que una vez agrupado en la clase CSS, al ponerle las etiquetas al contenido que quería modificar, ya no podía agregarle más nada, por eso puse mil estilos. Pero viendo tu ejemplo con lo de los títulos de los personajes masculinos y femeninos ya se me iluminó más el panorama.

Esta vez sólo encerré en las clases CSS lo que consideré necesario, las cosas que se repiten. Pero aún así le ocurrió algo raro a la tablilla, porque de pronto se hizo un montón de espacio entre ciertas secciones y no logro descubrir por qué. Además de que en la previsualización me salen las dos líneas pequeñas bien, pero al postearlo aparece deformado.

SPOILER

Ahora el código me quedó así:

Código:
   <style type="text/css"> .aleluya {margin: auto; border-left: solid 10px #180C1F; font-family: Anton; color: #180C1f; font-size:16px; padding: 1px 5px; box-shadow: -6px 0 0 0 #e65c5c; } </style><style type="text/css">.raya1 { margin-left: 40px; margin-right:80px; border-top: solid 1px #180C1F; height:3px;} .raya2 { margin-left: 80px; margin-right:40px; border-top: solid 1px #8a5cad;}</style><style type="text/css"> .titulofamiliar { font-family:'Anton'; color: #8a5cad; font-size: 36px; padding: 20px; text-shadow: 1.4px 2px 0px #e65c5c;}</style><style type="text/css"> .negri { color: #180C1F; }</style><style type="text/css"> .titulocaj { padding: 5px; font-family: Anton; font-size:16px; line-height:99%; }</style><style type="text/css">.rayita1 { border-top: solid 1px #180C1F; height:3px;} .rayita2 { border-top: solid 1px #8a5cad;}</style>
    <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Sansita' rel='stylesheet' type='text/css'><div style="width: 520px; height: auto; background-color: #180C1F; border-left:2px solid #e65c5c; border-right:8px solid #8a5cad;"><div style="width: 510px; height: auto; background-color: #f2f2f2; margin-left: 5px; margin-right: 0px;"><div class="titulofamiliar">•<span class="negri">F</span>ísicos <span class="negri">o</span>cupados</div><div class="raya1"></div><div class="raya2"></div>
    <div style="margin:auto; width:440px; border-left: 5px dotted #e65c5c; border-right: 1px solid #e65c5c; font-family:'Sansita'; color: #180C1F; font-size: 13px; padding: 3px; text-align: center; line-height:105%;"> ► Algunas normas por acá.
       ► Otras por acá.
       ► Efecto de resaltador en los colores de los personajes <span style="background: #eb84dc;">femeninos</span>, <span style="background: #96b8f2;">masculinos</span> y <span style="background: #d2ff08;">reservados</span>.
       </div>
       <div style="width: 510px;"><table><tr><td><div class="titulocaj" style="color:#96b8f2;">•<span class="negri">P</span>ERSONAJES <span class="negri">M</span>ASCULINOS</div><div class="rayita1" style="width: 190px; margin-left: 5px;"></div><div class="rayita2" style="width: 190px; margin-left: 35px;"></div><div style="width: 245px; height: 500px; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; line-height: 105%; letter-spacing: -0.1px;">
       <div class="aleluya" style="width:60px;">A-B-C-D-E</div>texto por aquí
       texto por aquí

       <div class="aleluya" style="width:55px;">F-G-H-I-J</div>texto por aquí
       texto por aquí

        <div class="aleluya" style="width:65px;">K-L-M-N-O</div>texto por aquí
       texto por aquí

        <div class="aleluya" style="width:65px;">P-Q-R-S-T</div>texto por aquí
       texto por aquí

        <div class="aleluya" style="width:75px;">U-V-W-X-Y-Z</div>texto por aquí
       texto por aquí
       </div></div></div></div></div>
       </td>
       <td><div class="titulocaj" style="color:#eb84dc; text-align:right;">•<span class="negri">P</span>ERSONAJES <span class="negri">F</span>EMENINOS</div><div class="rayita1" style="width: 190px; margin-left: 65px;"></div><div class="rayita2" style="width: 190px; margin-left: 35px;"></div><div style="width: 255px; height: 500px; border-left: solid 1px #e65c5c; font-family: Sansita; font-size: 13px; text-align: center; color: #180C1F; margin-top: 2px; margin-left: 3px; line-height: 105%; letter-spacing: -0.1px;">
       <div class="aleluya" style="width:60px;">A-B-C-D-E</div>texto por aquí
       texto por aquí

         <div class="aleluya" style="width:55px;">F-G-H-I-J</div>texto por aquí
       texto por aquí

         <div class="aleluya" style="width:65px;">K-L-M-N-O</div>texto por aquí
       texto por aquí

         <div class="aleluya" style="width:65px;">P-Q-R-S-T</div>texto por aquí
       texto por aquí

        <div class="aleluya" style="width:75px;">U-V-W-X-Y-Z</div>texto por aquí
       texto por aquí
       </div></div></div></div></div>
       </div></td>
       </tr></table>
       <div style="width: 510px; heigt: 15px; background-color: #180C1F; margin-top: 0px; font-family: 'Anton', cursive; color: #d2ff08; font-size: 16px; text-align: center;">RESERVAS</div>
       <div style="margin: auto; width: 450px; heigt: auto; background-color: #ffffff; border-radius: 10px; font-family: 'Sansita', cursive; color: #180C1F; font-size: 13px; text-align: center;">texto por aquí
       texto por aquí
       texto por aquí</div>
       </div></div></div>
       <div style="margin: auto; width: 300px;"><div style="font-family:'Verdana'; color: #ffffff; text-align: center; font-size: 9px; margin-top: -25px;">Supernatural</div></div>

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Tutorial de Hover

Mensaje  Trollface el Miér Mar 15, 2017 11:14 am

¡Buenas! Bueno, he visto que casi siempre, utilizamos el típico "opacity" para darle efectos de hover a nuestras tablillas, foros, páginas, etcétera. Pero hay muchísimas posibilidades, y me gustaría que hubiera más variedad, ya que cuanto más variedad, más bonito y más original es un foro o una tablilla. El CSS nos ofrece muchos tipos de transforms. Trataré de utilizar todos los que nos sean útiles.

¡Postea para ver el tutorial y los códigos!

movimientos planos

Esto lo podemos conseguir con un position y unos cuantos píxeles. Es uno de los hovers que más se ven junto con el opacity, pero es la base para poder combinarlos con todos los demás. ¿Cómo? Muy fácil. Cread dos cajitas. En este caso, vamos a hacer que cuando pasemos el hover por una, muestre una que aparezca por encima. El código en cuestión sería algo así:

Código:
   <div id="cajitamovarriba1">Pasa el cursor<div id="cajitamovarriba2">¡Hola! Estaba escondida.</div></div>
    <style type="text/css">#cajitamovarriba1{background:#CBC4B2;width:120px;height:120px;overflow:hidden;} #cajitamovarriba2{background:#899622;width:120px;height:120px;overflow:hidden;position:relative;top:-140px;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;} #cajitamovarriba1:hover #cajitamovarriba2{top:-14px;}</style>

¡Bien! Explicación del código y ejemplo de como furula. Primero le damos las típicas cualidades, es decir, fondo, ancho y alto. ¿Por qué le ponemos overflow:hidden a #cajitamovarriba1? Para que "esconda" todo lo que salga fuera, es decir, la segunda cajita, que irá por encima, ¿se entiende? Luego, tenemos que ponerle el position:relative; y la posición inicial a #cajitamovarriba2. Luego, en el hover (que significa que si tú pasas el cursor por el div uno, afecta al div dos) simplemente ponemos los -120px que necesita para ponerse "encima" de la otra cajita. Hay veces que tienes que experimentar un poco con los píxeles, pero no tengas miedo, que para algo está el previsualizar. Obviamente, habrá que poner un transition para que se note el movimiento.
Resultado:

   
Pasa el cursor
¡Hola! Estaba escondida.

   

Esto se puede conseguir con varios efectos, puede salir desde cualquier lado. Ejemplos varios:

zoom

Seguimos con el efecto zoom. Es un efecto que queda muy bonito. Se consigue con el scale. Podéis ver un ejemplo en el título de esta tablilla, en la parte de los links.

Código:
   <div id="cajitazoom1">Pasa el cursor<div id="cajitazoom2">¡Hola! Estaba escondida.</div></div>
    <style type="text/css">#cajitazoom1{background:#CBC4B2;width:120px;height:120px;overflow:hidden;} #cajitazoom2{background:#899622;width:120px;height:120px;overflow:hidden;position:relative;top:-14px;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity:0;} #cajitazoom1:hover #cajitazoom2{-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);opacity:1;}</style>

   
Pasa el cursor
¡Hola! Estaba escondida.

   

rotate


Ese seguro que lo habéis visto en algún que otro afiliado, ¿cierto? ¡Pues es simplísimo! Y con los círculos queda monisísimo.

Código:
   <div id="cajitarotate1">Pasa el cursor<div id="cajitarotate2">¡Hola! Estaba escondida.</div></div>
    <style type="text/css">#cajitarotate1{background:#CBC4B2;width:120px;height:120px;overflow:hidden;} #cajitarotate2{background:#899622;width:120px;height:120px;overflow:hidden;position:relative;top:-14px;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);opacity:0;} #cajitarotate1:hover #cajitarotate2{transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);opacity:1;}</style>

Ponemos el 360 para que haga vuelta completa, se puede hacer con los grados que queráis, solo cambiad 360 por el número de grados que queríes. Ejemplos:

   
Pasa el cursor
¡Hola! Estaba escondida.

   

overflow:hidden


Otros estilos de hover que no estamos acostumbrados a ver son los que no se basan en la muestra de un contenido oculto en otro div, si no que son un mismo div que se mueve para los lados. Esto se puede conseguir también con dos divs separados, pero es más fácil con uno sólo. Ejemplo de como lo usaría yo:

   
asdasdasdasdasd

   

Código:
   <div id="cajita"><div id="envoltorio"><span id="izquierda">asdasdasd</span><span id="derecha">asdasd</span></div></div>
    <style type="text/css">#envoltorio{background:#0a0a0a;width:600px;height:70px;color:#e3e3e3;} #izquierda, #derecha{float:left;height:70px;width:300px;display:inline-block;position:relative;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-o-transition:ease-in-out 0.5s;} #cajita{width:300px;height:70px;overflow:hidden;} #cajita:hover #izquierda, #cajita:hover #derecha{left:-300px;}</style>

También tenemos la aparición "parcial"; normalmente "tapamos" por completo la caja que la muestra, pero podemos hacer algo así:

   
¡Truco o Trato!
Link

   

Código:
   <div id="caja"><div id="cajota">¡Truco o Trato!<br><a href="link">Link</a></div></div>
    <style type="text/css">#caja{width:200px; height:100px; background:url(http://placehold.it/200x100);overflow:hidden;} #cajota{width:88px;background:#000;opacity:.9;height:100px;color:#fff;text-align:center;position:relative;left:-88px;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-o-transition:ease-in-out 0.5s;} #caja:hover #cajota{left:0px;}</style>

-----


Ahora ya es cuestión de vuestra imaginación. Todo se puede combinar, todo puede ser un hover chachioso que sale directamente de tu mente, solo tienes que saber como plasmarlo. ¿Que si os puedo ayudar? Sólo tenéis que comentar. Os dejo algunos efectos emulando cosas que he visto por la web.

   Holo
   

   
Código:
<a href="#" class="example1">Holo</a>
    <style type="text/css">.example1{display:inline-block;position:relative;} .example1:hover:before{content: " Holo! ";background:#000;padding:10px; border-radius:5px;text-align:center;color:#fff;position:absolute;top:-40px;opacity:1;} .example1:before{content: " Holo! ";background:#000;padding:10px; border-radius:5px;text-align:center;color:#fff;position:absolute;top:-45px;opacity:0;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-o-transition:ease-in-out 0.5s;}</style>

   
Hellous


   

Código:
   <div id="zoomie"><img src="http://placehold.it/300x200"/><span id="texto">Hellous</span></div>

    <style type="text/css">#zoomie{width:300px;height:200px;background:#121212;} #zoomie:hover img{-webkit-transform: scale(0.5);  -ms-transform: scale(0.5);  -o-transform: scale(0.5);top:-20px;} #zoomie img{transform: scale(0.5);position:relative;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-o-transition:ease-in-out 0.5s;position:relative;z-index:35;} #texto{display:block;position:relative;height:50px;top:-50px;opacity:.3;z-index:33;text-align:center;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-o-transition:ease-in-out 0.5s;} #zoomie:hover #texto{opacity:1;}</style>

Trollface
Admin

Mensajes : 128
Fecha de inscripción : 09/01/2012

Ver perfil de usuario http://faildepruebas.gratisforos.com

Volver arriba Ir abajo

Re: Archivo de SC y otros tutoriales

Mensaje  Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.