[Duda] Resuelto |Tablilla deformada

Miér Jun 26, 2019 11:24 am

Hola dios, soy yo de nuevo.jpg(?)
xddd

Originalmente iba a pedir consejos sobre esta tablilla xD pero resultó que cuando la fui a poner salía mal y muy mal hecha a comparación de como me estuvo mintiendo todo el tiempo codepen.
La verdad es que no sé que pasa, las fonts no salen como deberían, el fondo tampoco sale como debería y el final de la tablilla también está rara. aquí dejo previ de como me dice codepen que se ve y dejo como se ve en este foro.

Como me miente el codepen:

[Duda] Resuelto |Tablilla deformada XPXZBbO4_o

Cómo se ve aquí en el foro:

—Nombre:

—Edad:

—O. Sexual:

—Raza:

—Procedencia:

01. Físico

Macaroon oat cake icing gummi bears. I love ice cream cheesecake marshmallow lemon drops jelly-o macaroon toffee. Soufflé candy canes cookie ice cream tiramisu sweet roll gummies pudding jelly beans. I love oat cake bear claw. Fruitcake tootsie roll sweet. Ice cream gummies I love. Gingerbread cake macaroon I love sugar plum lollipop. Fruitcake cotton candy I love ice cream marzipan chupa chups gingerbread I love pudding. I love biscuit pie pudding. Chocolate cake bear claw halvah pastry chocolate cake liquorice candy canes chocolate chupa chups. Sesame snaps I love halvah chocolate cake sesame snaps. Chocolate bar liquorice chocolate bar. Pudding croissant gummi bears oat cake ice cream bear claw carrot cake.

02. Psicología

Macaroon oat cake icing gummi bears. I love ice cream cheesecake marshmallow lemon drops jelly-o macaroon toffee. Soufflé candy canes cookie ice cream tiramisu sweet roll gummies pudding jelly beans. I love oat cake bear claw. Fruitcake tootsie roll sweet. Ice cream gummies I love. Gingerbread cake macaroon I love sugar plum lollipop. Fruitcake cotton candy I love ice cream marzipan chupa chups gingerbread I love pudding. I love biscuit pie pudding. Chocolate cake bear claw halvah pastry chocolate cake liquorice candy canes chocolate chupa chups. Sesame snaps I love halvah chocolate cake sesame snaps. Chocolate bar liquorice chocolate bar. Pudding croissant gummi bears oat cake ice cream bear claw carrot cake.

03. Historia

Macaroon oat cake icing gummi bears. I love ice cream cheesecake marshmallow lemon drops jelly-o macaroon toffee. Soufflé candy canes cookie ice cream tiramisu sweet roll gummies pudding jelly beans. I love oat cake bear claw. Fruitcake tootsie roll sweet. Ice cream gummies I love. Gingerbread cake macaroon I love sugar plum lollipop. Fruitcake cotton candy I love ice cream marzipan chupa chups gingerbread I love pudding. I love biscuit pie pudding. Chocolate cake bear claw halvah pastry chocolate cake liquorice candy canes chocolate chupa chups. Sesame snaps I love halvah chocolate cake sesame snaps. Chocolate bar liquorice chocolate bar. Pudding croissant gummi bears oat cake ice cream bear claw carrot cake.

04. Datos Extras

Macaroon oat cake icing gummi bears. I love ice cream cheesecake marshmallow lemon drops jelly-o macaroon toffee. Soufflé candy canes cookie ice cream tiramisu sweet roll gummies pudding jelly beans. I love oat cake bear claw. Fruitcake tootsie roll sweet. Ice cream gummies I love. Gingerbread cake macaroon I love sugar plum lollipop. Fruitcake cotton candy I love ice cream marzipan chupa chups gingerbread I love pudding. I love biscuit pie pudding. Chocolate cake bear claw halvah pastry chocolate cake liquorice candy canes chocolate chupa chups. Sesame snaps I love halvah chocolate cake sesame snaps. Chocolate bar liquorice chocolate bar. Pudding croissant gummi bears oat cake ice cream bear claw carrot cake.

— by w

