Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
16
respuestas

[Duda] Atomic Desing

Al realizar el AD como en esta clasie de me desconfiguro la pag.web la utilizamos paraa ver el trabajo. Alguen me podra decir en que me equivoque ?

<title>Fruta & Fruto</title>
    <link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" rel="stylesheet" />
    <link href="./assets/css/normalize.css" rel="stylesheet" />
    <link href="./assets/css/reset.css" rel="stylesheet" />
    <link rel= "stylesheet" href="/assets/css/cabecera.css">
    <link rel= "stylesheet" href="/assets/css/menu/menu-lista.css">
    <link rel= "stylesheet" href="/assets/css/menu/menu-item.css">
    <link rel= "stylesheet" href="/assets/css/menu/menu-link.css">
16 respuestas

Sigue funcionando este foro ???

hola pudiste resolver , mepaso igual se me desconfiguro todo.. hice exactamente lo de la profe :(

Hola ,no lamentablemente no lo consulte tambien en el Discord pero las respuestas no funcionaron. Si podes solucionarlo avisame.

Salidos

asi fue como me funciono a mi, colocandole el punto antes de la barra ./ tambien tuve que verificar si estaban escrito igual la class en el css y en el html y encontre que me habia equivocado en los nombres..

   <link href="./assets/css/cabecera.css" rel="stylesheet"/>
    <link rel= "stylesheet" href="./assets/css/menu/menu-lista.css">
    <link rel= "stylesheet" href="./assets/css/menu/menu-item.css">
    <link rel= "stylesheet" href="./assets/css/menu/menu-link.css">

Muchas Gracias

 <link  href="./assets/css/cabecera.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./assets/css/menu/menu-lista.css">
    <link rel="stylesheet" href="./assets/css/menu/menu-item.css">
    <link rel="stylesheet" href="./assets/css/menu/menu-link.css">

Me queda asi.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

</head>
    <body>
      <header class="cabecera">
        <img class="logo-img" src="./assets/img/logo.jpg" alt="frutayfruto">
        <nav class="menu">
            <ul class="menu__lista">
                <li class="menu__item"><a class="menu__link activo" href="">Inicio</a></li>
                <li class="menu__item"><a class="menu__link" href="">Recetas</a></li>
                <li class="menu__item"><a class="menu__link" href="">Quienes Somos</a></li>
                <li class="menu__item"><a class="menu__link" href="">Contacto</a></li>
            </ul>
        </nav>
      </header>
      <section class="banner">
        <img src="./assets/img/banner.png" alt="banner">

      </section>
    </body>
</html>

recuerda colocarle los dos guiones en el css tambien,

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Si con la medologia BEM me quedaba bien ,pero al pasar al AD no me queda igual (ya borrando el style.css como dice la profesora) y separando la cabecera y los menu.

yo tambien hice lo del AD y el problema estaba en uno de los nombres lo tenia mal escrito o sea no estaba igual que la class y al corregir ese error listo.. si lo deseas pasame el codigo de los menu y la cabecera para ver , suele pasar que uno de tanta frustracion buscando el error no lo mira jeje.. me ha pasado muchisimo.. en el menu-item y menu-lista debes tener el problema por estar mal escrito o la ruta

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

esta todo bien lo compare con mi codigo .. lo unico es que los styles de cabecera, menu-list y menu-item debes guardar los cambios

Hola compañero, me pasó lo mismo que a ti. Revisé y comparé todo el código y, según yo, estaba exactamente igual al del video.

Mi solución fue eliminar el archivo menu-item y el contenido lo agregué al archivo menu-link.

Espero también te funcione.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Gacias por la info

Hola! a mi me pasaba lo mismo que a vos, al aplicar el Atomic Design (separando los archivos del menu) se perdía la propiedad Display: flex de las secciones de la barra de navegación quedado nuevamente como una lista. Lo que hice fue colocar menu_lista y menu__item en un mismo archivo CSS y así nuevamente se aplicó la propiedad flex. Espero sea de ayuda. Saludos!

Gracias