No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Posicionar una lista en horizontal

8/18
Recursos

Ya posicionaste los elementos del header de nuestro proyecto a un extremo de la pantalla, eso est谩 genial. Ahora los colocaremos en horizontal. 隆Vamos a abrir nuestro editor!

Editar una lista en HTML

Primero, vamos a modificar el 100% de nuestra etiqueta de lista no ordenada (ul). Para ello, necesitamos agregarle un identificador a esta etiqueta. Te recomendamos leer sobre la metodolog铆a BEM, que es una arquitectura que te permite, entre otras cosas, colocar nombres m谩s claros a las clases y atributos.
8.png

Recuerda: las clases son gen茅ricas, mientras que los id, 煤nicos. Colocamos clases a elementos que se repetir谩n a lo largo del c贸digo, es decir, tendr谩n la misma clase. Los id no se pueden repetir.

Estilos de la lista

Seguimos usando la metodolog铆a BEM para ser espec铆ficos al llamar a las clases y asegurarnos que no haya otra estructura parecida. F铆jate c贸mo est谩 detallado.
8.1.png

  • Invocamos la clase como: la etiqueta header que contenga un nav con una clase llamada nav-right-section
  • width: tiene un ancho espec铆fico para que no tenga el 100% como el header
  • height: como ya definimos una altura a su padre (header) y no puede ser mayor, la colocamos autom谩tica, para que tome la altura de su padre
  • display: para posicionar los elementos
  • list-style: quitamos los bullets, ya que no los necesitamos
  • justify-content: centramos el contenido para que no se quede 煤nicamente a la derecha
  • align-items: alineamos los elementos para no mantenerlos en la parte de arriba

Nos quedar铆a de esta manera:
image.png

Margin

Ahora tenemos que separarlos con el margin.

Especificamos el elemento que buscamos. La etiqueta nav que tenga una clase llamada nav-right-section y que contenga una etiqueta a.

  • margin-right: la despegamos un poco m谩s del extremo de la pantalla
  • color: usamos una cifra hexadecima de color negro
    8.2.png

Nos quedar铆a de esta manera:
image.png

Eliminar el subrayado

Ahora solo nos falta eliminar el subrayado que tiene el texto. Como no lo queremos en ninguna etiqueta ancla, aplicamos los cambios a la etiqueta de manera general en la parte de arriba. La llamamos directamente.
8.3.png

  • text-decoration: para quitar el subrayado.
  • cursor: pointer: para agregar la imagen de una mano al posicionar el cursor sobre el texto.

Nos quedar铆a de esta manera:
image.png

隆Excelente! Nuestro encabezado se ve mucho mejor, pero a煤n nos falta mucho. Practica estos conceptos y rev铆salos cuantas veces lo necesites antes de pasar a la siguiente clase.

Contribuci贸n creada con aportes de: Jos茅 Miguel Veintimilla.

Aportes 168

Preguntas 53

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para aquellos que quieran practicar y mejorar sus habilidades a la hora de utilizar flexbox les dejo un juego muy interesante y divertido: https://flexboxfroggy.com/#es

Me impuse como reto hacer el clon sin ver los videos y completarlo me tomo 116 lineas en el editor. Ahora mirare los videos para ver que cosas pude haber optimizado.

Hay algo raro en el minuto 6:03. La alineaci贸n vertical no te va a centrar debido a que el instructor Diego no le da una altura al nav. Por alguna raz贸n que no entiendo a Diego si le funcion贸.

Pero al analizar el error me di cuenta que la height de nav no se esta definiendo, es por eso que nav toma el height de su contenido font-size definido en body.
Para corregirlo yo hered茅 el heigth de su padre header y el problema se solucion贸.

header nav {
  display: flex;
  justify-content: flex-end;
  height: inherit;
}
header nav .navegationBar {
  width: 250px;
  height: auto;
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
}

puedes usar Flexbox Cheatsheet es un plugin de vscode que ayuda con flexbox
te muestra la funci贸n de como se alinea el display flex.

y se instala como: vscode live server .

El valor auto en realidad no toma el valor del padre, lo que hace es utilizar todo el espacio que dispone. Seria mejor utilizar en este caso inherit que si utilizar el valor de la etiqueta m谩s proxima, en este el padre.

yo le a帽adi a mi codigo el hover para que se ponga el subrayado al poner el mouse encima de los links

