Andre Lança Andre Lança - 9 months ago 23
CSS Question

Cant fit Logo with bars

This is how my menu is, and I want to fit the white box in the other 2 bars perfectly and responsively.

cant fit logo with both bars



html {
font-family: 'Lato', sans-serif;
background-color: black;
width: 100%;
}

#logo {
background: linear-gradient(to bottom, rgba(253, 253, 253, 1) 0%, rgba(197, 193, 193, 1) 100%);
padding: 45px 80px;
z-index: 1;
float: left;
height: 100%;
display: block;
overflow: hidden;
}

#barra_cima {
background-color: rgb(173, 28, 62);
overflow: hidden;
text-align: center;
z-index: auto;
}

#barra_cima .centro {
display: inline-block;
margin: 15px 60px;
}

#barra_baixo {
background-color: rgb(47, 47, 55);
overflow: hidden;
text-align: center;
z-index: auto;
}

#barra_baixo ul {
text-align: center;
margin: 30px;
}

#barra_baixo ul li {
display: inline;
text-decoration: none;
color: white;
}

#barra_baixo ul li a {
text-decoration: none;
color: #ffffff;
margin: 40px;
font-size: 16px;
font-family: 'Lato', sans-serif;
}

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>TORNEIO DO REITOR</title>
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen">
<link rel="stylesheet" type="text/css" href="meyer.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
</head>

<header>


<div id="teste">
<img src="http://i.imgur.com/NquLsxa.png" id="logo">
<div id=barra_cima>
<img src="http://i.imgur.com/JCANRvs.png" class="centro">
<img src="http://i.imgur.com/1PTpDc6.png" class="centro">
</div>
<div id=barra_baixo>
<ul>
<li><a href="#">REGULAMENTO</a></li>
<li><a href="#">XV TORNEIO MASCULINO</a></li>
<li><a href="#">VIII TORNEIO FEMININO</a></li>
<li><a href="#">NOTÍCIAS</a></li>
<li><a href="#">REITOR TIPS</a></li>
</ul>
</div>
</div>
</header>

<body>

</body>

<footer>

</footer>

</html>




Answer Source

You can use flexbox to do this easily. Use flex-direction: row for the image and right side, and flex-direction: column for the right side, and set the rows on the right side to flex-grow: 1

html {
  font-family: 'Lato', sans-serif;
  background-color: black;
  width: 100%;
}

#logo {
  background: linear-gradient(to bottom, rgba(253, 253, 253, 1) 0%, rgba(197, 193, 193, 1) 100%);
  padding: 45px 80px;
  align-items: center;
}
#logoImg {
  display: block;
}

#barra_cima {
  background-color: rgb(173, 28, 62);
  overflow: hidden;
  text-align: center;
  z-index: auto;
}

#barra_cima .centro {
  display: inline-block;
  margin: 15px 60px;
}

#barra_baixo {
  background-color: rgb(47, 47, 55);
  overflow: hidden;
  text-align: center;
  z-index: auto;
}

#barra_baixo ul {
  text-align: center;
  margin: 30px;
}

#barra_baixo ul li {
  display: inline;
  text-decoration: none;
  color: white;
}

#barra_baixo ul li a {
  text-decoration: none;
  color: #ffffff;
  margin: 40px;
  font-size: 16px;
  font-family: 'Lato', sans-serif;
}

.flex {
  display: flex;
}
.col {
  flex-direction: column;
}
.col, .col > div {
  flex-grow: 1;
}
<header>
  <div id="teste" class="flex">
    <div id="logo" class="flex">
      <img src="http://www.swiftpic.org/image.uploads/11-03-2017/original-5761944fa726de5e0023a845f2de13f2.png" id="logoImg">
    </div>
    <div class="flex col">
      <div id=barra_cima>
        <img src="http://i.imgur.com/JCANRvs.png" class="centro">
        <img src="http://i.imgur.com/1PTpDc6.png" class="centro">
      </div>
      <div id=barra_baixo>
        <ul>
          <li><a href="#">REGULAMENTO</a></li>
          <li><a href="#">XV TORNEIO MASCULINO</a></li>
          <li><a href="#">VIII TORNEIO FEMININO</a></li>
          <li><a href="#">NOTÍCIAS</a></li>
          <li><a href="#">REITOR TIPS</a></li>
        </ul>
      </div>
    </div>
</header>