Curso Básico de CSS - 11. Listas

[@ratedxvx]

2019 y puedo decir que eres oro puro hermano, gracias!!!

[@danielcunza]

aprendiendo en plena cuarentena del 2020 desde Perú, tengo que salir aprendiendo algo nuevo después de todo y este crack sabe mucho y es de gran ayuda, si no te suscribiste aun te invito hacerlo, él se lo merece.

[@gustavoaliagagalvez1989]

Y antes sufría para hacer un menú, es increíble estoy aprendiendo mucho gracias!!

[@houstontravis4326]

i know im asking randomly but does any of you know of a method to log back into an instagram account? I was stupid forgot the password. I would love any tricks you can offer me.

[@kodybaker8499]

@Houston Travis Instablaster ;)

[@everysingledaydayinanddayo3798]

Explicas con mucha claridad y precisión. Te felicito!!! Eres de los mejores en KZbin.

[@d-landjs]

Vaya facilidad que me tomo aprender los en enlaces y combinarlos con las listas, en el instituto se me complicaba pero ahora lo veo de una manera fácil gracias a tu enseñanza amigo!!!

[@danielsulbaranseo]

Muy bueno el curso de verdad, muchas gracias. Una pequeña corrección en la descripción "Capitulo #11 del curso básico de CSS, Imagenes", este es de listas.

[@roboiero]

Arturo, 3 años despues de publicado estoy aprendiendo con tu curso de programacion web. Muchas gracias por tu aporte!

Quería agradecerte por los tutoriales, ya que estan geniales y muy entendibles para quien no tiene experiencia WEB. muchas gracias!!

[@amolina2040]

Que excelente vídeo como los anteriores., felicidades CARLOS un abrazo desde Caracas Venezuela ... continuo con el curso básico de CSS GRACIAS

[@KevinMike-GM]

no se ustedes pero yo practico de la siguiente manera. cuando veo que vamos hacer al inicio, trato de replicar el html de Falcon antes que el muestre el sintaxi. y luego cuando lo muestra lo reviso y veo si lo hice igual o falle en algo. esto me ayuda a repasar el html básico. éxito @FalconMasters

[@ELNEGUEV]

Claro Carlos Arturo me esta gustando mucho el vídeo, he estado aprendiendo mucho. Muchas gracias.

[@jesechavez9327]

:// queria aprender diseño web por mi cuenta,comencé con html ,viendo los videos de edteam;quienes hacen un excelente trabajo.Buscando en el mismo sitio donde había visto tutoriales de html me encuentro con una terrible sorpresa...no hay curso desde 0:(.Me tope con este canal ,y mi único comentario es de agradecimiento por el excelente trabajo que haces compartiendo conocimiento con aquellos que están iniciándose .

[@CarlosHernandez-yw2go]

excelentes videos y excelente pedagogía hermano.. saludos desde venezuela

[@saboresdesiempre4307]

Estos son los mejores tutoriales de internet !!!!

[@patricioescarate8972]

se agradece muy buena enseñanza claro y preciso

[@versascemx]

Este video me ayudo bastante en entender claramente el padding se aplica al elemento a y no al li, ese era siempre mi problema. gracias.

[@robygarza24]

no mames en 2 dias he aprendido demasiado, muchas gracias vato la neta

[@aranzuachavezcesar1300]

Muy buen curso. Práctico, sintético y muy explicativo

[@raul_acosta_9520]

Ese menu lo aprendí a hacer por el capitulo 9 con enlaces, mucho mas cómodo de manejar

[@danielpo5771]

Abril 2021..Sumamente didácticos tus videos!!!

[@jhova0o]

Eres genial amigo, muy buenos videos, y tienes una voz muy buena felicidades

[@maximilianoweihmuller1809]

Este video es muy util !!!!!

[@julianandrealbertoriascos3490]

entonces se puede hacer todo en scc por lo visto en html naa solo las imagen con

[@alanmedina8686]

Hola Carlos Arturo... Primero tengo que agradecerte, ya que me están ayudando mucho los tutoriales…Y en segunda, en el capítulo de las listas tengo un problema, ya que al menú se le agregan guiones entre los enlaces, sabes porque puede ser… Saludos!!!

[@Shesth]

