Entrar Ainda não tem acesso?
15
respostas

imagem de fundo faltando na pagina!

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

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

bom minha imagem de fundo esta faltando na lateral direita da minha pagina! https://drive.google.com/file/d/1uffLrF1cckHe1GfDVGOg-dd6WohlqDwK/view?usp=sharing

15 respostas
por Nielly Karen Carvalho dos Santos
| 42.7k xp | 1 posts

tente ajustar como auto o background-size: * e alinhar o *background-position:

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

não deu não!

por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Geovane você pode postar o código aqui pra gente simular o erro??

Mas tente colocar o background-size: cover e o background-position: center para ver se muda :D (como não sei que erro pode estar ocorrendo no código esta pode ser uma solução das "mais comuns" heheh)

por Geovane Ferreira Santana
| 204.9k xp | 669 posts
</head>
<body>

    <header>
        <div class="informacao">
        Geovane Santana<br>
        <div id="desenvolvedor"> desenvolvedor </div>
        </div>
        <h1>olá<img src="Geovane (1).png"></h1>


    </header>

    <main>
        <section class="description">
        <h2 class="title-about">about</h2>
        <p class="content-about">Meu nome é Geovane, tenho 24 anos e moro na Saúde - SP.<br>Sou Desenvolvedor Web formado pela escola Alura <br> e busco estágiio na área de desenvolvimento web.<br>Possuo conhecimento em <strong>HTML</strong>, <strong>CSS</strong>, <strong>PHP</strong> e<strong>JavaScript</strong>.</p>
          </section>

          <form>
              <h3>contato</h3>


                <label for="nome">nome</label>
                  <input class="primeiro" type="text" id="nome">

                  <label for="email">email</label>
                  <input class="segundo" type="email" id="email">

                  <label for="telefone">telefone</label>
                  <input class="terceiro" type="telefone" id="telefone">

                  <label for="mensagem">mensagem</label>
                  <textarea id="mensagem"></textarea>

                  <input type="submit" value="enviar" class="enviar">


        </form>


    </main>

    <footer>

    </footer>

</body>

body { background-image: url("fundo.jpeg"); background-repeat: no-repeat; background-size: cover; background-position: center; }

.informacao {

margin: 40px 100px;

}

#desenvolvedor { margin: 0 20px;

}

h1 { padding: 40px 200px 80px; font-size: 70px;

}

img { position: absolute; top: 0px; left: 200px; margin: 100px 0px 0px; width: 1000px; background-size: 100px;

}

main { width: 90%; margin: 600px 50px; }

.description { font-family: Arial; display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(0, 0, 0, 0.9) }