Código:: <link href="https://fonts.googleapis.com/css?family=Lobster|Lato|Aguafina+Script|Croissant+One&display=swap" rel="stylesheet"><div class="Hypno"> <div class="daticonti" style="background: url(https://images2.imgbox.com/e5/c7/JECgqRYH_o.png)"> <div class="datone">—Nombre:</div> <div class="dattwo">—Edad:</div> <div class="datotree">—O. Sexual:</div> <div class="datofor">—Raza: </div> <div class="datofive">—Procedencia: </div> <div class="faces" style="background: url(https://images2.imgbox.com/8d/5d/SGDx0z9J_o.png);"></div></div> <div class="Microphone"><div class="monogatari">01. Físico</div>Macaroon oat cake icing gummi bears. I love ice cream cheesecake marshmallow lemon drops jelly-o macaroon toffee. Soufflé candy canes cookie ice cream tiramisu sweet roll gummies pudding jelly beans. I love oat cake bear claw. Fruitcake tootsie roll sweet. Ice cream gummies I love. Gingerbread cake macaroon I love sugar plum lollipop. Fruitcake cotton candy I love ice cream marzipan chupa chups gingerbread I love pudding. I love biscuit pie pudding. Chocolate cake bear claw halvah pastry chocolate cake liquorice candy canes chocolate chupa chups. Sesame snaps I love halvah chocolate cake sesame snaps. Chocolate bar liquorice chocolate bar. Pudding croissant gummi bears oat cake ice cream bear claw carrot cake. <div class="monogatari1">02. Psicología</div>Macaroon oat cake icing gummi bears. I love ice cream cheesecake marshmallow lemon drops jelly-o macaroon toffee. Soufflé candy canes cookie ice cream tiramisu sweet roll gummies pudding jelly beans. I love oat cake bear claw. Fruitcake tootsie roll sweet. Ice cream gummies I love. Gingerbread cake macaroon I love sugar plum lollipop. Fruitcake cotton candy I love ice cream marzipan chupa chups gingerbread I love pudding. I love biscuit pie pudding. Chocolate cake bear claw halvah pastry chocolate cake liquorice candy canes chocolate chupa chups. Sesame snaps I love halvah chocolate cake sesame snaps. Chocolate bar liquorice chocolate bar. Pudding croissant gummi bears oat cake ice cream bear claw carrot cake. <div class="monogatari1">03. Historia</div>Macaroon oat cake icing gummi bears. I love ice cream cheesecake marshmallow lemon drops jelly-o macaroon toffee. Soufflé candy canes cookie ice cream tiramisu sweet roll gummies pudding jelly beans. I love oat cake bear claw. Fruitcake tootsie roll sweet. Ice cream gummies I love. Gingerbread cake macaroon I love sugar plum lollipop. Fruitcake cotton candy I love ice cream marzipan chupa chups gingerbread I love pudding. I love biscuit pie pudding. Chocolate cake bear claw halvah pastry chocolate cake liquorice candy canes chocolate chupa chups. Sesame snaps I love halvah chocolate cake sesame snaps. Chocolate bar liquorice chocolate bar. Pudding croissant gummi bears oat cake ice cream bear claw carrot cake.<div class="monogatari1">04. Datos Extras</div>Macaroon oat cake icing gummi bears. I love ice cream cheesecake marshmallow lemon drops jelly-o macaroon toffee. Soufflé candy canes cookie ice cream tiramisu sweet roll gummies pudding jelly beans. I love oat cake bear claw. Fruitcake tootsie roll sweet. Ice cream gummies I love. Gingerbread cake macaroon I love sugar plum lollipop. Fruitcake cotton candy I love ice cream marzipan chupa chups gingerbread I love pudding. I love biscuit pie pudding. Chocolate cake bear claw halvah pastry chocolate cake liquorice candy canes chocolate chupa chups. Sesame snaps I love halvah chocolate cake sesame snaps. Chocolate bar liquorice chocolate bar. Pudding croissant gummi bears oat cake ice cream bear claw carrot cake.</div><div class="fainal"><a class="wicca" title="Made by the witch" href="https://thewitchlies.tumblr.com/">— by w</a></div> <div class="star" style="background: url(https://images2.imgbox.com/05/4b/jrDiOgS8_o.png)"></div> </div><style>.Hypno { width: 480px; height: 650px; background: transparent; margin: 0 auto; padding: 10px; position: relative; top: 10px; } .daticonti{ width: 500px; height: 200px; background: #000; position: relative; top: -10px; left: -10px; } .faces{ width: 120px; height: 120px; position: relative; outline-offset: 5px; transform: rotate(-45deg); left: 345px; top: -112px; } .datone{ position: relative; width: 355px; background: #fbfbfb80; padding: 5px; left: 40px; top: 15px; fint-size: 10px; font-family: Lato; text-transform: lowercase; } .dattwo{ position: relative; width: 350px; background: #fbfbfb80; padding: 5px; left: 25px; top: 18px; text-transform: lowercase; font-family: Lato; } .datotree{ text-transform: lowercase; position: relative; width: 350px; background:#fbfbfb80; padding: 5px; left: 10px; top: 22px; font-family: Lato; } .datofor{ text-transform: lowercase; position: relative; width: 350px; background: #fbfbfb80; padding: 5px; left: 25px; top: 27px; font-family: Lato; } .datofive{ text-transform: lowercase; position: relative; width: 355px; background:#fbfbfb80; padding: 5px; left: 40px; top: 33px; font-family: Lato; } .monogatari { font-size: 30px; font-family: 'Aguafina Script', cursive; position: relative; margin-bottom: 10px; text-align: center; border-bottom: 1px solid #fa578880; } .monogatari1 { font-size: 30px; font-family: 'Aguafina Script', cursive; position: relative; margin-bottom: 30px; top: 20px; text-align: center; border-bottom: 1px solid #fa578880; } .Microphone{ width: 420px; height: 390px; Padding: 30px; background: #fff; position: relative; text-align: justify; font-size: 12px; line-height: 13px; font-family: Lato; overflow: auto; } .star { width: 100px; height: 100px; transform: rotate(50deg); outline: 1px solid #fff; outline-offset: -10px; position: relative; top: -80px; left: -55px; transition: 1.1s ease; } .star:hover{ transform: rotateZ(-40deg); } .fainal { background: #fbfbfb80; width: 480px; height: 50px; } .wicca { color: #fff; position: relative; top: 15px; left: 420px; text-transform: none; font-family: Lobster; font-size: 10px; letter-spacing: 2px; } div::-webkit-scrollbar { width: 5px; background: #ffb9b5; } div::-webkit-scrollbar-thumb { background: #3c08147a; } div::-webkit-scrollbar-button { height: 13px; background: #ffb9b5; }</style>

Muchah gracias de antemano como siempre guapos ~~ <3

Jue Jun 27, 2019 4:35 am

No es que el Codepen te mienta, es que Foroactivo te pone trabas.

En primer lugar, para arreglar lo de las fuentes, el problema está en el nombre de la font misma. Foroactivo tiene un sistema para evitar que la gente utilice javascript en sus posts, y se basa en buscar cualquier ocurrencia de la palabra «script» y cambiar las íes por su código ASCII. Y la font que has usado se llama Aguafina Script... creo que ya te imaginas por dónde va la cosa:

Otra manera en la que a Foroactivo le gusta joder, no sé por qué, es poniendo saltos de línea en lugares poco propicios. Posiblemente no tuvieras este problema si hubieras puesto saltos de línea en el código en lugar de pegarlo todo seguido, pero, de cualquier modo: tienes un salto de línea ninja en el a.wicca:

Esos son los errores más difíciles de ver. Creo que puedes resolverte los otros sin mi ayuda.

Vie Jun 28, 2019 11:00 am

¡Hola, Witch! Cuanto tiempo [Duda] Resuelto |Tablilla deformada 386739646

Y bueno, por ahi cuando hice el cambio de plataforma del foro (de Phpbb3 a ModernBB) comenté que la estructuración de los códigos iba a cambiar, es decir, esta plataforma lo lee diferente que la otra, por lo que tendrían que hacer algunos cambios a sus códigos para que se vieran como deseaban.

Entonces como dice Eine, Codepen tiene muchos codigos internos por default que te facilitan la elaboracion de tu codigo, cosa que Foroactivo no tiene (y que en ocasiones complica mucho más). Por lo que aunque en CodePen te salga tu código al 100% bien estructurado, siempre al mudarlo a Foroactivo tendrás que adaptarlo para que se vea como se supone que debe ser.

[Duda] Resuelto |Tablilla deformada 3977329451

[Duda] Resuelto |Tablilla deformada 3977329451

PD. Además de que todo lo que dijo Eine es correcto :'D a Foroactivo le gusta complicarnos la vida.

Vie Jun 28, 2019 4:52 pm

Un último apunte sobre lo que dijo Ross: uno de los mayores problemas al intentar codear para foroactivo ahora que tiene tanto phpBB3 como modernBB es que ambas plataformas te calculan el tamaño de los divs de maneras diferentes. Esto se debe a una propiedad del css, box-sizing, que básicamente le dice al elemento qué atributos tiene que tener en cuenta para calcular su tamaño.

Así, en phpBB3, los elementos tienen de manera predeterminada la propiedad box-sizing: content-box, lo que hace que los padding y los border incrementen en tamaño del elemento. En ModernBB, la predeterminada es box-sizing: border-box, lo que hace que el tamaño final del div no cambie y que los padding y los border cuenten dentro del atributo width/height del elemento.

Para evitar que el traspaso de un code a un foro lo destroce, es tan simple como especificar esta propiedad:

Código:: .code, .code * {box-sizing: content-box /*para usar el sistema de phpBB3*/ | border-box /*para usar el sistema de ModernBB*/}

Esto no solucionará todos los problemas pero ayudará a evitar dolores de cabeza.

Vie Jul 05, 2019 10:47 pm

Wow!! no tenía idea +o+ muchísimas gracias a los dos <3 he podido corregir la tablilla para que se viera bien en phpbb3 +o+ esas nuevas etiquetas será lo primero que pongo la próxima vez que haga una tablilla TnT

¡Muchas gracias!, pongo el tema resuelto then +o+

[Duda] Resuelto |Tablilla deformada 3114844438

[Duda] Resuelto |Tablilla deformada 3114844438

Próx

Bridgerton

Luz vs Oscuridad

Paraíso Personal

Amor y Amistad

Conejo de Pascua

[Duda] Resuelto |Tablilla deformada