a:hover{
 text-decoration: underline;
}```

Gente. Aca les dejo un link que explica como funciona FlexBox con ejemplos graficos FlexBox CSSTricks

Me encantan sus cursos. Soy ingeniera de desarrollo de software y todo lo he visto de pasada en la universidad, pero estos cursos me han ayudado a repasar y ha entender mejor las cosas.

esta chido para super-cargar mis habilidades en html y css !!

el height auto del .nav-right-section no hace nada y el curso pointer tampoco . 鈥
el height auto : ajusta su alto para que sus elementos se muestren correctamente . El profesor dice que como el padre tiene 60px y .nav-right-section tiene su height auto , ahora este tendr谩 el mismo tama帽o que el padre algo que es falso y si el auto solo ocupa lo que ocupa el elemento entonces el align-items tampoco hace nada ya que no tienes un alto para poder mover tus items鈥

Y las anclas por defecto traen el cursor pointer 鈥淯SER AGENT STYLESHEET鈥 鈥 Quiz谩s el profesor lo explique mas adelante, solo quise pasar este dato que me pareci贸 curioso 鈥
Hay m谩s cosas que se pueden mejorar pero esperaremos que el prof las haga mas adelante 鉂わ笍

Me gusta como explica, este profesor.

height: inherit; tambien podemos decir que herede el alto del padre.

Una de las cosas que me ayuda much铆simo para entender d贸nde empieza un 谩rea y d贸nde acaba la otra es ponerle colores a cada selector, como lo hago aqu铆:
As铆, puedes moverle y ver muy bien qu茅 es lo que est谩 cambiando:

voy en el segundo .21 y lo que he visto me dej贸 impactos, est谩 super genial la forma de explicar de este profesor!!! Alguien sabe si tiene otros cursos dentro de Platzi?

Posicionar una lista en horizontal
.
Clase, es el identificador que le ponemos a una etiqueta para que a trav茅s de CSS le otorguemos estilos 煤nicos. Los ID son 煤nicos.

Genial, hasta ahora todo clarisimo. Igual es para repetir una y otra vez el curso.

les recomiendo este video para aprender mejor BEM, https://youtu.be/bvnzyXGkNY4

  • Clases 鈫 gen茅ricas. Se van a repetir.
  • Id 鈫 脷nico.

Gran explicaci贸n y una forma muy sencilla de acomodar los elementos de navegaci贸n

Genial cada vez se aprende mas a no peliar con Css !jaja

(

Alineacion en horizontal:

  • width: 60px;

  • justify-content: center;

Alineacion en vertical:

  • height: 30px;

  • align-items:center;

Si no definimos un tama帽o de altura o ancho en la caja, las alineacion no funcionaran ya que no tendran un tama帽o sobre el cual referenciarse para posicionar el contenido.

BEM:

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

驴Qu茅 diferencia hay en poner :

header nav .nav-right-section{
}

a poner:

.nav-right-section{
}

suponiendo que esa clase es 煤nica?

Es mejor heredar los estilos de los padres si se repiten o proporcionarcelos de manera independiente?

<nav {
	display: flex;
}

nav ul {
	display: inherit;
}
>

La verdad que me esta gustando mucho el curso, tiene muy buenas practicas que en el curso de desarrollo no vi y la verdad que son muy utiles, asi como el * para dale el mismo estilo a todos elementos, o bien de la forma rapida para crear la estrucura html usando 鈥!鈥. Tambien me gusto como nombre a las clases y elementos en css, para identificar que sean unicos. !

class: Las clases se utilizan cuando se reusan los estilos en diferentes partes del c贸digo. Las clases empiezan con punto (.)
id: Los id se utilizan cuando se aplica estilo s贸lo una vez.

flex-start: Alinea elementos al lado izquierdo del contenedor.
flex-end: Alinea elementos al lado derecho del contenedor.
center: Alinea elementos en el centro del contenedor.
space-between: Muestra elementos con la misma distancia entre ellos.
space-around: Muestra elementos con la misma separaci贸n alrededor de ellos.

Deben colcoar esta pseudoclase para etiqueta a en el nav tal vez se aplique en otros a:

nav .nav-right-section a:hover {
text-decoration: underline;
}

Esto aplica la l铆nea al momento de pasar el mouse!

Me gusta como escribe c贸digo este profe!!

Class = Generico
ID = Unico

Es muy buena la explicacion de De Granda. Gracias!

Me hac铆a falta esta clase para entender por completo al HTML y CSS


ac谩 les dejo un juego de CSSGrid muy entretenido para practicar la t茅cnica

Para los que quieran practicar FlexBox les dejo un juego que me ayudo muchisimo se llama FlexBox Zombies lo recomiendo muchisimo

Mis respetos para el maestro Diego De Granda.

Excelente el tema de maquetacion en HTML utilizando la arquitectura semantica, esto nos facilitar谩 m谩s adelante cuando emepecemos a trabajar con los estilos

CODIGODEL CSS

a {
text-decoration: none;
cursor: pointer;
}

header {
width: 100%;
height: 60px;
}

header nav {
display: flex ;
justify-content: flex-end;
}

header nav .nav-right-section {
width: 250px;
height: auto;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
}

nav .nav-right-section a {
margin-right: 10px;
color: #000000;
}

CODIGO DEL INDEX.HTML
<ul class=鈥渘av-right-section鈥>
</ul>

Si quieren hacerlo 100%realista como yo el verdadero color de la fuente del nav de google es #212121
y adem谩s si agregan al css:

nav .nav-right-section a:hover{ text-decoration: underline; }
cuando pasen el mouse por encima se subraya el texto tal como en google.

buena explicacion, pero malas practicas hubiera estado genial que escribieras los selectores con la nomenclatura de BEM me imagin贸 que platzi debe tener otro curso donde te ense帽an solo eso en 34 videos, en fin鈥

poder entender la metodologia BEM para nombrar clases en las etiquetas de HTML te va a ahorrar muchos dolores de cabeza y ademas podra hacer tu codigo reutilizable. por lo que te aconsejo sepas aprenderla muy bien BEM

gracias

Las clases de este profesor son de muy buena calidad, se nota que se piensa mucho el learning path antes de ejecutar la clase.

Excelente explicaci贸n de metodolog铆a BEM

Tenia la duda de que porque diego usa el tema de especificidad, cuando se puede colocar directamente la clase, lo probe y no genera ning煤n cambio, y a la conclusi贸n que llegue es que a menos que se tengan estilos ambiguos se debe dar la especificidad, ademas de lo que lei en comentarios es por tema de que cuando son proyectos grandes es mas facil entender el codigo especificado de esa forma

que pasa si cuando guardo, ya no se actualiza?

psd: En la ma帽ana estaba estudiando y deje todo abierto y ahora es de noche y estoy retomando las clases. 驴Eso tiene un impacto ?

Mi navegador coloc贸 automatiamente el cursor en forma de mano sin codificar cursor;pointer;

驴Por qu茅 al dar margin y cambiar el color a los links al seleccionar escribe nav .nav-right-section a y no escribe nav .nav-right-section li a?

Por qu茅 no puso el li es mi pregunta. 隆Gracias!

les dejo un juego que esta genial para practicar flexbox (no es el de la ranita). tambien tiene para practicar grid.
https://mastery.games/flexboxzombies/

Disculpen, en el mintuo 6:03 donde diego poner

<align items: center;>

a mi no se me centran los elementos, de hecho no hace nada esa linea de estilos, algien sabe si sirve de algo en este caso?

Solo para aclarar no es necesario poner header nav .nav-rigth-section como se ve en el minuto 2:56 solo tienen que poner punto y el nombre de la clase que le hayan puesto , 贸sea solo esto .nav-rigth-section

  • width: Sirve para definir el ancho que va a ocupar nuestro elemento en nuestra p谩gina web.

  • height: Define el alto que va a ocupar nuestro elemento en nuestra p谩gina web.

  • list-style: Quita los marcadores (o vi帽etas) de nuestras listas.

  • align-items: Alinea mis elementos de forma horizontal. Podemos elegir en qu茅 parte de nuestro contenedor podemos alinear nuestro elemento.

Aqu铆 les dejo un link para que entiendan un poco mejor el funcionamiento del align-items:
https://www.w3schools.com/CSSref/css3_pr_align-items.asp#:~:text=CSS align-items Property 1 Definition and Usage. The,Sets this property to its default value.

muy claros los conceptos de css y html

Clases y Ids de CSS

Genial, Gran clase

Como en el header ya tenemos la declaraci贸n display: flex. Podemos ya directamente utilizar display: inherit.

Muy buen proceso, se entiende el paso a paso

Muy claro el paso a paso.

Hola compa帽eros. Me ahorr茅 mucho c贸digo y me dio el mismo resultado:

header nav .nav-right-section{
  width: 250px;
  height: auto;
  display: flex;
  list-style: none;
}
header nav .nav-right-section a{
  padding: 10px;
  }```