Hola desde Argentina, muchas gracias por tus tutoriales!! muy buenos! me gusta mucho como explicas y los videos son muy entretenidos. Quisiera saber si das cursos sobre SEO. Gracias

[@jaimesanchezgalvis]

2020, aprendiendo y aplicando todo muchísimas gracias!!!

[@juancarlosortizramirez6257]

10:21 cómo se arrastra el texto hasta arriba mediante el teclado?

[@RUBEN100TEC]

no se si ya pudiste hacerlo pero es : seleccionas el parrafo y pulas tecla ALT + flecha arriba saludos

[@damianm2436]

Genial. Gracias.

[@DuzZeus]

Para los que no les funciona el "a:hover": solo ha que añadir el "display:block" para que modifique su diseño. .menu li a:hover{ background:#ff0000; text-decoration:none; display: block }

[@josecastillo4100]

graciaas, justo no me funcionó y leí tu comentario :))

[@patricioalassia]

Genio!! gracias totales!

[@elisamartinez202]

WOW felicidades, estoy aprendiendo muchisimo con tus cursos. Espero seguir hasta el final. Solo un pequeño detalle, que a veces se me olvidan algunas funciones y tengo que hacer retroalimentacion. Es necesario que uno se aprenda todo de memoria???

[@nilo591]

Estoy igual Elisa, son tantas que a uno se le olvidan jaja. Pero tranquila, supongo que con práctica y experiencia ya las aprenderemos. :)

[@pierreyescastillo7865]

Muy bien explicado muy buen profesor ... Like :D

[@santoaraujo829]

muy bueno colega. ..sgue asi

[@charliefix9190]

Excelentes tutoriales, me suscribo y gracias.

Sigo dandote las gracias Carlos!

[@JULIANDRESGM]

Gracias Carlos Arturo

[@nonoocaranza]

Uh!!! muy bueno!!!

[@ZN4K5]

Aporte: listas de estilos developer.mozilla.org/es/docs/Web/CSS/list-style-type

[@sebastianpendongil7104]

se podria utilizar este formato para crear un indice dentro de un post también?

[@club.reto.urbano]

amigo como estas excelente tu canal, donde puedo conseguir el significado de las instrucciones reservadas, ul, div. li, y todas esas gracias

[@ricardopc90]

que tal arturo, muy buenos tus videos :) pero tengo una duda... en este video para alinear la lista utilizaste el display: inline-block; pero en el video de "layout, estructura basica" utilizaste el float: left; cual seria la diferencia de utilizar uno u otro? gracias :)

[@eliasgutierrezpinto7404]

amigo me gustaria saber como puedo despelgar un sub lista de un items al hacer hover sobre este?. si tienes un video algo asi ps bien

[@rommelpirela3987]

tengo problemas con el bloque de cada uno con el hover, al correrlo llevo el mouse a donde esta los item y el background no resalta, sino del lado del item.

[@marioocampo470]

Como haces para seleccionar de a varias lineas a la vez? 7:00

[@marioocampo470]

Era una opción del programa q se activa.

[@canalabandonado8040]

@@marioocampo470 tambien apretando "ctrl" y clickeando las que quieres

[@FranyerRangel]

Excelente explicación!! :D

[@VivianaMirandaVivi]

FalconMaster, Buenas Carlos Arturo te consulto realice lo mismo que tu pero en la prte que agrego para darle el estilo.css ul { list-style-type:circle; } no me lo toma cree una carpeta y no logro identificar que error cometo, para que NO realice el cambio como o haces tu en el vídeo... no quedan las lista en circulo, solo una lista nomas, la otra ni se cambia. Ayuda por favor, es la parte que no me sale, así puedo seguir avanzado. Saludos

[@morecente]

Magnífico

[@pablocervantes9169]

oie falcon, este no puedo quitarle la rayita de abajo a mis listas ?

[@brandonjosuemontes4307]

Eres Genial!

[@desireeandreinaespanamonto7959]

eres un sol

[@hugoluisvilla7438]

Exelente, gracias...

[@humbertomoli99]

gracias, me ayudaste en mi diseño (Y)

[@jorgeriverareyes4141]

hola tengo una duda sobre los formatos en css, un ejemplo si tengo dos elementos en mi documento html y solo quiero darle formato a uno solo en css como lo puedo hacer ya que cuando le quiero dar formato a uno los dos adquieren el mismo formato gracias.

