HTML - make images join

Question

I have a bunch of images that are right next to each other to form a navigation bar. There are no gaps so it looks like one image while being able to make certain areas of it clickable and others not. How do I make it so if the navigation bar is too long for the window it gets smaller instead of some of the images going on a new line?

HTML/CSS:

.navbar-button {
  margin: 0;
  padding: 0;
  display: inline block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  height: 10%;
}

<center>
  <img src="Images/NavBar1.png" alt="" class="navbar-button" />
  <a href="Home.html">
    <img src="Images/NavBar2.png" alt="" class="navbar-button" />
  </a>
  <img src="Images/NavBar3.png" alt="" class="navbar-button" />
  <a href="Information.html">
    <img src="Images/NavBar4.png" alt="" class="navbar-button" />
  </a>
  <img src="Images/NavBar5.png" alt="" class="navbar-button" />
  <img src="Images/NavBar6.png" alt="" class="navbar-button" />
  <img src="Images/NavBar7.png" alt="" class="navbar-button" />
  <a href="Schedule.html">
    <img src="Images/NavBar8.png" alt="" class="navbar-button" />
  </a>
  <img src="Images/NavBar9.png" alt="" class="navbar-button" />
  <a href="#" onClick="document.getElementById('id01').style.display='block'">
    <img src="Images/NavBar10.png" alt="" class="navbar-button" />
  </a>
  <img src="Images/NavBar11.png" alt="" class="navbar-button" />
</center>

Please add a code example. How to create a Minimal, Complete, and Verifiable example: [link](https://stackoverflow.com/help/mcve) — Aaron, May 09 '19 at 07:05
tags are obsolete in html5. use margin:0 auto to center instead — Rachel Gallen, May 09 '19 at 07:43

Matthias Seifert · Accepted Answer · 2019-05-09T07:48:18.060

1

Instead of trying to prevent the linebreak with multiple images, you may want to take a look at the possibility to define clickable areas on a single image. You can define a map with different clickable areas. Take a look at the example below, where only the area around the text is actually clickable:

<img src="https://dummyimage.com/600x400/000/fff" usemap="#map">

<map name="map">
  <area shape="rect" coords="100,150,500,250" href="#">
</map>

You can also define different shapes and sizes, for a better understanding, just take a look at the documentation

Please also note

If you define coordinates as pixels, this can lead to different clickable areas, if you resize the image. There is another question at StackOverflow, with a helpful discussion on how to create responsive image maps

edited May 09 '19 at 07:48

answered May 09 '19 at 07:42

Matthias Seifert

2,033
3
29
41

Would I need to change the coordinates if the image is scaled, or would that be scaled automatically? – liaquore May 09 '19 at 07:54
If the size of the image changes, you also need to adjust the coordinates. In the SO Thread I linked, they mention a jQuery Plugin that automatically adjusts the values, maybe this could help. – Matthias Seifert May 09 '19 at 08:16

score 1 · Answer 2 · answered May 09 '19 at 08:12

I don't know if i got what you are trying to do but check this and let me if it works for you jsfiddle link

<div class="my-navbar">
 <center>
   <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <a href="Home.html">
    <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  </a>
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <a href="Information.html">
    <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  </a>
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <a href="Schedule.html">
    <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  </a>
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <a href="#" onClick="document.getElementById('id01').style.display='block'">
    <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  </a>
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
 </center>

 </div>

.navbar-button {
  margin: 0;
  padding: 0;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  height: 10%;
  float:left;
  width:200px;
}

Amarat · Answer 3 · 2019-05-09T08:49:48.327

1

Try this

.navbar-button {
   margin: 0 10px !important;
   padding: 0;
   display: inline block;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   height: 10%;
}

edited May 09 '19 at 08:49

answered May 09 '19 at 08:44

Amarat

602
5
11

HTML - make images join

3 Answers3

Please also note