.description .title-about::after { content: ""; display: block; width: 1.2em; height: 0.1em; margin: 10px auto; background-color: #cd2c51; }

.title-about { font-size: 1.7em; color: rgba(0, 0, 0, 0.8) }

.content-about { text-align: center; line-height: 2em; } h3 { text-align: center; margin: 70px; font-size: 20px; } input{ margin: 20px; display: block; position: relative; top: auto; left: 500px;

} label{

display: block;
position: relative;
top: 42px;
left: 416px;
font-size: 23px;

} .primeiro{ border: none; border-bottom: solid red; position: relative; top: auto; left: 451px; padding: 0px 105px;

}

.segundo { border: none; border-bottom: solid red; position: relative; top: auto; left: 451px; padding: 0px 107px; }

.terceiro { border: none; border-bottom: solid red; position: relative; top: auto; left: 473px; padding: 0px 97px;}

textarea { position: relative; top: auto; left: 500px; padding: 0px 84px; border: none; border-bottom: solid red; margin: 20px; display: block;

} .enviar { width: 153px; margin: 43px 35px; padding: 96px; }

.enviar:hover { cursor: pointer;

}

por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Geovane, tudo bem?

A sua página está com um comportamento não tão legal, ela está scrolando para os lados, no sentido x., então, a imagem não consegui preencher algumas partes da página, já que você colocou a imagem de fundo para não repetir background-repeat: no-repeat;

Refatorando algumas coisas do seu código, agora, ela está com uma largura ajustada, sem scrollar para os lados e o form centralizado com o auxílio do display: flex;sem precisar das propriedadesposition, left, e display: block, ficando mais enxuto.

Vou deixar aqui o trecho que modifiquei:

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

label {
  top: 42px;
  left: 416px;
  font-size: 23px;
}
.primeiro {
  border: none;
  border-bottom: solid red;
  padding: 0px 105px;
}

.segundo {
  border: none;
  border-bottom: solid red;
  padding: 0px 107px;
}

.terceiro {
  border: none;
  border-bottom: solid red;
  padding: 0px 97px;
}

A propriedade left com valores muito altos na tentativa de centralizar, estava empurrando os elementos pro lado, deixando a largura da página muito grande e a imagem de fundo não conseguia acompanhar.

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

não deu certo olha como ficou! https://drive.google.com/file/d/1E57h8b8gmjFPmuAClIj9asnqi6rcP7As/view?usp=sharing

por Geovane Ferreira Santana
| 204.9k xp | 669 posts
</head>
<body>

    <header>
        <div class="informacao">
        Geovane Santana<br>
        <div id="desenvolvedor"> desenvolvedor </div>
        </div>
        <h1>olá<img src="Geovane (1).png"></h1>


    </header>

    <main>
        <section class="description">
        <h2 class="title-about">about</h2>
        <p class="content-about">Meu nome é Geovane, tenho 24 anos e moro na Saúde - SP.<br>Sou Desenvolvedor Web formado pela escola Alura <br> e busco estágiio na área de desenvolvimento web.<br>Possuo conhecimento em <strong>HTML</strong>, <strong>CSS</strong>, <strong>PHP</strong> e<strong>JavaScript</strong>.</p>
        </section>

          <h3>contato</h3>
          <form>



                <label for="nome">nome</label>
                  <input class="primeiro" type="text" id="nome">

                  <label for="email">e-mail</label>
                  <input class="segundo" type="email" id="email">

                  <label for="telefone">telefone</label>
                  <input class="terceiro" type="telefone" id="telefone">

                  <label for="mensagem">mensagem</label>
                  <textarea id="mensagem"></textarea>

                  <input class="enviar" type="submit" value="enviar">


        </form>


    </main>

    <footer>

    </footer>

</body>

body { background-image: url("fundo.jpeg"); background-repeat: no-repeat; background-size: cover;

}

.informacao {

margin: 40px 100px;

} .informacao::after { content: " "; background-color: red; display: block; height: 2px; width: 16px; padding: 0 10px 0; margin: -7px -5px; }

#desenvolvedor { margin: 0 34px;

}

h1 { padding: 40px 200px 80px; font-size: 70px; text-decoration: underline;

}

img { position: absolute; top: 0px; left: 200px; margin: 100px 0px 0px; width: 1000px; background-size: 100px;

}

main { width: 90%; margin: 600px 50px;

}

.description { font-family: Arial; display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(0, 0, 0, 0.9) }

