CODEWITHSUNDEEP
htmlcss
bitdiego
bitdiego

Reputation: 111

Navigation menu with images and text

I am trying to build a navigation menu that must have images and text inside. The final result must match the one in attached picture enter image description here

That is, the items must have equal space, with no margin for the leftmost and righmost items. Images must have same distance from the top the html part I wrote:- 

#container {
  height: 200px;
  text-align: justify;
  border: 1px solid black;
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
  min-width: 960px;
}
#container div {
  width: 220px;
  height: 200px;
  display: inline-block;
 
  text-align:center;
}
#container div img {
	background-color:#969;
	width: 100px;
	height: 100px;
	position:relative;
	top:50px;
	
}
#container:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}
<div id="container">

	<a href=""><div><img src='//placehold.it/100' /><br /><div class='txt'>Home</div></div></a>
  <a href=""><div><img src='//placehold.it/100' /><br /><div class='txt'>Sezione Amministrazione di Condominio</div></div></a>
  <a href=""><div><img src='//placehold.it/100' /><br /><div class='txt'>Log Out</div></div></a>
  <a href=""><div><img src='//placehold.it/100' /><br /><div class='txt'>Chi siamo</div></div></a>
  
</div>​

It does not work:- when inner text is wrapped, the images have no longer the same margin distance from top. I also tried using ul and li tags but the result was even worse... Where is the error? Thanks in advance. diego

Upvotes: 0

Views: 117

Answers (1)

caramba
caramba

Reputation: 22480

Try to move on from here, I hope this will help you

* {
  box-sizing: border-box;
}

#container {
  height: 200px;
  width: 960px;
  margin: 0 auto;
}

#container > a {
  width: calc(260px - 10px);
  height: 200px;
  margin-right: 10px;
  text-align:center;
  border: solid 1px green;
  float: left;
}

#container > a:last-child {
  width: 180px;
  margin-right: 0;
}

#container > a > img {
	background-color:#969;
	width: 100px;
	height: 100px;
    border: solid 1px red;
    margin-top: 10px;
}

#container div.txt {
  border: solid 1px orange;
  padding: 0 20px;
}

#container:after {
  content: '';
  display: block;
  clear: both;
}
<div id="container">
  <a href="">
    <img src='img/gestione-amministratori-condominio.png' />
    <div class='txt'>Home</div>
  </a>
  <a href="">
    <img src='img/gestione-amministratori-condominio.png' />
    <div class='txt'>Sezione Amministrazione di Condominio</div>
  </a>
  <a href="">
    <img src='img/gestione-amministratori-condominio.png' />
    <div class='txt'>Log Out</div>
  </a>
  <a href="">
    <img src='img/gestione-amministratori-condominio.png' />
    <div class='txt'>Chi siamo</div>
  </a>
</div>

Upvotes: 1

Related Questions