Entrar Ainda não tem acesso?
2
respostas

Âncora está com pixel azul e depois roxo apesar do reset CSS

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Header, Flexbox e @import

por Pedro Moutinho Lima
| 17.3k xp | 18 posts

Olá, tudo bem?

Seguindo o passo a passo da Moni as imagens foram incluídas no código porém apareceram um pixel azul nelas (aquela formatação padrão de âncora) e roxo após o clique. Como faço pra removê-las? O reset CSS não deveria ter impedido isso de acontecer?

Segue meu código e screen shot:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade ``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <header class="cabecalho">
        <span class="cabecalho__menu-hamburger"></span>
        <img src="img/Logo.svg" alt="logo da AluraBooks">
         <a href="#">
            <img src="img/Favoritos.svg">
        </a>
        <a href="#">
            <img src="img/Sacola.svg">
        </a>
        <a href="#">
            <img src="img/Usuário.svg">
        </a>
   </header>
</body>
</html>
2 respostas
por Pedro Moutinho Lima
| 17.3k xp | 18 posts

Consegui resolver aqui mas tenho um outro problema. A Moni conseguiu fazer com que as 3 ancoras (favoritos, compras e usuário) ficassem alinhados no teto da tela. Os meus estão aparecendo desalinhados (favoritos e compras alinhados embaixo e usuário centralizado). Como consigo resolver isso?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Segue meu código até o momento:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <header class="cabecalho">
        <div class="container">
            <span class="cabecalho__menu-hamburger"></span>
            <img src="img/Logo.svg" alt="logo da AluraBooks">
         </div>
         <div class="container">
            <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos"></a>
            <a href="#"><img src="img/Sacola.svg" alt="Carrinho de compras"></a>
            <a href="#"><img src="img/Usuário.svg" alt="Meu perfil"></a>
        </div>
   </header>
</body>
</html>
por Nícolas Felipe Ferreira Souza
| 2559.4k xp | 8154 posts
Instrutor Monitor de Fórum

Olá, Pedro! Como vai?

Parabéns por ter conseguido resolver o seu problema anterior.

Para essa questão de alinhamento dos ícones, você pode adicionar o seguinte código ao seu CSS:

.container{
    display: flex;
    align-items: center;
}

Isso deve resolver o seu problema. Espero ter ajudado.

Caso tenha mais dúvidas estou aqui para ajudar.

Abraço e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!