Entrar Ainda não tem acesso?
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
| 216k xp | 141 posts
Analista de Desenvolvimento Front-End

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
| 216k xp | 141 posts
Analista de Desenvolvimento Front-End

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
| 216k xp | 141 posts
Analista de Desenvolvimento Front-End

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
| 216k xp | 141 posts
Analista de Desenvolvimento Front-End

Imagina! Que bom que pudemos ajudar! =)