-2

<html>

<head>
<meta charset="utf8">
<title>google</title>

<style>
.div1{
  padding-top: 8px;
  text-align: right;
}

.textos-top{
  text-decoration: none;
  font-family: arial, sans-serif;
  font-size: 13px;
  padding-left: 15px;

  color: black;
  vertical-align: middle;
}
.img_top{
  display: inline-block;

  text-align: right;
  padding-left: 15px;
  vertical-align: middle;
  margin-right: 12px;
}
.fazer_login{
  display: inline-block;

  font-family: arial,sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  color: white ;
  text-align: center;


  background-color: #4387fd;   
  border-radius: 2px;
  line-height: 30px;
  padding-left: 13px;
  padding-right: 13px;
  margin-right: 20px;
}

.logo{

  text-align: center;
  vertical-align: middle;
  margin-top: 145px;
}
.barra_de_pesquisa{
  display:inline-block;

  margin-top: 42px;
  width: 25%;

  border: 1px solid #e6e6e6;
  border-right: none;

  line-height : 20px;
  height : 20px ;
  padding : 7.5px
}
.div_barra_pesquisa{
  display: inline-block;

  background-color: black;
  border-left: none;

}


</style>

</head>

<body>
<div class="div1">
  <a href="" class="textos-top"> Gmail </a>
  <a href="" class="textos-top"> Imagens </a>
  <a href=""><img src="botao_google.png" class="img_top"></a>
  <a href="" class="fazer_login" >Fazer login</a>
<center>
  <img src="logo_google.png" class="logo">
  <br>
  <input type="" name="" class="barra_de_pesquisa";>
  <div class="div_barra_pesquisa">

  </div>
  <br>
</center>

</body>

</html>
2
  • 3
    Recomendo que faça o tour para aprender o básico do site e leia o guia de Como perguntar para verificar como pode melhorar sua pergunta.
    – Woss
    7/03/2018 às 22:42
  • Se queria um fundo preto, tá funcionando. Qual seria o problema?
    – Meu ovo
    7/03/2018 às 22:48

2 Respostas 2

1

Cor ele está recebendo, porém ele não tem conteúdo dentro dela, por isso não expande, você pode definir o tamanho pelo CSS como no exemplo abaixo:

.div_barra_pesquisa{
  display: inline-block;
  width:100px; //Largura
  height:100px; //altura
  background-color: #000;
  border-left: none;
}

Coloquei esses tamanhos de exemplo, altere conforme sua necessidade.

3
  • mas a div n teria que receber a cor mesmo sem elementos dentro dela??? eu estou tentando copiar a tela inicial do google para treinar mas to com dificuldade de fazer aquela input de pesquisa(pois vc tem dois botoes "dentro da input" ai o jeito que eu achei para imitar isso foi tirar a cor da margin right da input e colocar uma div ao lado sem a margin left, so que a div n recebe nem margin, esse background color foi so um teste) 10/03/2018 às 3:06
  • Não, já que ela por padrão não tem tamanho. A explicação do @cleiton abaixo deixa mais claro.
    – RpgBoss
    10/03/2018 às 3:08
  • obg pela ajuda pessoal ^^ 10/03/2018 às 3:21
1

Quando se cria uma div, e ela não contem nenhum elemento dentro dela, o height é zero, por isso nao esta exibindo a cor preta de fundo...

para exibir e você poder enchergar esse fundo preto, tem 2 modo: colocar no CSS:

.div_barra_pesquisa{
  height:100px; //altura 
}

ou ir no HTML e escrever qualquer coisa dentro da div, e ja sera mostrado um fundo preto..

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