Entrar Ainda não tem acesso?
3
respostas

Minha estilizações no css não surge efeito na pagina..

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Finalizando nossa página e atividade O desafio do footer

por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Preciso de ajuda para ver aonde estou errando, talvez por ter certeza que estou certo não consigo ver meu erro kkkk. Eu fui estilizando e verificando na pagina e mesmo nada fazendo efeito continuei, as únicas coisas que mudaram na mina pagina foram as cores na tag

, a centralização nada centralizada de toda a tag , tive que acrescentar uma tag em footer porque centralizar item por item não funcionou, acrescentei uma
na tag porque queria usar text-aling e não funcionou. 
<footer class="rodape">
            <div class="rodape__logo">
                <img src="img/Logo.png" alt="Alura">
            </div>
            <ul class="rodape__lista">
                <li class="lista__link">
                    <a href="#">Linguas</a>
                </li>
                <li class="rodape__link">
                    <a href="#">Dispositivos compatíveis</a>
                </li>
                <li class="lista__link">
                    <a href="#">Contrato de assinatura</a>
                </li>
                <li class="lista__link">
                    <a href="#">Politica de privacidade</a>
                </li>
                <li class="lista__link">
                    <a href="#">Proteção de dados no Brasil</a>
                </li>
                <li class="lista__link">
                    <a href="#">Anuncios personalizados</a>
                </li>
                <li class="lista__link">
                    <a href="#">Ajuda</a>
                </li>
            </ul>
            <p class="rodape__texto">® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
            <p class="rodape__texto">Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
        </footer>
    </body>
    </html>
.rodape__logo {
    margin: 6px;
}

.rodape__lista {
    display: flex;
    list-style-type: none;
    margin-bottom: 5px;
}

.lista__link {
    text-decoration: none;
    color: var(--branco-principal)
}

.rodape__texto {
    width: 1200px;
    height: 84px;
    color: var(--cinza-secundario);
    margin-top: 5px;
}
3 respostas
por Victor Costa Santos
| 1919k xp | 3680 posts
Alura Scuba Team Monitor de ForumOps

Olá Arthur, tudo bem?

Seu código estava no caminho, é necessário apenas algumas modificações em suas classe, para alinhar os elementos, e criar algumas class.

Vamos primeiramente acessar as tags a, na lista de links e adicionar um espaçamento:

.lista__link a{
    text-decoration: none;
    color: white;
    margin-left: 1em;
}

Observe que foi adicionado um espaçamento entre os links utilizando o margin-left: 1em;

Vamos adicionar também ou chamar um class já criada por ti no html, que é o rodapé ela fica responsável por alinha o conteudo da página ao centro, observe o código exemplificado: 

.rodape {
    text-align: center;
    margin: 5em 3em;
}

E em rodape__texto, podemos refazer a fim de tirar a limitação de tamanho:

.rodape__texto {    
    margin-bottom: 20px;
    color: var(--cinza-secundario);
    margin-top: 5px;
}
`

Foi retirado o tamanho que estava sendo travado pelo with e height, e adicionamos um margin-bottom para dar uma folga ao conteúdo.

Dessa forma os conteúdos ficam mais alinhados ao centro, deixando a pagina mais semelhante ao figma.

Seu código css fica assim:

.lista__link a{
    text-decoration: none;
    color: white;
    margin-left: 1em;
}
.rodape {
    text-align: center;
    margin: 5em 3em;}

.rodape__logo {
    margin: 6px;
}

.rodape__lista {
    display: flex;
    list-style-type: none;
    margin-bottom: 5px;
}

.lista__link {
    text-decoration: none;
    color: var(--branco-principal)
}

.rodape__texto {    
    margin-bottom: 20px;
    color: var(--cinza-secundario);
    margin-top: 5px;
}

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Valeu, Victor. Me esclareceu muitas coisas, mas tenho algumas duvidas em relação ao que eu errei.

Na sua versão a classe lista__link foi usada duas vezes no código:

.lista__link a{
    text-decoration: none;
    color: white;
    margin-left: 1em;
}

e

.lista__link {
    text-decoration: none;
    color: var(--branco-principal)
}

Enquanto eu fiz em uma vez só:

.lista__link a{
    text-decoration: none;
    color: var(--branco-principal);
    margin-left: 1em;
}

Isso faz algo dar errado ou é só questão de organização, se for organização poderia me dizer o que a falta dessa desorganização pode afetar meu código?

por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Outro erro meu foi no rodape__texto aonde eu informei o width: 1200px; e height: 84px; como as informações do Figma. Na sua versão você informa margin-bottom, color e margin-top e da certo. Então, como saber que informação colocar e qual não colocar?

Sua versão:

.rodape__texto {    
    margin-bottom: 20px;
    color: var(--cinza-secundario);
    margin-top: 5px;
}

Minha versão:

.rodape__texto {
    width: 1200px;
    height: 84px;
    color: var(--cinza-secundario);
    margin-top: 5px;
}