Ayuda con: TUTORIAL 02: USAR TABLAS ♪

Lun Feb 27, 2017 8:17 pm

Bueeeeeeno, aquí voy!
Estoy tratando de organizarme mentalmente pero fallo una y otra, así con toda la pena del mundo mundial (?) necesito ayuda... no entiendo muy bien como acomodar los códigos de los tutoriales ( por que si me he pasado por varios, pero fallo y no los publico por penosa ) pero aquí me agarro.

El tutorial es: TUTORIAL 02: USAR TABLAS de ROSHIO.

Código:: <table><tbody><tr><td><divclass=".Backie{background:url(https://36.media.tumblr.com/cf505441a9f6471c7e04bc19952781a4/tumblr_o4a3hv2Vck1s6bxzqo2_r4_400.jpg) 37% 17%;width: 200px;height: 200px;margin-right: 10px;border: 1px solid #ccc;}"></div></td> <td><div class=".Textie {width: 300px;height: 160px;padding: 20px;background: #fff;border: 1px solid #CCC;line-height: 20px;font-size: 9px;font-family: arial;text-align: justify;}">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div</td></tr></tbody></table>

Quizá algunos le entiendan muy rápido pero yo perdí práctica total y literalmente ya no recuerdo como acomodarles. Obviamente si lo coloco como anteriormente lo puse, pues me sale así:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪

Agradecería muchísimo que me ayudaran a acomodarlo y entender mejor como debo acomodarlos para aprendérmelo bien. Gracias ♥

Lun Feb 27, 2017 8:41 pm

¡Skaoi! No tienes que sentir pena al venir a preguntar, a todos nos pasa que los códigos nos vuelven locos y nos marean.

Bien, el problema es que estás mezclando el HTML con CSS. Lo ordenaré de la manera correcta para que se entienda mejor.
En el HTML las etiquetas deben tener un comienzo y un final y sirven para llamar elementos del css o aplicar propiedades, éste se posiciona ya sea primero o luego del CSS:

Código:: <table><tbody><tr><td><div class="Beckie"><div class="textie">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></td></tr></tbody></table>

Luego está el CSS, donde ya le das la forma deseada a tu tablilla mediante todas las propiedades que se pueden utilizar allí, y siempre, SIEMPRE, va entre el tag "< style>" y su respectivo final:

Código:: <style> .Backie{ background: url(https://36.media.tumblr.com/cf505441a9f6471c7e04bc19952781a4/tumblr_o4a3hv2Vck1s6bxzqo2_r4_400.jpg) 37% 17%; width: 200px; height: 200px; margin-right: 10px; border: 1px solid #ccc; } .Textie { width: 300px; height: 160px; padding: 20px; background: #fff; border: 1px solid #CCC; line-height: 20px; font-size: 9px; font-family: arial; text-align: justify; } </style>

Por otro lado, creo que el link está roto, o al menos a mí no me funciona. Espero haberme hecho entender, ¡SI NO! Seguramente Roshio o André luego vendrán a salvar el día. Ayuda con: TUTORIAL 02: USAR TABLAS ♪ 1764326232

Ayuda con: TUTORIAL 02: USAR TABLAS ♪ 1764326232

Te dejo también un link que explica la manera de subir un código a Foroactivo que hizo Roshio hace un tiempito. Ayuda con: TUTORIAL 02: USAR TABLAS ♪ 2397999435

Ayuda con: TUTORIAL 02: USAR TABLAS ♪ 2397999435

[X]

Lun Feb 27, 2017 9:19 pm

La explicación de Wada estuvo 10/10, pero solo por si acaso, agrego que...

Una cosa es aplicar estilo directamente con el "div style". Ej:

Hola

Código:: <div style="color: red; font-size:14px; font-weight:bold;">Hola</div>

Y otra distinta crear una clase con "div class".

Hola

Código:: <div class="skaoi">Hola</div> <style>.skaoi {color: red; font-size:14px; font-weight:bold;}</style>

Lun Feb 27, 2017 9:49 pm

Hola Ska

Que lindo que Wada y André nos echaron la mano para contestarte!~ Ahora si unimos lo que ellas te dijeron tu codigo debería verse de la siguiente manera:

Lo voy a dejar separado para que puedas ver bien cada parte, identificarlas y ver como van acopladas unas con otras. Si te fijas cada parte tiene su contraparte, osea si abres una baliza que se llama table es obligatorio que haya otra baliza de cierre con el mismo nombre, lo mismo si abres una baliza que se llama div, debe haber otra que sea su cierre y de esta forma separar cada elemento.

Código:: <table> <tbody> <tr> <td><div class="Backie"></div></td> <td><div class="Textie">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></td> </tr> </tbody> </table>

Este es tu CSS:

Código:: .Backie{ background: url(background:url(http://placehold.it/200x200) 37% 17%; width: 200px; height: 200px; margin-right: 10px; border: 1px solid #ccc; } .Textie { width: 300px; height: 160px; padding: 20px; background: #fff; border: 1px solid #CCC; line-height: 20px; font-size: 9px; color: #000; font-family: arial; text-align: justify; }

Y para que el foro te 'lea' el codigo en un post te debe quedar todo de esta forma:

Código:: <table><tbody><tr><td><div class="Backie"></div></td><td><div class="Textie">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></td></tr></tbody></table> <style>.Backie { background:url( background:url(http://placehold.it/200x200) 37% 17%;width: 200px;height: 200px;margin-right: 10px;border: 1px solid #ccc;} .Textie {width: 300px;height: 160px;padding: 20px;background: #fff;border: 1px solid #CCC; line-height: 20px; font-size: 9px;font-family: arial; text-align: justify; color: #000; }</style>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Si sigues sin entenderlo bien no te preocupes, volveremos a repasarlo todo desde el principio Ayuda con: TUTORIAL 02: USAR TABLAS ♪ 3042720415

Lun Feb 27, 2017 10:12 pm

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

El CSS con código de imagen:

Código:: <style>.Backie { background:url( background:url(http://i.imgur.com/g8JvSik.png) 37% 17%;width: 200px;height: 200px;margin-right: 10px;border: 1px solid #ccc;} .Textie {width: 300px;height: 160px;padding: 20px;background: #fff;border: 1px solid #CCC; line-height: 20px; font-size: 9px;font-family: arial; text-align: justify; color: #000; }</style>

Ayuda con: TUTORIAL 02: USAR TABLAS ♪ G8JvSik

https://i.imgur.com/g8JvSik.png

Próx

Bridgerton

Luz vs Oscuridad

Paraíso Personal

Amor y Amistad

Conejo de Pascua

Ayuda con: TUTORIAL 02: USAR TABLAS ♪

TELL ME EVERYTHING

TELL ME EVERYTHING