[@jordsvarttrollheim1248]

+jorge rivera reyes al elemento "a" que quieras darle su propio diseño debes de declararlo con una clase. Ejemplo: Ejemplo1 Ejemplo2 /*Diseño en css*/ .nombre-clase{ background-color:#000; Solo ese elemento "a" cambiara de diseño

[@jorgeriverareyes4141]

ok muchas gracias por tu respuesta.

[@vainillakola6040]

2:37 No me funciona el "ul > ul" ¿Que estoy haciendo mal? Gracias por tu ayuda

[@alexiscastillo3398]

tal vez abriste o cerraste mal la etiqueta

[@vincentgamboa5540]

es

[@videosespecialesPRO]

muchas gracias.

[@AndreaPuigCruzapc]

Una preguntaza: ¿Porqué no usaste float para poner los elementos li uno al lado del otro?

[@josemartinez-ue7qj]

gracias amigo muy bueno

[@israelgonzalez6316]

hola carlos saludos excelente todos tus videos explicas muy bien y vas al punto solo tengo una consulta si quiero mi menu centrado como lo haria hay un comando o solo juego con los margenes?

[@FalconMasters]

Hola Israel, si hay varias propiedades, te recomiendo que veas mi guia de flexbox, con ella lo puedes hacer: kzbin.info/www/bejne/fF6udKGZjbKDoZI

[@israelgonzalez6316]

@@FalconMasters gracias ya lo veo

[@angelrengel6741]

hola como seria hacer un menu sobre una imagen en una pagina web.

[@TheYurine]

Hola, como podria poner una imagen tipo emoticono de whatsapp para sustituir los puntos??

[@cani7779]

no puedo agregar el padding del boton en .menu li{ }??

[@carlosjuliocastanotorres5480]

Saludos, Buen video si alguien puede aclararme una duda. Si quiero mover solo la etiqueta (a) que se llama Contacto hacia la esquina derecha como puedo hacerlo?

[@jugando-java]

Una pregunta lo que quiero hacer es pasar la lista a la derecha pero con el width del menu que siga siguendo el 100% como podria hacerlo?

[@DublaxTV]

Buenas amigo! Tendras un tuto de esto mismo pero con imagenes? Necesito hacer uno que tenga efecto hover, para cuando se situe el puntero sobre la imagen y cambie, y otro para cuando de clic.

[@kidhwolf]

alguien me explica como hizo lo del minuto 7:00 ? eso de seleccionar todo lo que sombreo

[@ZN4K5]

mantiene presionad la tecla Ctrl, y va donde clik a donde desea colocar sus punteros

[@kidhwolf]

@@ZN4K5 gracias mil

[@Morel893]

gracias

[@anonymoustokill6564]

Gracias!!!

[@yaselguitron2906]

porque cuando quiero modificar las listas no lo hace

[@luisanthonycordovahuacre952]

hola brother genial

[@luisanthonycordovahuacre952]

bien hay

[@luisanthonycordovahuacre952]

sigue asi

[@luisanthonycordovahuacre952]

creando mas videos

[@yesti-vs5tu]

.menu ul li a:hover ya no funciona, alguna alternativa?

[@farrithfarrith456]

una pregunta si tu ya tienes class="uno" class="dos" ect ect aun asi podemos poner una class="menu" ?¿?¿

[@reycomicsjr1515]

no me funcioan en css .menu :C ya revice una y otra vez y no veo el error Inicio Contacto Ayuda Quienes somos Volver .menu { width:100%: background:#000; } .menu li { display:inline-block; } .menu le a { padding:10px 20px; }

[@peterengine3122]

la mayuscula en el class no la tiene en el css

[@PdaClan]

menu li a:hover { background:#fff; color:#000; } No me detecta el hover , ni me se pone en linea , que hago?

[@wtorrado14]

Verfica que cambiaste el color en: .menu { width: 100%; background: #000;

[@cesarrangel6297]

te falta el punto. Seria asi: .menu li a:hover { background:#fff; color:#000; }

[@paulapenas99]

puedes provar añadiendo: .menu li a:hover{color:#000; background:#ccc;} a mi en Sublime text 3 me funciona asi

[@anubisdestructor]

donde lo tienes que agregar a mi no me detecta el hover tampoco

[@paulapenas99]

.menu li a:active{ background:#75ACEC;} .menu li a:hover{ background: #75ACEC; } puedes provar poniendo algo asi al final del archivo css

[@jotacond]

Genio!!!

[@AdrianVillanueva]

Segui los dos cursos el de HTML y este pero mi menu no aparece, alguien puede ayudarme

Tengo una duda, si genero una lista desordenada (es decir con lo que se conoce como viñetas) para hacer un meno asignandole un display:inline-block; y flotandolo a la derecha se invierten las obciones, es decir que creo una lista que sea Inicio - Contenido - ETC aplicando float:right; me queda asi ETC-Contenido-Inicio.... ¿Como podria solucionarlo?

[@FalconMasters]

+An Dré Entiendo, lo que tienes que hacer es encerrar el menu es decir la lista ul en un div y a ese div es al que le debes poner el float left.

[@WilsonCely]

Hola CArlos Arturo, Como estas? Tengo algo super raro, el comando list-style-type:; no me funciona. Si coloco un color: la lista cambia de color pero no me toma el list-style-type:

[@SirfeX29]

podrias hecer un video de un menu lateral

[@carolinapavez571]

Hola! ¿cómo puedo enlazar un ítem de la lista a un lugar del sitio, o cómo se hace un ancla a partir de ella? muchas gracias!

[@alejandracalle1007]

¿Qué código se debe usar para centrar una lista?

[@brahian9494]

banda también pueden hacer el orden en números romanos: ol { list-style-type:upper-roman; } Grando falcon ;)

[@ZN4K5]

FalconMaster, disculpa se que ya tiene mucho tiempo de este video y estos cursos pero el in line block block y demas me confunden mucho en su uso trato de averiguar que pondras antes de decirlo en tu codigo para saber si estoy entendiendo y siempre me equivoco

[@ELNEGUEV]

Carlos Arturo, tengo una duda ¿existe sublime text 3 en español, pregunto por que Dreamweaver si esta en español y veo que tu usas sublime text, muchas gracias?

[@FalconMasters]

+Nerys Aguirre Me parece que no esta en español, pero es exactamente lo mismo en Ingles. Saludos

[@ELNEGUEV]

+FalconMasters Muchas gracias Carlos por tu repuesta, Dios te cuide.

[@angelvela2398]

Hola trato de seguirte en Dreamwever. entre otras cosas el inlen-block no me aparece en el display y no encuentro algo similar..

[@arleycastro7358]

Es inline-block

[@anubisdestructor]

tengo un problema con el código hover!! no me lo detecta el sublime text solo se ve como un texto blanco saludos espero me puedas responder gracias

[@musicchill24_7]

me paso lo mismo lo resolviste?

[@anubisdestructor]

ロザンベント no solo actualice al nuevo y lo detecto

[@pablitodecolegiales]

Muy buen curso. Solo faltaria agregar como hacer un menu desplegable a este video.

[@DanielRamosDesign]

suscrito papu !!!! sus-cri-to, gracias por la paciencia de explicar todo con tanto detalle estoy haciendo mi CV espero cuando lo termine me puedas dar tu opinión :D

[@robinsonrodriguez6472]

Hola Falcon, excelentes tús curso por eso acudo a tí para una orientación en este problema. En mi barra de navegación no aparece ninguna de las propiedades que escribo en el selector (.menu), estos son los codigos en los lenguajes. HTML Inicio ¿Quiénes somos? Contáctenos CSS .menu { background:#D7DBDD; list-style:none; margin:2% 3%; } .menu li { display:inline-block; } .menu li a { color:black; text-decoration:none; font-size:700%; display:inline-block; padding:2% 3%; } Por favor, agradecería tú orientación para entender la situación.

[@robinsonrodriguez6472]

una sugerencia ya revise el y está en linea con el sólo que en los comentarios no aparece así. Gracias de todas formas.

[@SuperJCstyle]

Hola amigo soy nuevo en este aspecto, me gustan mucho tus videos y pues un amigo me dijo que con Adobe Dreamweaver estaria muy bien que programara pero varios codigos que tu has hecho no me funcionan como el quitar el subrayado de mi vinculos, necesito que me ayudes amigo! ponte en contacto conmigo. te lo pido!

[@jyuviolegrace2879]

si alguien pudiera ayudarme soy nueva en esto , pongo todo el codigo igual encierro los il dentro de los ul pero el problema esta en que me salen uno al lado del otro la lista todo me sale hacia los costado y no en fila , uno encima del otro no se que podria hacer

[@MrYocastro]

manda el código

[@manucapde930]

hola estoy usando el notepad++ y crhome, no me lee el atributo displa:inline-block; ayudaaa

[@carfex4879]

te falta la y en display :v

[@nivalv9881]

y para poner en el centro de la pantalla todo el menu?

[@amauriyazircorralhernandez1818]

Lo pones en la clase: .menu{ text-align: center; width: 100%; background: #e32249; list-style:none; margin-top: 0; padding: 0; }

[@__rocce]

gracias :' )

[@thedjrem]

hice el ejemplo tal cual esta en el video pero no me salio, tuve que sacar el list style de la clase menu a que se debe esto? li{ list-style: none; } .menu{ width:100%; list-style: none; background:#000; margin:0; padding:0; } .menu li{ display: inline-block; } .menu li a{ padding: 10px 20px; display: inline-block; color:#fff; } .menu li a:hover{ background: #ccc; color: #000; }

[@viveroloscerezos6068]

Carlos estudiando via web con tus videos muy instructivos felicitaciones 1 ? al colocar marcastes todos juntos los Item como es ese truco?

[@MrYocastro]

si usas sublime text, marcas el primero y con ctrl + clic los demás

[@touchcelltecnologia4040]

a los que no les modifica depronto les falta arriba en head esto espero les funcione.

[@angelgarcia82747]

Estoy en celular y no me funciona :( además no has dicho que en "CSS/estilos.css" es la dirección del archivo CSS, yo pongo la dirección y todo pero no funciona

[@farrithfarrith456]

una pregunta si nosotros tenemos class="uno" class="dos" class="tres" podemos poner aun class="menu" ?¿?¿ porque a mi no me deja utilizar la palabra menu solo si siguo la secuencia de los numero que ya tengo en class=" "

[@CarlosGonzalez-ur6fz]

A mi me facilita mejor trabajar con la secuencia de los numeros, aunque seria mas facil trabajarlo con letras como "Menu" pero mmm que raro que no te deje usarlo .-.

[@JuanAntonioGordo]

Prueba a poner miMenu en lugar de Menu. Las palabras reservadas a veces nos fastidian y como Menu se escribe igual en inglés que en Español puede ser ese el problema.Saludos

[@Cesarit0m]

necesito hacer una lista pero así: 1.1 1.2 1.3 1.4 1.5 si sabes como lo podría hacer ?

[@vainillakola6040]

Buena pregunta, si me gustaría saber, a ver que dice Fm

[@jijihajiri775]

4 años nadie respondio

[@eltiomarchele4368]

F

[@andres1guerrero965]

Hola, me gustaría saber cómo agregas esas etiquetas a un texto ya establecido, si alguien sabe el truco, por favor, decidme.

[@xero9490]

yo no puedo hacer que cambie de color cuando yo paso el mouse y si lo dengo en el de .menu li a{ padding:10px 20px; } como le hago?

[@mahmudahmadineyad4998]

Es con el a:hover amigo.

[@GadDilanShadowMX-ArrancarMX]

Alguien que me pueda ayudar :( No me queda el menú, lo tengo tal cual lo tienes en el video y no me queda, me sale lo que avisa Falcon cuando en hover solo se rellena la parte del enlace y no todo hasta el background :( AYUUUDAAAAA!!!! CSS .menu{ width: 100%; background: #000; list-style: none; margin: 0px; padding:0px; } /*Controla menu a li*/ .menu li{ display: inline-block; } /*Controla menu li a =Enlace*/ .menu li a{ padding: 30px 50px; display: inline-block; color: #fff; } /*Controla menu li a:hover cuando pasa cursor*/ .menu li a:hover{ background: #ccc; color: #000; } HTML Inicio Rutinas Torneos Registro Contactanos

[@AnimeFunEventsOtaku]

pues a mi si me ah salido mira.. codepen.io/anthony-david-vilchez-brice-o/pen/gBKPyp