Entrar Ainda não tem acesso?
12
respostas

Página de contato desconfigurada

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Criando uma nova página e atividade Começando a página de contato

por Maria Imaculada Fernandes Sousa
| 50k xp | 22 posts

Depois de alterar o css como ele falou, a minha página de contato ficou desconfigurada.... Parece que não puxa o style.css, mas puxa na outra página normalmente( ou seja, todas as outras ficaram rodando de boas). O que poderia ser? OBS: Salvei como nome diferente dos deles a página e o produto.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF=8">
        <title>Contato - Barbearia Alura</title>
        <link rel="stylesheet" href="C:\Users\imacu\Documents\pagina da web\reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
     <body>
       <header>
             <div class="caixa">
                 <img src="C:\Users\imacu\Pictures\logo.png" ></h1>

                 <nav>
                     <ul>
                         <li><a href="pagina.html">Home<a/></li>
                         <li><a href="produtodapagina.html">Produtos<a/></li>
                         <li><a href="contato.html">Contato<a/></li>
                     </ul>
                </nav>
             </div>
       </header>
      <main>

               <form>
                   <label for="nomesobrenome">nome e sobrenome</label>
                   <input type="text" id="nomesobrenome">
               </form>

       </main>
        <footer>
        <img src="C:\Users\imacu\Pictures\logo-branco.png">
        <p class="Copyright"> &copy; Copyright Barbearia Alura - 2022</p>
    </footer>
     </body>
#  </html>
12 respostas
por Mary Lindsen Lasek Luzia de Oliveira
| 86.9k xp | 9 posts
Secretária

Conseguiria mostrar o css? Pode ser algum erro de classe.O que exatamente está desconfigurado?

por Renan Lima
| 3640.6k xp | 7680 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Maria.

Tudo bem?

Como assim desconfigurada, não carregou nenhum estilo CSS? Poderia mandar um print por favor?

Eu peguei seu código e está lendo o arquivo CSS sim, só que tem um erro de digitação nos links <a>, você colocou a barra / depois da letra a sendo que tem que ser antes para sinalizar o fechamento da tag <a> ficaria assim: </a>

A sua:

<nav>
                     <ul>
                         <li><a href="pagina.html">Home<a/></li>
                         <li><a href="produtodapagina.html">Produtos<a/></li>
                         <li><a href="contato.html">Contato<a/></li>
                     </ul>
                </nav>

Valeu Maria. Qualquer dúvida manda aqui de novo!

por Mateus
| 21.5k xp | 53 posts
tente tirar esse C:\ O caminho desse css ta meio estranho, coloque todos os arquivos das aulas dentro de uma pasta chamada Alura, depois arraste essa pasta para dentro do seu editor de codigo, ai dentro do editor na hora de preencher o href="" é só digitar / que você vai conseguir navegar entre os arquivos e selecionar o que deseja. Só acho que tem que tirar a / depois de escolher o arquivo senão pode não funcionar.
por Maria Imaculada Fernandes Sousa
| 50k xp | 22 posts

Nenhum solução deu certo

por Maria Imaculada Fernandes Sousa
| 50k xp | 22 posts

Ficou desconfigurada assim (https://cdn1.gnarususercontent.com.br/1/1290181/1aa73aca-2bab-41db-91a9-d6fd0ee39e65.png) )

por Maria Imaculada Fernandes Sousa
| 50k xp | 22 posts

Enquanto a do produto está ótima, funcionando com o mesmo stye.css(https://cdn1.gnarususercontent.com.br/1/1290181/d9f4ca22-62eb-4dab-9582-d1f0a6d4055c.png)

por Maria Imaculada Fernandes Sousa
| 50k xp | 22 posts

código style.css usado na página do produto


header {
    background: #BBBBBB;
}

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

    position: absolute;
    top:110px;
    right: 0;
}

nav li {

display: inline;
margin: 00015px;

}

nav a {

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

}

nav a:hover {
    color: #ff1493;
}

.Produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}

.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: #ff1493;
}

.Produtos li:active{
    border-color: #90ee90;
}

.Produtos li:hover h2{
    font-size: 40px;

}
.Produtos h2{
    font-size: 30px;
    font-weight: bold;
}
.produto-descricao{
    font-size: 19px;
    font-weight: bold;
}

.preco-produto {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

footer{
    text-align: center;
    background: url("/C:/Users/imacu/Pictures/bg.jpg");

}

.Copyright {
    color: #ffffff;
    font-size: 13px;
}
por Maria Imaculada Fernandes Sousa
| 50k xp | 22 posts

Código usado para página do produto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF=8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" href="C:\Users\imacu\Documents\pagina da web\reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
     <body>
       <header>
             <div class="caixa">
                 <img src="C:\Users\imacu\Pictures\logo.png" ></h1>

                 <nav>
                     <ul>
                         <li><a href="pagina.html">Home<a/></li>
                         <li><a href="produtodapagina.html">Produtos<a/></li>
                         <li><a href="contato.html">Contato<a/></li>
                     </ul>
                </nav>
             </div>
       </header>
         <main> 
             <ul class="Produtos">
                       <li>
                           <h2>Cabelo</h2>
                           <img src="C:\Users\imacu\Pictures\cabelo.jpg">
                           <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
                           <p class="preco-produto"> 25,00 R$</p>

                       </li>
                       <li>
                           <h2>Barba</h2>
                           <img src="C:\Users\imacu\Pictures\barba.jpg">
                           <p class="produto-descricao">Corte e desenho profissional de barba</p>
                           <p class="preco-produto">18,00 R$</p>

                       </li>
                       <li>
                           <h2>Cabelo + Barba</h2>
                           <img src="C:\Users\imacu\Pictures\cabelo+barba.jpg">
                           <p class="produto-descricao">Paote completo de cabelo e barba</p>
                           <p class="preco-produto">35,00 R$</p>

                       </li>
               </ul>
         </main>
    <footer>
        <img src="C:\Users\imacu\Pictures\logo-branco.png">
        <p class="Copyright"> &copy; Copyright Barbearia Alura - 2022</p>
    </footer>
     </body>
 </html>
por Mateus
| 21.5k xp | 53 posts

.....

por Mateus
| 21.5k xp | 53 posts

O erro pode estar no arquivo html, alguma coisa deve estar dando conflito

por Mateus
| 21.5k xp | 53 posts

se estiver usando o mesmo css para os dois é só copiar os links style.css da pagina do produto e colar no html da pagina de contato

por Mateus
| 21.5k xp | 53 posts
<head>
        <meta charset="UTF=8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" href="C:\Users\imacu\Documents\pagina da web\reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

cola isso no arquivo html pra ver o que acontece