Yo la verdad es que estoy empezando ahora y la verdad es que tengo ya una edad avanzada, tengo 60 años, y además he visto que el ultimo comentario es de hace ya 2 años, de cualquier forma me parecen unos tutoriales bastante didacticos pues cosas que me habían explicado no he llegado a entendelas de forma más completa hasta que vi los videos de position desarrollados por Alvaro Felipe Yo os escribo desde España y además tengo que deciros que a lo mejor no es algo importante para vosotros y que no os resulte pedante, pero me gusta mucho el castellano que usan ustedes. Les doy las gracias por estos tutoriales, aunque veo que ya hace varios años de su edición y publicación, un saludo
me encanto el video, siempre tenia esa duda de usar entre el display:inline-block y float, ya que al parecer hay una lucha constante entre estas 2 propiedades, una muy facil explicacion, gracias.
La forma de dictar tus cursos rápidos me dan mucha confianza para poder adquirir un curso por ED, se nota que sabes enseñar, no se si me equivoque al decir que eres DIDACTA ESTUDIADO o con mucha experiencia en la enseñanza.
Gracias excelente video!, con la propiedad overflow podemos solucionar el excedente del contenido, ocultandolo o utilizarando un scroll o scroll auto y así poder seguir utilizando el float aun tenga un contenido excedido. Siempre y cuando asignemos un height.
Excelente canal. Felicidades Álvaro Felipe y todo su equipo. Les descubrí hace poco pero llevo unos días visitando sus videos desde sus inicios y hay joyitas como esta. Me encanta la facilidad con la que explicas y solucionas problemas habituales del diseño web. Saludos
Gracias amigo por publicar tu video... ultimamente he estado realizando esto en mi trabajo, pero css es nuevo para mi. Este video me ayudo a ralizar un mejor trabajo. Gracias, Dios te bendiga!
gracias Alvaro Felipe, muy bien explicado, y esta explicación me maté buscandola en internet y no la encontraba o si la encontraba no la explicaban bien y terminaba mas perdido...muchas gracias!!!
También se pueden quitar los espacios poniendo en 0 el tamaño de fuente del elemento padre, y luego volviendo a ajustar el tamaño de fuente en los elementos hijos. Muy buen tutorial. Ya me suscribí. :)
Agradecido estoy! Venía con dudas respecto a ambas opciones y ya aclaré con tu video...sobretodo con el ratico del vertical-align: top. Saludos desde Panamá.
Matías Jaubet display:table es todo un tema, tiene sus ventajas y desventajas para hacer layouts. Una curiosidad de display:table es que limpia los floats hijos. Asi no se necesita de overflow:hidden.
Excelente video!!! FELICITACIONES!! Pregunta: ¿cómo hacer que todas las cajas sean del mismo alto, aunque algunas tengan menos texto? Saludos desde Uruguay.
Soy principiante, pero por ahí aprendí una técnica con Overflow: scroll, donde puedes colocarlo en el elemento que más texto tengas para que le aparezca un scroll suponiendo que le fijaste una misma altura basada en el elemento de menor altura. No sé si me expliqué...en caso de que no, puedes investigar sobre ello :D Saludos desde Panamá.
Buenas tardes desde España y gracias por tus videos.. he visto muchos por youtube pero los tuyos son de lo mejor asi que sigue asi!.. una pregunta.. si el espaciado con margin que indicas entre cada caja tiene un 0.5%, por cada caja seria un 1% en total a los lados.. ese 1% no lo tendrian las demás cajas? no se convertiria en 3% en total.. eso me despisto!.. espero que contestes.. muchas gracias y un saludo!
Hola, cada caja tiene 32.33% + 1% (margen de 0.5% a cada lado) = 33.33% Y 33.33%*3= 99.99%. O si lo quieres ver como mencionas, es verdad, los márgenes suman en total 3%. Fijate: 32.33%*3 (columnas) = 96.99% + 3% (margenes) = 99.99% Saludos.
Hola de nuevo.. muchas gracias por responder.. claro!.. llevas razón!.. no me percaté de que cada caja por separado tiene el ancho de 32% y no de 33%!.. por eso me extrañaba.. un lapsus! jajaja.. sigue asi! ya que nos ayudas muchisimo a los que estamos empezando en este mundo.. un saludo y a por el proximo video!
Muy bueno, Álvaro Felipe tus videos se entiendes a la perfección. Aprovecho para consultar acerca de los menú de navegación. Qué recomiendas para los menú de navegación horizontal en el header (inline-block o float) ? Saludos Crack!
+Richard Castillo hermano, en BRACKETS el atajo es , es decir, primero selecciona todo el texto o párrafo que quieres ponerlo entre una tag, en seguida, presionas este atajo . Luego, abrirá una linea abajo parecida como las de reemplazo de texto, luego pones apenas el nombre de la tag, por ejemplo, apenas presionas P (para estar entre ). Pero, eso es EN BRACKETS, inténtalo en SUBLIME tb. Además, hay unos outros atajos en sweetme.at/2013/08/08/sublime-text-keyboard-shortcuts/
excelente vídeo disculpa como haces para que tu pagina se actualice y cuando escribes el código se muestre en pantalla automáticamente yo utilizo el notepad++
Hola amigo. Necesito usar el vertical Inline-block con el vertical-align top pero necesito que los elementos que siguen abajo tambn se vayan al top quedando justo debajo del elemento que tienen arriba y no que sea relativo al que tiene la lado
Yo utilizo más inline-block, los floats son problematicos pero bueno cada uno con sus gustos. y para eliminar el espaciado de inline-block es con la etiqueta de comentario en html: ó font-size:0 ó En lineaYsin espacios
salvo el font-size:0 los otros metodosgeneran html sucio lo cual no es buena practica. Por otro lado, declarar font-size:0 y redeclarar el font-size para lo hijos no es más ni menos problemático que un clear o un overflow:hidden para los floats.
ó word-spacing: -.3em; y en el descendiente word-spacing:initial; Float es problematico cuando las cajas tiene diferentes alturas. como bien mencionas en el video
#contenedor-padre{display: flex;} .... escribo eso, y me alejo muuy, muy lentamente... y ni les digo donde lo aprendí porque les da algo.... ok ok les doy pista, empieza por "plat" y termina en "zi" lol
Mario Rebollo Bravo Este video no es sobre flexbox por lo que no se lo menciona. La proxima semana subiré un video sobre flexbox que estoy preparando. Esperalo. Aprenderás mucho. Más de lo que aprendiste y sin regalar dinero =)
Hola, Soy aprendiz: aprox: 9:50: No señor, no solo que los "bloques se pongan en linea" falta decir que en "display inline-block" además de eso ( ... de ponerse los elementos bloques en horizontal) se respeta la anchura y el alto del elemento block, mientras que en "display-inline" no. Bueno, después de todo creo que si toda la teoría que marea alrededor del tema diseño-Web sería menos árdua si se explicara más visualmente. Lamentablemente sobre esta clase de tutoriales hay pocos. Gracias.
7:40 en realidad también se puede hacer que ese linea en blanco desaparezca con display:inline-block seria quitar el salto de linea de los div y listo xd o comentarlo
Cada palabra tiene espacio porque la.das espacio con la.barra espaciadora, no porque cada palabra sea un elemento inline... O no entendí que quisiste decir.
Algo q me molesta y mucho de los programación es q cambian mucho de jerga del español al inglés cuando usan términos q obviamente están en inglés x su programación.
Yo la verdad es que estoy empezando ahora y la verdad es que tengo ya una edad avanzada, tengo 60 años, y además he visto que el ultimo comentario es de hace ya 2 años, de cualquier forma me parecen unos tutoriales bastante didacticos pues cosas que me habían explicado no he llegado a entendelas de forma más completa hasta que vi los videos de position desarrollados por Alvaro Felipe
Yo os escribo desde España y además tengo que deciros que a lo mejor no es algo importante para vosotros y que no os resulte pedante, pero me gusta mucho el castellano que usan ustedes.
Les doy las gracias por estos tutoriales, aunque veo que ya hace varios años de su edición y publicación, un saludo
Han pasado ya 4 años. Me pregunto como le habrá ido a usted en su aprendizaje de la programación.
es la mejor explicación, más clara y con ejemplos de estas propiedades que jamás he visto. Muchísimas gracias
excelente tu manera de explicar. La gente de platzi defiende el inline-block y en sus tutoriales usan float. Coherencia (?). Saludos desde argentina
La mejor explicación en español.
el vertical-align me salvo mi proyecto totalmente!
gracias.....
Hola este comentario es para agradecerte por compartir tu conocimiento y explicar siempre a detalle de el porque de las cosas
me encanto el video, siempre tenia esa duda de usar entre el display:inline-block y float, ya que al parecer hay una lucha constante entre estas 2 propiedades, una muy facil explicacion, gracias.
La forma de dictar tus cursos rápidos me dan mucha confianza para poder adquirir un curso por ED, se nota que sabes enseñar, no se si me equivoque al decir que eres DIDACTA ESTUDIADO o con mucha experiencia en la enseñanza.
Gracias excelente video!, con la propiedad overflow podemos solucionar el excedente del contenido, ocultandolo o utilizarando un scroll o scroll auto y así poder seguir utilizando el float aun tenga un contenido excedido. Siempre y cuando asignemos un height.
Excelente canal. Felicidades Álvaro Felipe y todo su equipo. Les descubrí hace poco pero llevo unos días visitando sus videos desde sus inicios y hay joyitas como esta. Me encanta la facilidad con la que explicas y solucionas problemas habituales del diseño web. Saludos
muchas gracias!
Gracias amigo por publicar tu video... ultimamente he estado realizando esto en mi trabajo, pero css es nuevo para mi. Este video me ayudo a ralizar un mejor trabajo. Gracias, Dios te bendiga!
+Francisco M. Venegas genial, me alegra!
+Francisco M. Venegas igual ya no se deberia usar float, es mucho mejor usar flexbox.
gracias Alvaro Felipe, muy bien explicado, y esta explicación me maté buscandola en internet y no la encontraba o si la encontraba no la explicaban bien y terminaba mas perdido...muchas gracias!!!
También se pueden quitar los espacios poniendo en 0 el tamaño de fuente del elemento padre, y luego volviendo a ajustar el tamaño de fuente en los elementos hijos.
Muy buen tutorial. Ya me suscribí. :)
Excelente video profesor Alvaro, Muchas Bendiciones
Excelente!!! Tu forma de explicar es tan clara como el agua!!! Muchas gracias!
¿Quién es capaz de darle dislike a este vídeo? Más claro imposible la utilización de estas propiedades; Muchas gracias. Saludos. :)
Agradecido estoy! Venía con dudas respecto a ambas opciones y ya aclaré con tu video...sobretodo con el ratico del vertical-align: top.
Saludos desde Panamá.
SUPERRRR GENIAL¡¡¡ primera vez que estoy entendiendo, unos doss videos mas espero empezar a maquetar mi primera pagina web...
Sos un genio Alvaro Felipe! Felicitaciones!!
Otro tema comprendido. Eres un profesor magnífico, gracias!
Sos un campeón. Muy bueno el tutorial, te agradezco muchísimo. Me sirvió mucho. Saludos desde Argentina
Heyy el dato del espacio que decis en los elementos line me re ayudó a enender otras cosas. Re gracias!
Por fin empiezo a entenderlo !! muchas gracias por tus explicaciones!!
Una técnica es usar los tag de comentarios entre los "enter" o espacios de los div. ej:
....
...
Hola! Muchas veces utilizo display table. Muy buen video!
Matías Jaubet display:table es todo un tema, tiene sus ventajas y desventajas para hacer layouts. Una curiosidad de display:table es que limpia los floats hijos. Asi no se necesita de overflow:hidden.
excelente amigo muy bien explicado...!!!! sigo todos tus tutoriales.....!!!!
excelente explicación. Me fué muy útil, te agradezco mucho.
Excelente video muy claro y bien explicado! Exitos!
Genial como siempre 👍. Saludos desde México.
Gracias Alvaro, sos muy buen docente!
consulta ¿se puede utilizar box-sizing para el body o solo es para las otras secciones? gracias
Que suerte tengo de haber encontrado tus videos :D
Saludos ! Tu vídeo es de mucha ayuda para la comunidad !!!
Excelente video. muy bien explicado . muchas gracias!
Excelente video!!! FELICITACIONES!! Pregunta: ¿cómo hacer que todas las cajas sean del mismo alto, aunque algunas tengan menos texto? Saludos desde Uruguay.
Soy principiante, pero por ahí aprendí una técnica con Overflow: scroll, donde puedes colocarlo en el elemento que más texto tengas para que le aparezca un scroll suponiendo que le fijaste una misma altura basada en el elemento de menor altura. No sé si me expliqué...en caso de que no, puedes investigar sobre ello :D Saludos desde Panamá.
Excelente manera de explicar. Gracias!
Con qué atajo de teclado haces lo del 1:58? selececionar el lorem y lo encierras con la etiqueta P sin reemplazarlo.
Buenísima la explicaron genio me sacaste de una gran duda la verdad
Buenas tardes desde España y gracias por tus videos.. he visto muchos por youtube pero los tuyos son de lo mejor asi que sigue asi!.. una pregunta.. si el espaciado con margin que indicas entre cada caja tiene un 0.5%, por cada caja seria un 1% en total a los lados.. ese 1% no lo tendrian las demás cajas? no se convertiria en 3% en total.. eso me despisto!.. espero que contestes.. muchas gracias y un saludo!
Hola, cada caja tiene 32.33% + 1% (margen de 0.5% a cada lado) = 33.33% Y 33.33%*3= 99.99%. O si lo quieres ver como mencionas, es verdad, los márgenes suman en total 3%. Fijate: 32.33%*3 (columnas) = 96.99% + 3% (margenes) = 99.99%
Saludos.
Hola de nuevo.. muchas gracias por responder.. claro!.. llevas razón!.. no me percaté de que cada caja por separado tiene el ancho de 32% y no de 33%!.. por eso me extrañaba.. un lapsus! jajaja.. sigue asi! ya que nos ayudas muchisimo a los que estamos empezando en este mundo.. un saludo y a por el proximo video!
gracias! no hablo espagnol, solo poco pero ai comprido todo!!!
Me gusto el final. Gracias por el video saludos.
me gusta tu canal. bien explicado todo. gracias. me he suscrito.
Muy bueno, Álvaro Felipe tus videos se entiendes a la perfección.
Aprovecho para consultar acerca de los menú de navegación. Qué recomiendas para los menú de navegación horizontal en el header (inline-block o float) ?
Saludos Crack!
muchas gracias
Chabon sos un capo! Gracias por el video me sirvió mucho. Un abrazo
gracias ya que tenia ese problema con position y no podia arreglarlo lo provare y les cuento
Gracias maestro !
Una pregunta como hace para agregar las etiquetas cuando selecciona el texto
Muy buenos sus video, lo felicito y gracias por compartior su experiencia...tiene algun curso de css completo?.
Que bueno que te hay agustado. Tenemos un curso compelto de CSS en esta url ed.team/css ¡Te esperamos!
En el minuto 2:00 usas un atajo para encerrarlo en . ¿Cómo lo haces?
+777colombe pudiste saber como hacerlo?
+Richard Castillo no... Todavia no... Ya casi rompo el teclado y nada..
Si lo encuentras me avisas, de igual manera te avisare
+Richard Castillo por supuesto Richard.
+Richard Castillo hermano, en BRACKETS el atajo es , es decir, primero selecciona todo el texto o párrafo que quieres ponerlo entre una tag, en seguida, presionas este atajo . Luego, abrirá una linea abajo parecida como las de reemplazo de texto, luego pones apenas el nombre de la tag, por ejemplo, apenas presionas P (para estar entre ). Pero, eso es EN BRACKETS, inténtalo en SUBLIME tb. Además, hay unos outros atajos en sweetme.at/2013/08/08/sublime-text-keyboard-shortcuts/
realmente, excelente la explicacion.
Y cómo harías para colocar los elementos 1 y 3 de la primera fila, del mismo alto que el elemento 2?
Saludos, amigo. excelente aporte
jaja, amigo el final del video ha hecho que me ria bastante. Gracias por este video, me sirvió de ayuda.
que bien explicado, gracias
excelente vídeo disculpa como haces para que tu pagina se actualice y cuando escribes el código se muestre en pantalla automáticamente yo utilizo el notepad++
Hola, es un programa que se llama prepros, en el curso de HTM5 Desde Cero lo vemos en clase escuela.digital/html
Cortando los flotantes, ¿se podría arreglar?
Gracias por compartir conocimientos.
genial, muchas gracias tocayo!
Muchisimas gracias es un excelente video, eres todo un maestro. Me subscribo a tu canal
Para solucionar el espacio que deja inline-block, es quitandole los 4px que pone por defecto en el margen derecho: margin-right:-4px.
podrias hacer la diferencia entre display inline-blocck, float y display:flex por favor
Graciaaaas me ayudaste mucho :3
Cual es la diferencia entre display: block y display: inline-block?
El mejor!
Excelente tu forma de explicar enserio de lo mejor. Buen video Thumbs up y +1 Ssucriber ;)
Excelente contenido
Css grid y flex box mato todo esto.
Como haces eso? 1:57
Excelente!!!!
Muchas gracias estuvo genial el tutorial :D eres de mexico????
Hola amigo. Necesito usar el vertical Inline-block con el vertical-align top pero necesito que los elementos que siguen abajo tambn se vayan al top quedando justo debajo del elemento que tienen arriba y no que sea relativo al que tiene la lado
+Zarith Contreras ¿???
grande gracias
Gracias!!!
muy bueno le material espero que sigas sacando mas videos me quedo claro :)
Excelente.
Maestro!!!!!
Yo utilizo más inline-block, los floats son problematicos pero bueno cada uno con sus gustos. y para eliminar el espaciado de inline-block es con la etiqueta de comentario en html: ó font-size:0 ó
En lineaYsin espacios
salvo el font-size:0 los otros metodosgeneran html sucio lo cual no es buena practica. Por otro lado, declarar font-size:0 y redeclarar el font-size para lo hijos no es más ni menos problemático que un clear o un overflow:hidden para los floats.
ó word-spacing: -.3em; y en el descendiente word-spacing:initial;
Float es problematico cuando las cajas tiene diferentes alturas. como bien mencionas en el video
#contenedor-padre{display: flex;} .... escribo eso, y me alejo muuy, muy lentamente... y ni les digo donde lo aprendí porque les da algo.... ok ok les doy pista, empieza por "plat" y termina en "zi" lol
Mario Rebollo Bravo Este video no es sobre flexbox por lo que no se lo menciona. La proxima semana subiré un video sobre flexbox que estoy preparando. Esperalo. Aprenderás mucho. Más de lo que aprendiste y sin regalar dinero =)
Escuela Digital Ok ok.. ya lo miraremos, saludos
Muy bueno, me suscribo!.
Aquí aprendiendo float habiendo flex-box y grid
por favor explicar que hace cada comando para poder entender las personas que no saben y están aprendiendo
Hola, Soy aprendiz: aprox: 9:50: No señor, no solo que los "bloques se pongan en linea" falta decir que en "display inline-block" además de eso ( ... de ponerse los elementos bloques en horizontal) se respeta la anchura y el alto del elemento block, mientras que en "display-inline" no. Bueno, después de todo creo que si toda la teoría que marea alrededor del tema diseño-Web sería menos árdua si se explicara más visualmente. Lamentablemente sobre esta clase de tutoriales hay pocos. Gracias.
7:40 en realidad también se puede hacer que ese linea en blanco desaparezca con display:inline-block
seria quitar el salto de linea de los div y listo xd o comentarlo
Perfecto!!!
Crack
13:40
Cada palabra tiene espacio porque la.das espacio con la.barra espaciadora, no porque cada palabra sea un elemento inline... O no entendí que quisiste decir.
width: 49%;/*49,5% entran los 3 en linea*/
De que pais es este youtuber? Mexicano?
Me parece es de Peru.
Algo q me molesta y mucho de los programación es q cambian mucho de jerga del español al inglés cuando usan términos q obviamente están en inglés x su programación.
Ríete e su cara... jaja me hizo reír
ya saqué el pajarito XD
practicamente un tutorial de como crear el efecto masonry eeeje