Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

HEIGHT 250px : Número mágico ? Qual solução ? Part II

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Fazendo o footer e controlando melhor os elementos e atividade Arrumando o course map

por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente

Usei a "solução" deste tópico:

https://cursos.alura.com.br/forum/topico-height-250px-numero-magico-qual-solucao-169639

Entretanto quando usamos o justify-content: space-between; no nav.rodapePrincipal-navMap-list

O alinhamento fica a direita, como resolver?Insira aqui a descrição dessa imagem para ajudar na acessibilidade

7 respostas
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Anderson, tudo bem?

Você poderia enviar seu código index.html e flexbox.css completo para que eu possa visualizar melhor o que pode estar ocorrendo e tentar te ajudar?

Fico no aguardo, abraços!

por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente 
<footer class="rodapePrincipal">
        <div class="container">

            <section class="rodapePrincipal-navMap">
                <h3 class="subtitulo">Mapa de cursos</h3>
                <nav class="rodapePrincipal-navMap-list">

                    <div container-exemplo>
                        <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
                        <a class="rodapePrincipal-navMap-link" href="#">Java</a>
                        <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Python</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>
                    </div>

                    <div container-exemplo>
                        <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
                        <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
                        <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
                        <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>
                    </div>

                    <div container-exemplo>
                        <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
                        <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
                        <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
                        <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
                        <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Django</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>
                    </div>

                    <div container-exemplo>
                        <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
                        <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
                        <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
                    </div>

                </nav>
            </section>

        </div>

        <section class="rodapePrincipal-patrocinadores">
            <div class="container">
                <ul class="rodapePrincipal-patrocinadores-list">
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-alura" href="#">
                            <img src="img/logos/alura.svg" alt="Logo da Alura">
                        </a>
                    </li>
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-caelum" href="#">
                            <img src="img/logos/caelum.svg" alt="Logo da Caelum">
                        </a>
                    </li>
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-casaDoCodigo" href="#">
                            <img src="img/logos/cdc.svg" alt="Logo da Casa do Código">
                        </a>
                    </li>
                </ul>
                <form class="rodapePrincipal-contatoForm" action="#">
                    <fieldset>
                        <legend class="rodapePrincipal-contatoForm-legend" for="email-contato">Entre em contato conosco</legend>
                        <div class="rodapePrincipal-contatoForm-fieldset"> 
                            <input class="rodapePrincipal-contatoForm-emailInput" type="email" name="email-contato" id="email-contato">
                            <button class="rodapePrincipal-contatoForm-submit" type="submit">Enviar</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </section>
    </footer>
por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente 
.cabecalhoPrincipal .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav{
    display: flex;
}

.rodapePrincipal-patrocinadores .container{
    display: flex;
    justify-content: space-between;
}

.rodapePrincipal-patrocinadores-list{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 70%;
    margin-right: 5%;
}

.rodapePrincipal-contatoForm{
    width: 25%;
}

.rodapePrincipal-contatoForm-fieldset{
    display: flex;
}

nav.rodapePrincipal-navMap-list {
    display: flex;
    /*flex-direction: column;*/
    /*height: 250px;*/
    flex-wrap: wrap;
    justify-content: space-between;
}

.container-exemplo{
    display: flex;
    flex-flow: column wrap;
}
por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente

Lembrando que segui os passos deste tópico >>>> https://cursos.alura.com.br/forum/topico-height-250px-numero-magico-qual-solucao-169639

por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente

https://github.com/Anderson-Ribeiro-Sant-Ana/alura-flexbox

solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Opa Anderson, obrigada pelo retorno!

O que está ocorrendo é que as propriedades especificadas para o .container-exemplo não estão sendo aplicadas.

Isso ocorre porque no arquivo HTML há um erro de sintaxe, ou seja, ficou faltando acrescentar o class="" em todas as <div> que foram criadas. Veja:

<div container-exemplo> <!--faltou o class=""-->
    <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Java</a>
    <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
    <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
    <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
    <a class="rodapePrincipal-navMap-link" href="#">Python</a>
    <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
    <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
    <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>
</div>

<div container-exemplo> <!--faltou o class=""-->
    <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
    <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
    <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
    <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>
</div>

<div container-exemplo> <!--faltou o class=""-->
    <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
    <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
    <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
    <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">Django</a>
    <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>
</div>

<div container-exemplo> <!--faltou o class=""-->
    <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
    <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
    <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
    <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
</div>

Modificando, ficará assim:

<div class="container-exemplo">
    <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Java</a>
    <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
    <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
    <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
    <a class="rodapePrincipal-navMap-link" href="#">Python</a>
    <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
    <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
    <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>
</div>

<div class="container-exemplo">
    <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
    <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
    <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
    <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>
</div>

<div class="container-exemplo">
    <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
    <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
    <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
    <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">Django</a>
    <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>
</div>

<div class="container-exemplo">
    <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
    <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
    <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
    <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
</div>

Dessa forma, a referência da localização de onde serão aplicadas as propriedades será identificada corretamente e esse será o resultado:

seção do mapa de cursos alinhados corretamente, como mostra o modelo explicado

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente

Que descuido mds. Muito obrigado :)