aprend铆 algo que no sabia, por eso es bueno no adelantarse en los cursos.

aprendi la etiqueta cursor 馃槂

Relevante lo que dice respecto a las clases.
Repado.
Class 鈥> Identificador de una etiqueta en HTML para que a trav茅s de CSS podamos darle un estilo 煤nico.

Me costaba antes esta parte

Con esta p谩gina se puede profundizar mas el tema de flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Con que facilidad dictas las clases, me sorprende demasiado.
Si mis profes de la carrera fueran como tu D:

La etiqueta a por defecto ya presenta su hover con cursor:pointer, por lo que no es necesario agregar esa propiedad en CSS 馃槄

Aqu铆 mi aporte

Por los momentos no he trabajado que el fondo sea responsive, pero as铆 vamos鈥

Clase 8 - Posicionar una lista en horizontal


驴Qu茅 metodolog铆a podemos usar para nombrar de manera f谩cil nuestras clases?

  • BEM.

驴En qu茅 casos debemos usar el selector de clase?

  • Debemos usar el selector de clases cuando vayamos a repetir el mismo c贸digo en varios elementos.

驴En qu茅 momento debemos de usar el selector de id?

  • Cuando queremos estilizar un 煤nico elemento de HTML.

驴Qu茅 pasa cuando definimos la propiedad width o height con un valor de auto de un elemento hijo?

  • El elemento hereda el tama帽o que tiene definido el padre.

