How to put an image in a menu like another link of this menu

Hello,
I need your help,
I create a website with html and CSS and I’ve a photo (my website’s logo) that I will put I my menu like a link of the menu. But I try to move the photo and I can’t do it.
Here my HTML and CSS code of this menu :


<ul id="menu">
  <li>
    <a href="home.html"><img src="logo.png" class="button" alt="Logo" title="Go home" width="30px" height="50px" /></a>
  </li>
  <li> <a href="visit.html" class="bouton" title="Visit">Visit</a> </li>
  <li> <a href="contact.html" class="bouton" title="Contact">Contact</a> </li>
  <li> <a href="tourism.html" class="bouton">How make here ?</a> </li>
  <li> <a href="reservation.html" class="bouton">Reservations</a> </li>
</ul>


header {
  background-color: dark;
  border-radius: 10px;
}

#menu li {
  display: inline-block;
}

#menu .bouton {
  display: block;
  width: 8em;
  padding: 5px 0;
  text-align: center;
  border: 1px solid black;
  background-color: white;
  color: black;
  text-decoration: none;
  margin: 50px;
  border-radius: 5px;
}

#menu .bouton:hover {
  background-color: black;
  color: white;
  border-color: white;
}

#menu {
  text-align: center;
}

li {
  font-family: Impact, sans-serif;
  font-size: 1.25em;
}

Can you help me ?
Thank you very much

Hello @Cod313,

Could you please provide the following information?

  • If possible: a link to the website where the issue occurs.
  • The code in question you’re having trouble with. (if it’s in a repository, please link it here)
  • Where specifically in this menu do you want the “photo” moved to?

It’s imperative that you provide us with as much information as possible so that we may assist you.

Thank you, I’ve added my code

1 Like

Thank you for providing some additional information. If I may ask, what issue is occurring with the image? Looking at the markup it appears to be fine, so I’m assuming the issue is with the display – the CSS?

Perhaps this will work?

<ul id="menu">
  <li>
    <a href="home.html" class="bouton"><img src="logo.png" class="logo-bouton" alt="Logo" title="Go home" /></a>
  </li>
  <li> <a href="visit.html" class="bouton" title="Visit">Visit</a> </li>
  <li> <a href="contact.html" class="bouton" title="Contact">Contact</a> </li>
  <li> <a href="tourism.html" class="bouton">How make here ?</a> </li>
  <li> <a href="reservation.html" class="bouton">Reservations</a> </li>
</ul>
header {
  background-color: dark;
  border-radius: 10px;
}

#menu li {
  display: inline-block;
}

#menu .bouton {
  display: block;
  width: 8em;
  padding: 5px 0;
  text-align: center;
  border: 1px solid black;
  background-color: white;
  color: black;
  text-decoration: none;
  margin: 50px;
  border-radius: 5px;
  box-sizing:border-box;
  height:36px;
  white-space:nowrap;
  overflow:hidden;
}

#menu .logo-bouton {
  height:100%;
}

#menu .bouton:hover {
  background-color: black;
  color: white;
  border-color: white;
}

#menu {
  text-align: center;
}

li {
  font-family: Impact, sans-serif;
  font-size: 1.25em;
}
2 Likes

Thank you very much @sethclydesdale
I’m very grateful to your help :blush:
I’ve tried it an it’s occur that I have a button like the others but my photo (who’s in the same folder) doesn’t appear.
I’m looking to find a response to this problem.

Hmm… that may prove to be a bit difficult to solve without having the live page to debug. Only suggestion I can offer is to check your developer console:

  1. Open the devtools (F12; CTRL+SHIFT+I; Right click > inspect)
  2. Move to the elements tab.
  3. Click the button with the cursor and a box OR click the page and press CTRL+SHIFT+C.
  4. Select the image.

If done correctly, you can hover over the src attribute to see where the resource is coming from.

If it’s pulling the resource from the wrong destination, you’ll need to edit the src attribute so it’s referencing the correct location. Most commonly, you’ll need to:

  • reference the sub-directory src="images/logo.png"
  • a parent directory src="../logo.png"
  • or both src="../images/logo.png"

It depends on what directory the image and page are located in.

Lastly, if the above doesn’t work, check your console for any errors as it’ll let you know the status of any files which aren’t working properly, and may offer some hints on how to solve the issue.

1 Like

Thanks @sethclydesdale for your help.
I’ve made a break sometimes and today I read your post that resolved my problem.
Thanks you very much for all

1 Like