Clever Geek Handbook

Display logo inside with menu items in HTML and CSS

I am trying to display a logo on top of HTML and CSS.

However, the logo image is not resized to the specified width and height, and I cannot see it being overridden anywhere else.

The code looks like this:

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

#banner 
{
  overflow: hidden;
  height: 300px;
  position: relative;
  background: url(images/pic01.jpg) no-repeat center;
  background-size: cover;
}

#banner .image
{
}
#banner p{
  position: absolute; 
  top:30%;
  left: 40%;
  width: 100px;
  padding: 5px; 
  margin: 5px;
  font-family: 'Lobster', cursive;
  font-weight: bold; 
  font-size: 55px;
  color: #fff;
}

/** MENU */

#menu-wrapper
{
  background: #16a085;
  overflow:auto;
}

#menu {
  overflow: hidden;
  height: 100px;
  float:left;
}

#menu ul {
  margin: 0;
  padding: 0px 0px 0px 0px;
  list-style: none;
  line-height: normal;
  text-align: center;
}

#menu li {
  display: inline-block;
}

#menu a {
  display: block;
  letter-spacing: 1px;
  padding: 0px 40px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.80em;
  line-height: 100px;
  border: none;
  color: #FFF;
}

#menu a:hover, #menu .current_page_item a {
  text-decoration: none;
}

#menu .current_page_item a {
  background: #1abc9c;
}

#Logo{
  width:10px;
  height:30px;
  float: left;
  margin-top: 5px;
}
      

        
        
        
      

    
<div id="wrapper">
  <div id="menu-wrapper">
    <div id = "Logo" >
      <img src="images/Logo.jpg" ></img>
  </div>
  <div id="menu" class="container">

    <ul>
      <li class="current_page_item"><a href="#">Homepage</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  /*and so on */
</div>
Run code


It looks like this:

The white part in the banner is the image that occupies the width, even though it has a width attribute of up to 10 pixels.

enter image description here

+3


source to share


1 answer


In your CSS. change the style for #Logo to #Logo img {}. you have to set the width for the img tag. Not its parent container.

#Logo img{
width:100px;
height:30px;
float: left;
margin-top: 5px;
}


JS Fiddle

+1


source






More articles:


All Articles