Entrar Ainda não tem acesso?

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

11
respostas

Texto com sublinhado azul

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

por alexander victor dizela
| 79.3k xp | 5 posts

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Contato - Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet"  href="style.css">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul class="navegacao">
                        <li><a href="index.html">Home</a></li>    
                        <li><a href="produtos.html">Produtos</li>    
                        <li><a href="contato.hmtl">Contatos</li>
                    </ul>
                <nav>
            </div>    
        </header>
        <main>
            <form>
                <label for="nomesobrenome">Nome e Sobrenome</label>
                <input type="text" id="nomesobrenome">

                <label for="email">Email</label>
                <input type="text" id="email">

                <label for="telefone">Telefone</label>
                <input type="text" id="telefone">

                <input type="submit" value="Enviar Formulário">
            </form>
        </main>


        <footer>
            <img src="logo-branco.png">
            <p class="copyrigth">&copy; Copyright Barbearia Alura - 2019</p>
        </footer>
    </body>
</html>
11 respostas
por Estudante
| 389.9k xp | 241 posts

Olá, Alexander, tente completar o código da seção head assim:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Contato - Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

Essa parte do link com os arquivos .css são fundamentais para que a formatação fique como mostrado no exercício: o reset.css vai limpar a formatação padrão e o style.css vai aplicar a formatação definida por você.

Espero ter ajudado. Qualquer coisa, volte a compartilhar aqui no fórum. bons estudos!

por Vanessa Cristiane Ribeiro
| 217.7k xp | 141 posts

Poderia colocar seu código no tópico, por favor?

Isso no ajuda a ler, verificar o que está acontecendo e até mesmo testar o código localmente.

Dica:

Colocar o código dentro de um bloco de código: ícone no editor com </>. Isso organiza o código, facilita e agiliza nossa análise. ;-)

por alexander victor dizela
| 79.3k xp | 5 posts

Olá, leila O head já esta com esta formatação, inclusive retirei o link para testar e ver se poderia ser algum erro no link e o sublinhado continuou mesmo sem o link

por Estudante
| 389.9k xp | 241 posts

Entendi, olhei novamente agora e vi que a tag nav não está fechada. É esse o problema:

<nav>
        <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contato.html">Contato</a></li>
        </ul>
</nav>    //precisa fechar a seção nav colocando / antes de nav

Espero ter ajudado. Bons estudos!

por alexander victor dizela
| 79.3k xp | 5 posts

Esta fechado e mesmo assim esta sublinhado, o erro esta no "form"

por Vanessa Cristiane Ribeiro
| 217.7k xp | 141 posts

Faltou postar o código do CSS também. Tem uma parte que não dá para ver na imagem.

por alexander victor dizela
| 79.3k xp | 5 posts
header { 
    background-color: #BBBBBB;
    padding: 20px;

}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;

}

nav {
    position: absolute;
    top:110px; 
    right: 0;

 }
nav li {
    display: inline;
    margin:0 0 0 15px;
}    

nav a { 
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: #C78C19;
    text-decoration: underline;
}

.produtos {
    width: 940px;
    margin:0 auto;   
    padding: 50px 0;
    color: #000000;
 }

.produtos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;

}
.produtos li:hover {
    border-color: #C78C19;
}

.produtos li: active {
    border-color: #088C19;
}
.produtos li:hover h2 {
    font-size: 37px;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}
.produto-preco{
    font-weight: bold;
    font-size: 22px;
    margin: 10px 0 0;
}
.produto-descricao {
    font-size: 18px;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

.copyrigth {
    color: #FFFFFF;
    font-size: 16px;
    margin: 20px 0;

}

main {
    width: 940px;
    margin: 0 auto;
    color: #000000;
}
por Estudante
| 389.9k xp | 241 posts

Agora encontrei o problema:

<nav>
              <ul class="navegacao">
                        <li><a href="index.html">Home</a></li>    
                        <li><a href="produtos.html">Produtos</a></li>    //fechar tag </a>
                        <li><a href="contato.hmtl">Contatos</a></li>   //fechar tag </a>
              </ul>
</nav>

Essa tag é a que cria o link, por isso tudo o que vem depois está sublinhado, como se fosse um link. Enquanto não fechar, não encerra o link.

Bons estudos!

por Vanessa Cristiane Ribeiro
| 217.7k xp | 141 posts

Assim como a Leila falou, você não fechou as duas tags de link:

<li><a href="produtos.html">Produtos</li>    
<li><a href="contato.hmtl">Contatos</li>

Isso está fazendo com que o resto do conteúdo fique com a borda azul. Fechando elas, deve funcionar corretamente:

<li><a href="produtos.html">Produtos</a></li>    
<li><a href="contato.html">Contatos</a></li>

Outro ponto, que não está relacionado ao erro relatado, mas é bom arrumar

Corrigir o href de Contatos:

  • de: contato.hmtl
  • para: contato.html

Senão, depois, o arquivo não vai abrir quando você clicar.

por alexander victor dizela
| 79.3k xp | 5 posts

Perfeito, muito obrigado mesmo, agora funcionou. Agradeço pela agilidade e disposição, excelente serviço

por Vanessa Cristiane Ribeiro
| 217.7k xp | 141 posts

Imagina! Que bom que pudemos ajudar! =)

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA