I can’t change the color of a div, I think I did something wrong that is preventing it (the div I speak is the .div_barra_search)

Asked

Viewed 92 times

-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>
html css
  • 3

    I recommend you take the [tour] to learn the basics of the site and read the [Ask] guide to see how you can improve your question.

  • If you wanted a black background, it’s working. What would be the problem?

2 answers

1

Color it is receiving, but it has no content inside it, so do not expand, you can set the size by CSS as in the example below:

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

I put these sample sizes, change as your need.

  • but the div n would have to receive the color even without elements inside it??? I am trying to copy the google home screen to train but I have difficulty doing that search input(because you have two buttons "inside the input" then the way I found to imitate this was to take the color of the margin right of the input and put a div next to it without the margin left, only that the div n receives neither margin, this background color was just a test)

  • No, since it by default has no size. The @Cleiton explanation below makes it clearer.

  • obg for personal help ^^

1

When you create a div, and it contains no element within it, the height is zero, so it is not displaying the background black color...

to display and you can fill this black background, has 2 mode: put in CSS: 

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

or go into HTML and write anything inside the div, and it will already be shown a black background..

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.