驴C贸mo podemos quitarle las vi帽etas que tienen los elementos <li> de una etiqueta desordenada u ordenada?

  • Con la declaraci贸n:
list-style: none;

驴C贸mo podemos quitarle el subrayado que tienen por defecto los elementos <a>?

  • Con la declaraci贸n:
text-decoration: none;

驴Para qu茅 nos sirve la declaraci贸n cursor: pointer;?

  • Nos permite hacer que el cursor cambia a una mano solo cuando el usuario pase el mouse por encima del el elemento que tenga esta declaraci贸n.

驴Qui茅n esta Viendo esta clase en el 2023?

Resumen:

Una buena forma de separar elementos es con la propiedad gap. Un gap de 1 o 2 em y ya est谩!

Para separar los items entre si, yo he usado column-gap: ;
esto es una propiedad del modulo flexbox y grid.

CSS: alinear horizontalmente una lista (header)

se nota que bajaron la velocidad para que termine durando 2 horas.

Que raro se hace cuando el profesor habla y habla y la pantalla est谩 quieta con su c贸digo. Al menos otros cursos se ve una minipantalla con el profesor moviendo los brazos鈥

Para los que ya se aburrieron de flexbox froggy hay un juego de zombies con flexbox, muy divertido ch茅quenlo 馃槃.
https://mastery.games/flexboxzombies/

Este ejercicio del nav ya lo hice, lo hice diferente y esto me genera una duda.
.
La forma en que lo hice es que le asign茅 un width de 100% al contenedor que dentro tiene los anclas y luego con flex los aline茅 a la derecha.
.
El resultado visualmente es el mismo. Esta claro que hay diferentes formas de hacer las cosas.
.
Mi cuestion es, asi como existe BEM para tener estandares sobre nombrar las clases鈥 驴Existe algun tipo de estandar para saber como trabajar las estructuras?
.
Por ejemplo, Por qu茅 colocar un <ul> con <a> y <li> y no botones en el header?
Los margenes se le colocan al contenedor o al elemento?
Todo elemento debe estar metido dentro de contenedores o solo los que consideremos necesarios?
Por que una pagina como platzi (Y muchas otras) tiene tantos contenedores dentro de otros contenedores?

Ese fondo est谩 muy duro馃槷鈥嶐煉

CLASES: SON GENERICAS, SE USAN PARA SECCIONES QUE SE VAN A REPETIR Y LE PONGO ESTILO

ID: SON UNICOS

Para quien tenga duda sobre como funciona a fondo flexbox y la importancia de comprender los ejes, el eje principal es el horizontal y el secundario el vertical, aqu铆 les dejo un v铆deo que explica detalladamente https://youtu.be/_YUJ37FARrU

El cursor:pointer; que agrega al ancla no es necesario, ya que por defecto ya lo hace

Queda muy claro el apartado de las clases, podemos copiar ese estilo y usarlos con otros elementos siempre que no tengan una ID 煤nica.

Creo que darle la propiedad "cursor :pointer; " a las los selectores 鈥渁鈥 esta de mas, por defecto traen esa propiedad todas las 鈥渁鈥

hola! como estan! Dejo mi pequeno comentario 馃槂 , a la hora de seprar los elementos en el nav, en vez de hacerlo como el profe Diego, lo que hice fue utilizar justify-content: space-between, y para que no exista tanto espacio entre ellos, cambie el width a 150px.

header nav .nav-right-section {
        width: 150px;
        display: flex;
        list-style: none;
        justify-content: space-between;
        align-items: center;
        
}

Posicionar elemento a la derecha

Otras arquitecturas conocidas son OOCSS y Atomic CSS.

Sigamos

隆Viva Flexbox!

La etiqueta de a tiene por default el coursor: pointer;

Muy buena clase.

muy buen video hasta ahorita todo bien

Me esta quedando todo claro gracias a este curso.

Vamos genial !!

Diego explica muy bien, adem谩s me gusta el orden que lleva 馃憤馃

GOOD JOB