.description .title-about::after { content: ""; display: block; width: 1.2em; height: 0.1em; margin: 10px auto; background-color: #cd2c51; }

.title-about { font-size: 1.7em; color: rgba(0, 0, 0, 0.8) }

.content-about { text-align: center; line-height: 2em; } h3 { text-align: center; margin: 70px 70px; font-size: 32px; position: relative; top: 64px; text-decoration: none; border-bottom: 1px solid red; padding-bottom: 5px; margin-bottom: 56px; left: 496px; width: 93px;

} input{ margin: 20px; display: block; position: relative; top: auto; left: 500px;

} form { display: flex; flex-direction: column; justify-content: center; align-items: center; } label { top: 42px; left: 416px; font-size: 23px; } .primeiro { border: none; border-bottom: solid red; padding: 0px 105px; }

.segundo { border: none; border-bottom: solid red; padding: 0px 107px; }

.terceiro { border: none; border-bottom: solid red; padding: 0px 97px; } textarea { position: relative; top: auto; left: 500px; padding: 0px 80px; border: none; border-bottom: 1px solid #ca5257; margin: 13px 18px; display: block;

} .enviar { width: 247px; margin: 32px 8px; padding: 12px 40px 12px; border: 1px solid #e63e3e; border-radius: 111px; font-size: 24px; }

.enviar:hover { cursor: pointer;

}

por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Chefe, beleza? Tente adicionar no seu código body do CSS background-position: center

body { background-image: url("fundo.jpeg"); background-repeat: no-repeat; background-size: cover; background-position: center;

Para mim funcionou junto as configurações da Laís

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

não verdade cara o meu deu mais desalinho todo meu formulário, ai eu voltei tudo do jeito que tava, olha esse link: https://drive.google.com/file/d/1E57h8b8gmjFPmuAClIj9asnqi6rcP7As/view?usp=sharing

por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Geovane, tudo bem?

Segue o print de teste que fiz e passei anteriormente: https://imgur.com/a/PicDhjg

O código que utilizei para deixar o form centralizado e retirar a largura da página para evitar o scroll no sentido x: 

body {
  background-image: url("fundo.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.informacao {
  margin: 40px 100px;
}
#desenvolvedor {
  margin: 0 20px;
}

h1 {
  font-size: 70px;
}

img {
  position: absolute;
  top: 0px;
  left: 200px;
  width: 100px;
  background-size: 100px;
}

main {
  width: 100%;
}

.title-about {
  font-size: 1.7em;
  color: rgba(0, 0, 0, 0.8);
}

.content-about {
  text-align: center;
  line-height: 2em;
}
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

label {
  top: 42px;
  left: 416px;
  font-size: 23px;
}
.primeiro {
  border: none;
  border-bottom: solid red;
  padding: 0px 105px;
}

.segundo {
  border: none;
  border-bottom: solid red;
  padding: 0px 107px;
}

.terceiro {
  border: none;
  border-bottom: solid red;
  padding: 0px 97px;
}

textarea {
  padding: 0px 80px;
  border: none;
  border-bottom: solid red;
}
.enviar {
  margin: 27px 500px;
  padding: 12px 0 11px;
  border: 1px solid #e63e3e;
  border-radius: 29px;
  font-size: 20px;
}

.enviar:hover {
  cursor: pointer;
}

Espero ter te ajudado!

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

olha como ficou! https://drive.google.com/file/d/1W2L4zKEiovDyE0OumYNHLC9O1qkAMQjU/view?usp=sharing

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

na verdade ele teria que ficar assim, pra você entender!

https://drive.google.com/file/d/1vpNlxQlzEDmC2P-1eUP_icMFIzGrOzF7/view?usp=sharing

por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Geovane, tudo bem?

Eu fiz uma exemplo de como você pode adaptar para o formulário do seu site de acordo com o layout que foi passado, segue:

       height: 20px;
        width: 200px;
        text-align: right;
        clear: both;
        float: left;
        margin-top: 10px;
      }
      input {
        height: 20px;
        width: 300px;
        border: none;
        border-bottom: 1px solid #000;
        float: left;
        margin-left: 10px;
      }
    </style>
    <form>
      <div class="form-group">
        <label for="nome">Nome:</label>
        <input name="nome" type="text" id="nome" />

        <label for="telefone">Telefone: </label>
        <input name="telofene" type="tel" id="telefone" />
      </div>
    </form>

Eu criei um fomulário com dois labels e dois inputs, nome e telefone. Na estilização, utilizei o float: left para que os elementos saíssem do seu fluxo padrão e fossem colocados à esquerda. Os demais estilos foram para dar largura, altura e respiros entre os elementos. Assim, input e label ficarão alinhados na mesma linha e empilhados um abaixo do outro ao mesmo tempo

Resultado do código acima: https://imgur.com/a/xuPGGs1

Nessa aula aqui, o professor explica mais sobre a propriedade float: https://cursos.alura.com.br/course/html5-css3-avancando-css/task/63319

E a documentação da propriedade: https://developer.mozilla.org/pt-BR/docs/Web/CSS/float

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

Mais a página ficou toda desalinhada!

por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Geovane, tudo bem?

Dentro do seu layout, você pode fazer assim:

Colocar o input dentro do escopo da label para label e input ficarem alinhadas.

 <h3>contato</h3>
        <label for="nome">
          nome:
          <input class="primeiro" type="text" id="nome" />
        </label>
        <label for="email">
          e-mail
          <input class="segundo" type="email" id="email" />
        </label>
        <label for="telefone">
          telefone
          <input class="terceiro" type="telefone" id="telefone" />
        </label>

E no css, você pode evitar as propriedade positions e paddings e margins com valores altos :

form,
label {
  display: block;
  padding: 10px;
}
form {
  width: 270px;
  margin: 10px;
  margin: 0 auto;
}
label {
  color: #FFF;
  text-align: left;
  color: #000000;
}
input {
  display: inline-block;
  padding-left: 10px;
}

O teste com o seu código: https://imgur.com/a/3YhbRrU

Você pode adaptar para o seu layout com as cores, bordas e espaçamentos que deseja.