CODEWITHSUNDEEP
htmlcss
gab
gab

Reputation: 43

How to make one div higher than the other two

I have this CSS code:

    #naviga {
text-align:center;
  padding-top: 20px;
}

#nav {
display:inline;
  padding-top: 0px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 0 0 0 #ffffff;
  box-shadow: 0 0 0 0 #ffffff;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

#nav a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 0 0 0 #ffffff;
  box-shadow: 0 0 0 0 #ffffff;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
  padding-bottom: 3px;
  letter-spacing: 1px;
  margin-left: 20px;

}

#nav a:hover {
  -webkit-box-shadow: #fff;
  box-shadow: 0 3px 0 0 #fff;
  opacity: 0.7;
}

#loggo {
display:inline;
  background-image: url(http://i.imgur.com/qhrrawQ.png);
height: 50px;
width: 55px;
margin-left: 20px;
}

...and this HTML code:

<div id="naviga">
<div id="nav"><a href="">uno</a> <a href="">due</a> <a href="">tre</a></div>
<div id="loggo"></div> 
<div id="nav"><a href="">quattro</a> <a href="">cinque</a> <a href="">sei</a></div> 
</div>
</div>

This is what comes out:

current

And this is what I would like it to come out like:

intended

What should I do?

Upvotes: 1

Views: 592

Answers (3)

Asons
Asons

Reputation: 87251

Add vertical-align: middle to the classes

Read more about align here

Upvotes: 1

AndrewL64
AndrewL64

Reputation: 16311

You can't add a height to inline elements. Just change your list items to display:block; (or inline-block) and then specify a height equal to the logo height like this:

#nav a{
    display: block;
    line-height: 50px;
    float:left;
    background: none;
    margin: 0px 10px;
}

Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/65sf2f66/44/

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115288

You are using display:inline although I prefer inline-block here.

You need to set the vertical-align to middle as the default is baseline.

Note: You were using the same ID (#) more than once which is invalid. So I switched them to classes instead.

   .naviga {
     text-align: center;
     padding-top: 20px;
   }
   .nav {
     display: inline-block;
     vertical-align: middle;
     padding-top: 0px;
     color: blue;
     text-transform: uppercase;
     text-decoration: none;
   }
   .nav a {
     padding-bottom: 3px;
     letter-spacing: 1px;
     margin-left: 20px;
   }
   .loggo {
     display: inline-block;
     vertical-align: middle;
     background: red;
     height: 50px;
     width: 55px;
     margin-left: 20px;
   }
<div class="naviga">
  <div class="nav"><a href="">uno</a>  <a href="">due</a>  <a href="">tre</a>
  </div>
  <div class="loggo"></div>
  <div class="nav"><a href="">quattro</a>  <a href="">cinque</a>  <a href="">sei</a>
  </div>
</div>

Upvotes: 1

Related Questions