3

Tenho uma div com uma imagem no background e com um input do tipo texto. Preciso que o input fique em uma determinada posição e conforme a mudança de resolução, ele vá descendo para não tapar o título "Se conecte com a foco". Estou usando Bootstrap(caso necessite):

inserir a descrição da imagem aqui

Isso é o que tenho, mas o input fica depois da imagem em resoluções menores. Como limitar a div, impedindo isso?

<div class="conecte-se">
            <div class="caixa-email">
                <input type="text" name="email" placeholder="Digite seu e-mail..." class="input-email"/>
            </div> 
        </div>

CSS:

.conecte-se{
  width: 100%;
  background: url('../images/conect-foco.jpg');
  height: 493px;
  margin-top: 100px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.caixa-email{
  margin: 0 auto;
  text-align: center;
  padding-top: 348px;
}

.input-email{

  width: 52%;
  height: 45px;

}
2
  • Ta suportando IE < 9? Commented 21/10/2015 às 16:38
  • Não precisa, @renan, mas pode ajudar com qualquer dica?
    – Lollipop
    Commented 21/10/2015 às 16:54

2 Respostas 2

2

Não chega a ser necessário "fixar", só precisa tratar para que outros elementos não o sobreponha o texto. Uma opção é usar layout flexível, mas verifique o suporte que os navegadores oferecem.

Se precisar suportar o IE na versão anterior ao 9, nessa pergunta existem algumas soluções para centralizar os elementos verticalmente, que aparentemente é disso que trata sua pergunta.

Referências: align items | flex | flex-flow | justify-content.

Exemplo de div ocupando 100% horizontal/vertical do documento:

* { margin: 0; padding: 0 }

body, html, .container {
  width: 100%;
  height: 100%
}

.container {
  align-items: center;
  background: url(https://i.sstatic.net/IaTJ5.jpg) center center fixed;
  background-size: cover;
  display: flex;
  flex-flow: column wrap;
  justify-content: center
}

input {margin-top: 10% }

@media screen and (max-width: 480px) {
  h1, h4 { text-align: center }
}
<div class='container'>
  <h1>Se conecte com a <b>foco</b></h1>
  <h4>Saiba das nossas ofertas antes de todo mundo</h4>
  <form action='#'>
    <input type='email' placeholder='Digite seu e-mail...' />
  </form>
</div>


Exemplo de div com tamanho fixo em uma determinada posição no documento:

* { margin: 0; padding: 0 }

body, html {
  width: 100%;
  height: 100%
}

/**
 * Simulando que o div está em uma posição da página.
 **/
.container {
  margin-top: 10%;
  height: 200px;
  width: 100%
}

.container {
  align-items: center;
  background: url(https://i.sstatic.net/IaTJ5.jpg) center center fixed;
  background-size: cover;
  display: flex;
  flex-flow: column wrap;
  justify-content: center
}

input {margin-top: 10% }

@media screen and (max-width: 480px) {
  h1, h4 { text-align: center }
}
<div class='container'>
  <h1>Se conecte com a <b>foco</b></h1>
  <h4>Saiba das nossas ofertas antes de todo mundo</h4>
  <form action='#'>
    <input type='email' placeholder='Digite seu e-mail...' />
  </form>
</div>

A única regra aplicada em resoluções menores foi a de centralizar horizontalmente o texto, o restante é tudo tratado pelas caixas flexíveis.

1
  • O segundo exemplo, era o que queria, mas na hora do scrol não queria que a imgaem ficasse rolando no fundo. Muito obrigado!
    – Lollipop
    Commented 21/10/2015 às 17:49
2

Defina a posição do input como fixa:

#idinput{
    position: fixed;
 }
2
  • Obrigado pela ajuda Ysabelle, mas estamos falando de responsividade e fluidez. position: fixed; não funciona para este caso, eu acho! Talvez você mude minha opinião citando mais exemplos, testando seu código.
    – Lollipop
    Commented 21/10/2015 às 17:09
  • 2
    Sugiro que utilize os conceitos de grid do bootstrap, provavelmente resolva seu problema. Dê uma lida: getbootstrap.com/css/#grid-options. Por exemplo, você pode utilizar um tamanho para cada coluna dependendo do dispositivo. Commented 21/10/2015 às 17:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .