too big in height, horizontal nav bar with img with

Question

I am trying to make a navbar with imag, I don't know what to do because the main problem is that the image has to be resized but when it's done the 'li' tag are too big in height and I don't know how to deal with it and I don't know where it's from. Basically, i'm trying to do a navabar with images with the same height but when I'm dealing with the there is an extra space. I did some research but I found nothing about this <li> problem.

Here some code for example :

#bas_page ul{
 list-style: none;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 justify-content: center;
 padding:0;
 height: 80px;
 width: 90%;
 display: inline-block;
 margin: 0 auto;
 vertical-align: center;
}

#bas_page li{
 display: inline-block;
}

.icon_contact{
 height: 100%;
}

#bas_page #mon_email{
 background: white;
 position: relative;
 color: #50667F;
 font-size: 100%; 
 padding: 5%;
 box-sizing: border-box;
 font-weight: bold;
 margin: 0;
}

<footer id="bas_page">
   <ul>
    <li><a href="#"><img src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"  class="icon_contact" alt="My Facebook"></a></li>
    <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJ_YIhdykKf9oMnK1G1qIpiE7PREjJD_xHSQLP6nThnf2PMLE9" class="icon_contact" alt="My Linkedin"></a></li>
    <li><a href="#"><p id="mon_email" class="icon_contact">ffffff@gmail.com</p></a></li>
   </ul>
  </footer>

SOLUTION

It's from the <img> and not the <li>

vertical-align

here I found some explanation

well, does anyone know why my post is still downvoted? I applied all of the advices in the guide — , Jan 13 '18 at 22:53
yes i saw thank you ! hopefully a moderator will tell me what's wrong with my post because i really tried to apply all the advices — , Jan 14 '18 at 15:43

Lakindu Gunasekara · Answer 1 · 2018-01-05T17:09:59.980

0

In order to control your image size, you can use .icon_contact class. And define the width and height and in mon-email , font-size to same units

Snippet

#bas_page ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  padding: 0;
  height: 80px;
  width: 90%;
  display: inline-block;
  margin: 0 auto;
  vertical-align: center;
}

#bas_page li {
  display: inline-block;
}

#bas_page #mon_email {
  background: white;
  position: relative;
  color: #50667F;
  font-size:2em;
  padding: 5%;
  box-sizing: border-box;
  font-weight: bold;
  margin: 0;
}
.icon_contact {
  width:2rem;
  height:2rem;
}

<footer id="bas_page">
  <ul>
    <li>
      <a href="#"><img src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" class="icon_contact" alt="My Facebook"></a>
    </li>
    <li>
      <a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJ_YIhdykKf9oMnK1G1qIpiE7PREjJD_xHSQLP6nThnf2PMLE9" class="icon_contact" alt="My Linkedin"></a>
    </li>
    <li>
      <a href="#">
        <p id="mon_email" class="icon_contact">ffffff@gmail.com</p>
      </a>
    </li>
  </ul>
</footer>

edited Jan 05 '18 at 17:09

answered Jan 05 '18 at 16:24

Lakindu Gunasekara

4,221
4
27
41

indeed but i want it to get the same size as the paragraph its why i put height = 100% to fit the with the container's size but the width of the
is too large.

Jan 05 '18 at 16:45

so you want to get text and the images both into same size? – Lakindu Gunasekara Jan 05 '18 at 16:51

yes that's it i made some chagnes but i dont know why it works, i'll post it – Jan 05 '18 at 17:05

use "rem" units instead of percentages, it will define a fixed width and height, also it is responsive. – Lakindu Gunasekara Jan 05 '18 at 17:06

ok i changed my code and see now on microsoft edge when i add padding the text move outside the paragraph instead of resizing the background like on firefox – Jan 05 '18 at 17:32

Use rem units without using pixels. And at the same time help me with my answer as well. – Lakindu Gunasekara Jan 05 '18 at 17:35

i did, see my edit on my 'updated code' post , and help ? what do you mean ? because i can't upvote, i have less than 15 reputations – Jan 05 '18 at 17:37

done ! thank you ! can you check my edit i see a new problem :/ but thank a lot for what you already did ! – Jan 05 '18 at 18:09

nope i fixed it thank you ! i just re-write ma code again because it was a big mess – Jan 05 '18 at 22:05

That's great! Btw for other people's reference, you can edit my answer so viewers can get a help, otherwise this question is incomplete – Lakindu Gunasekara Jan 06 '18 at 01:20

too big in height, horizontal nav bar with img with

1 Answers1