Duda de tutorial

Miér Dic 07, 2016 9:33 am

Hello¿como estas? primero que todo quiero decirte que amo tus graficos llevo algunos dpias observandolos y me han animado a intentar cosas nuevas, sin embargo ahora que intento hacerlo me confundo un poco.

Bueno primero intente con el tutorial numero 7 sin embargo aunque lo intento no me sale como a ti, no se si es que hago algo incorrecto o que aunque intento seguir el tutorial me sigue sin salir.

Código:: CÓDIGO: <div class="black">.black {border: 15px solid #000;width: 100px;}.white {background: #FF488E; font-family: bebas; color: #000;letter-spacing: -1px; font-size: 18px; padding: 10px;}<img src="http://i.imgur.com/Hej3dV7.png" style="width:100px;"/><div class="white">TWENTY GRAMS</div></div>

ham, no se si allá alguna posibilidad o si hay algun tutorial para comprender mejor como usarlos pues no lo he visto quizas se me paso por alto.

Miér Dic 07, 2016 1:23 pm

Hola Tier, primero que nada puse este post en un tema nuevo ya que es una duda que queria responder de forma más personalizada.

Revisando tu código:

Código:: <div class="black">.black {border: 15px solid #000;width: 100px;}.white {background: #FF488E; font-family: bebas; color: #000;letter-spacing: -1px; font-size: 18px; padding: 10px;}<img src="http://i.imgur.com/Hej3dV7.png" style="width:100px;"/><div class="white">TWENTY GRAMS</div></div>

Veo que pusiste mal el CSS, me explico de la siguiente manera.
El CSS para ponerlo en un post de un foro o que esté independiente de ponerlo por ejemplo en el CSS del foro general, es necesario hacerlo de la siguiente forma:

1. Primero vamos a estructurar bien nuestro HTML:

Código:: <div class="black"><img src="http://i.imgur.com/Hej3dV7.png" style="width:100px;"/><div class="white">TWENTY GRAMS</div></div>

2. Vamos a agregar, al final de nuestro código, una etiqueta style donde irá nuestro CSS justo después de nuestro HTML.

Código:: <style>.black { border: 15px solid #000;width: 100px; } .white { background: #FF488E; font-family: bebas; color: #000; letter-spacing: -1px; font-size: 18px; padding: 10px; }</style>

Entonces todo nuestro códiguito debería verse así:

Código:: <div class="black"><img src="http://i.imgur.com/Hej3dV7.png" style="width:100px;"/><div class="white">TWENTY GRAMS</div></div> <style>.black { border: 15px solid #000;width: 100px; } .white { background: #FF488E; font-family: bebas; color: #000; letter-spacing: -1px; font-size: 18px; padding: 10px; }</style>

Y al ponerlo en el post se verá así:

TWENTY GRAMS

Espero que se entendiera mejor, sino puedes volver a preguntar lo que sea que te genere dudas Duda de tutorial 786580757

Miér Dic 07, 2016 2:05 pm

OMG muchas gracias Roshio cualquier cosa ya se donde poner mis dudas, y nuevamente gracias por tomarte el tiempo y responderme.

Miér Dic 07, 2016 2:07 pm

De nada, Tier, para eso estamos para ayudar ;D cualquier cosita sientete libre de consultarme! Duda de tutorial 3061377601

Miér Dic 07, 2016 2:47 pm

Bueno vengo a molestarte de nuevo, ahora que ya tengo muy bien entendido como utilizar los div y que he seguido tu tuturial ahora me ha sucedido otro desastre Duda de tutorial 1912366546

Código:: <center><div class="Outside"><div class="Outside"><div class="Inside"><div class="Inside">♛<br/><color=#ff3333><i>H</i></color> ello<br/><span class="In-text">soy un texto sexy, mírame mírame</span></div></div><style>.Outside {width: 300px; height: 300px;background: url(http://i64.tinypic.com/e1f85j.jpg);border-radius: 900px; }.Inside { width: 145px;height: 145px; padding: 30px; background: #fff;border-radius: 100px;display: block;color: #000;margin: 55px;position: absolute;font-size: 40px;font-family: bebas; }span.In-text {font-size: 9px;font-family: calibri, arial;text-transform: uppercase;text-align: center;line-height: 9px;}</style></center>

y aunque me sale bien, el circulito esta movido Duda de tutorial 2670983160

Spoiler:

nuevamente, gracias por tu atención y lamento ser tan molesto Duda de tutorial 202880118

Miér Dic 07, 2016 3:16 pm

Hola de nuevo Tier xD Veamos, creo que pasa lo siguiente:

1) Duplicaste los divs Duda de tutorial 1694040978

ten cuidado con esto, debes de revisar cuidadosamente que tengas el número de divs correctos, es decir, al abrir un div procura cerrarlo inmediatamente y de que cada uno tenga un nombre propio para que así no te pierdas a la hora de hacer el CSS.

Tu lo pusiste así:

Código:: <center><div class="Outside"><div class="Outside"><div class="Inside"><div class="Inside">♛<br/><color=#ff3333><i>H</i></color> ello<br/><span class="In-text">soy un texto sexy, mírame mírame</span></div></div></center>

Debería ser así:

Código:: <center><div class="Outside"><div class="Inside">♛<br/><span style="color:#ff3333"><i>H</i></span> ello<br/><span class="In-text">soy un texto sexy, mírame mírame</span></div></div></center>

2) Debes tener mucho cuidado de que el css que subes este bien "pegado" es decir que no tenga salto de linea, que todo sea corrido sino no en foroactivo no se puede leer correctamente.

Tú lo tenías así:

Código:: <style>.Outside {width: 300px; height: 300px;background: url(http://i64.tinypic.com/e1f85j.jpg);border-radius: 900px; }.Inside { width: 145px;height: 145px; padding: 30px; background: #fff;border-radius: 100px;display: block;color: #000;margin: 55px;position: absolute;font-size: 40px;font-family: bebas; }span.In-text {font-size: 9px;font-family: calibri, arial;text-transform: uppercase;text-align: center;line-height: 9px;}</style></center>

Debería ser así:

Código:: <style>.Outside {width: 300px; height: 300px;background: url(http://i64.tinypic.com/e1f85j.jpg); border-radius: 900px; } .Inside { width: 145px;height: 145px; padding: 30px; background: #fff;border-radius: 100px;display: block;color: #000;margin: 55px;position: absolute;font-size: 40px;font-family: bebas; } span.In-text { font-size: 9px;font-family: calibri, arial;text-transform: uppercase;text-align: center;line-height: 9px;}</style>

Ojo, entre cada etiqueta del css es bueno dejar un espacio:

Código:: font-family: bebas;}/* PONER UN ESPACIO AQUI*/span.In-text { Ejemplo: font-family: bebas;} span.In-text {

3) Para que quede bien alineado debes revisar los padding y los margin de los divs, en este caso el margin del div Inside, y moverlo según veas para que quede alineado correctamente.

Entonces ya corregido el CSS debería verse así:

Código:: <style>.Outside {width: 300px; height: 300px;background: url(http://i64.tinypic.com/e1f85j.jpg); border-radius: 900px; } .Inside { width: 145px;height: 145px; padding: 30px; background: #fff; border-radius: 100px;display: block;color: #000;margin: 49px; position: absolute; font-size: 40px;font-family: bebas; line-height: 40px; } span.In-text { font-size: 9px;font-family: calibri, arial;text-transform: uppercase;text-align: center;line-height: 9px;}</style>

Ya el código completo debe ser así:

Código:: <center><div class="Outside"><div class="Inside">♛<br/><span style="color:#ff3333"><i>H</i></span> ello<br/><span class="In-text">soy un texto sexy, mírame mírame</span></div></div></center> <style>.Outside {width: 300px; height: 300px;background: url(http://i64.tinypic.com/e1f85j.jpg); border-radius: 900px; } .Inside { width: 145px;height: 145px; padding: 30px; background: #fff; border-radius: 100px;display: block;color: #000;margin: 49px; position: absolute; font-size: 40px;font-family: bebas; line-height: 40px; } span.In-text { font-size: 9px;font-family: calibri, arial;text-transform: uppercase;text-align: center;line-height: 9px;}</style>

Espero haber ayudado Duda de tutorial 3814584045

cualquier otra cosita dime~

Miér Dic 07, 2016 3:27 pm

de nuevo gracias, Roshio por iluminar mi camino.

Mar Ene 03, 2017 9:06 pm

Bien, bien aqui molestando nuevamente, debido a que ya tenia este tema no sabia si eranecesario abrir otro. El caso es que estoy haciendo uno de los tutoriales y aunque ya entiendo mucho mejor lo de las balizas (graias Rosho) la yellow flower sigue dandome este curioso resultado a pesar de que sigo al pie de la letra el tutorial. Y no se si es cosa mia pues la una de los otros tres tutoriales me sale muy bien sin ningun tipo de deformacion.

https://imgur.com/a/ROK1r

Mar Ene 03, 2017 9:43 pm

Hola Tier, no pasa nada puedes preguntar las veces que quieras! Estamos para ayudar!~ Veamos pasa que no pusiste un width para tu primer div, por lo que por defecto se hace igual de ancho que la página donde muestra el código. Entonces debería quedarte así:

Código:: .morado { border:10px solid #FFC105; width:100px; height:100px; }

Próx

Bridgerton

Luz vs Oscuridad

Paraíso Personal

Amor y Amistad

Conejo de Pascua

Duda de tutorial