How to equally space images in a navbar?

Question

In one horizontal navbar i have small images that are spaced out with different spaces. Between one image and another there is a different empty space.

I would like to get the same empty space between each image in this horizontal navbar, instead the problem is that now the images are positioned with different spaces from each other. The result I would like to get is this screenshot. Thank you.

I tried with various justify-content, but got nothing.

You can also take a look at Codepen.

.my-container {
  display: flex;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.my-flex {
  display: flex;
  flex-wrap: nowrap;
}

.disable {
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-indent: 110%;
}

li {
  list-style-type: none;
}

.atalanta {
  background: url('https://i.ibb.co/MfVyXRY/atalanta.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.bologna {
  background: url('https://i.ibb.co/sttS1T9/bologna.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.cremonese {
  background: url('https://i.ibb.co/W6N0Jwg/cremonese.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.empoli {
  background: url('https://i.ibb.co/Yyjycb5/empoli.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.fiorentina {
  background: url('https://i.ibb.co/dmMF3Hw/fiorentina.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.verona {
  background: url('https://i.ibb.co/cbRzLK3/hellas.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.inter {
  background: url('https://i.ibb.co/4wbLqYd/inter.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.juventus {
  background: url('https://i.ibb.co/42ChC8w/juve.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.lazio {
  background: url('https://i.ibb.co/CPPntPm/lazio.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.lecce {
  background: url('https://i.ibb.co/2KLGvzK/lecce.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.milan {
  background: url('https://i.ibb.co/gWXyj17/milan.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.monza {
  background: url('https://i.ibb.co/WxFDdJk/monza.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.napoli {
  background: url('https://i.ibb.co/LYVKhx0/napoli.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.roma {
  background: url('https://i.ibb.co/gj9Nj4x/roma.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.salernitana {
  background: url('https://i.ibb.co/RYMzs5L/salernitana.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.sampdoria {
  background: url('https://i.ibb.co/vwGYGc9/sampdoria.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.sassuolo {
  background: url('https://i.ibb.co/CHXBS7X/sassuolo.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.spezia {
  background: url('https://i.ibb.co/QJ8S2KY/spezia.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.torino {
  background: url('https://i.ibb.co/wYKTSGW/torino.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.udinese {
  background: url('https://i.ibb.co/bWFBx1V/udinese.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

<head>
  <!-- Boostrap Files -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <!-- My Css -->
</head>

<body>
  <div class="my-container">
    <nav class="navbar bg-body-tertiary my-flex">
      <div class="container-fluid">



        <li>
          <a class="atalanta disable" href="roma.html" title="Atalanta" width="35" height="35">
            <font style="vertical-align: inherit;">atalanta</font>
          </a>
        </li>

        <li>
          <a class="bologna disable" href="roma.html" title="Bologna" width="35" height="35">
            <font style="vertical-align: inherit;">bologna</font>
          </a>
        </li>

        <li>
          <a class="cremonese disable" href="roma.html" title="Cremonese" width="35" height="35">
            <font style="vertical-align: inherit;">cremonese</font>
          </a>
        </li>


        <li>
          <a class="empoli disable" href="roma.html" title="Empoli" width="35" height="35">
            <font style="vertical-align: inherit;">empoli</font>
          </a>
        </li>



        <li>
          <a class="fiorentina disable" href="roma.html" title="Fiorentina" width="35" height="35">
            <font style="vertical-align: inherit;">fiorentina</font>
          </a>
        </li>


        <li>
          <a class="verona disable" href="roma.html" title="Verona" width="35" height="35">
            <font style="vertical-align: inherit;">verona</font>
          </a>
        </li>


        <li>
          <a class="inter disable" href="roma.html" title="Inter" width="35" height="35">
            <font style="vertical-align: inherit;">inter</font>
          </a>
        </li>

        <li>
          <a class="juventus disable" href="roma.html" title="Juventus" width="35" height="35">
            <font style="vertical-align: inherit;">juventus</font>
          </a>
        </li>


        <li>
          <a class="lazio disable" href="roma.html" title="Lazio" width="35" height="35">
            <font style="vertical-align: inherit;">lazio</font>
          </a>
        </li>

        <li>
          <a class="lecce disable" href="roma.html" title="Lecce" width="35" height="35">
            <font style="vertical-align: inherit;">lecce</font>
          </a>
        </li>

        <li>
          <a class="milan disable" href="roma.html" title="Milan" width="35" height="35">
            <font style="vertical-align: inherit;">milan</font>
          </a>
        </li>

        <li>
          <a class="monza disable" href="roma.html" title="Monza" width="35" height="35">
            <font style="vertical-align: inherit;">monza</font>
          </a>
        </li>

        <li>
          <a class="napoli disable" title="Napoli" width="35" height="35">
            <font style="vertical-align: inherit;">napoli</font>
          </a>
        </li>


        <li>
          <a class="roma disable" href="roma.html" title="Roma" width="35" height="35">
            <font style="vertical-align: inherit;">roma</font>
          </a>
        </li>

        <li>
          <a class="salernitana disable" href="roma.html" title="Salernitana" width="35" height="35">
            <font style="vertical-align: inherit;">salernitana</font>
          </a>
        </li>

        <li>
          <a class="sampdoria disable" href="roma.html" title="Sampdoria" width="35" height="35">
            <font style="vertical-align: inherit;">sampdoria</font>
          </a>
        </li>


        <li>
          <a class="sassuolo disable" href="roma.html" title="Sassuolo" width="35" height="35">
            <font style="vertical-align: inherit;">sassuolo</font>
          </a>
        </li>

        <li>
          <a class="spezia disable" href="roma.html" title="Spezia" width="35" height="35">
            <font style="vertical-align: inherit;">spezia</font>
          </a>
        </li>


        <li>
          <a class="torino disable" href="roma.html" title="Torino" width="35" height="35">
            <font style="vertical-align: inherit;">torino</font>
          </a>
        </li>

        <li>
          <a class="udinese disable" href="roma.html" title="Udinese" width="35" height="35">
            <font style="vertical-align: inherit;">udinese</font>
          </a>
        </li>
      </div>
    </nav>
  </div>
</body>

It's not that the images are not spaced evenly. It's that the flex items are of various widths - each has the width of the `font` element. Why not make the images `img` elements with `alt` attributes, instead of a background, and skip the text labels? The `font` element is deprecated: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font and the `li` elements should be children of a list: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li — drak, Jun 06 '23 at 03:18
@drak Could you show me an answer of how the navbar would look with your reasoning? Thank you — Horiatiki, Jun 06 '23 at 03:21
[There you go.](https://codepen.io/radiodrac/pen/abQoxEw) I left the `` backgrounds as they were but you can see how your `.my-flex` container is now an `
` element and your `` are ``. For the alignment, it was actually enough to delete the `display: flex` from `.my-container` and add a fixed width to the `li` selector. — drak, Jun 06 '23 at 03:44
@drak I'm confused. In the first comment you said that it's better to make the images img elements with alt attributes, instead of a background. In the second comment you said you left the background. Why did you change your mind? Wasn't the solution from your first comment better? — Horiatiki, Jun 06 '23 at 05:05
I didn't say it was better. That was simply one way to do it and I asked why you did it the way you did. Here's some discussion on when which approach is better: https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image — drak, Jun 06 '23 at 06:36
Honestly, I'm no expert in this matter. I already provided you a link where community consensus seems to be that if an image is a content (conveys information), it should be an , not a background. Another comment agreeing with this: https://stackoverflow.com/questions/5688655/how-to-make-navigation-with-images-that-is-clickable/5688663#5688663 — drak, Jun 06 '23 at 16:41

score 0 · Answer 1 · answered Jun 06 '23 at 02:43

0

Use these properties in the navbar class you want:

display: flex;
flex-direction: column;
justify-content: space-evenly;

answered Jun 06 '23 at 02:43

Bernardo47

23
3

No, it does not work – Horiatiki Jun 06 '23 at 02:48

score 0 · Answer 2 · answered Jun 06 '23 at 03:40

0

The problem is that there isn't a valid defined width, only your invalid attempt of <a ... width="35" height="35">

You should declare the width of the block-level lis. Here's a starting point:

li {
    list-style-type: none;
    width: 35px;
}

(This time, I'm spending time only on answering your main question and not correcting your markup.)

answered Jun 06 '23 at 03:40

Tim R

2,622
1
3
19

Can I delete width="35" height="35"> – Horiatiki Jun 06 '23 at 04:23
@Folidex23 Yes. 'width' & 'height' are not recognized HTML attributes of the `a` element. Your implementation of `vertical-align` has no effect. `font` was deprecated many years ago and should not be used. As already stated, you are improperly using `li` without `ul`. Since you're using Bootstrap, use the appropriate classes for the style you want instead of writing your own declarations. There's no need to link to the unused "docs" stylesheet and JS file. – Tim R Jun 06 '23 at 04:41
I know you don't need the "docs" style sheet and the Js file. I didn't realize that "ul" was missing. I had done a quick copy and paste, without too much attention. I didn't understand this sentence "Since you're using Bootstrap, use the appropriate classes for the style you want instead of writing your own declarations". You mean is there another more proper way with Bootstrap to do what I'm doing? Can you explain better? Thank you :) – Horiatiki Jun 06 '23 at 04:59
I was just just trying to understand what specifically were you referring to in Bootstrap. I'm not refusing to commit. I have read the Bootstrap documentation many times. I know it quite well. If you don't want to waste time ok, thanks anyway. Bye – Horiatiki Jun 06 '23 at 05:28

Oskar Gruszewski · Answer 3 · 2023-06-06T09:18:07.233

0

This is actually quite simple.

replace your .my-flex with the code i put below then add .navbar css and li a css and that will do the job you want it to do

.my-flex {
    display: flex;
    justify-content: space-between;
}
.navbar{
  width:1080px;
}
li a{
  width: 35px;
  height:35px;
  display: inline-block;
}

edited Jun 06 '23 at 09:18

answered Jun 06 '23 at 09:09

Oskar Gruszewski

21
3

Bootstrap offers classes for flex behavior. You shouldn't be writing your own CSS to do what a library gives you. That's redundant and less maintainable. – isherwood Jun 06 '23 at 20:52

score 0 · Answer 4 · answered Jun 06 '23 at 11:54

The variable width of the background images is caused by the text content within the font element. To address this issue and achieve equally spaced images, you can apply the following CSS on the font element:

font {
    display: block;
    width: 35px; /* Replace with the desired width */
    height: 35px; /* Replace with the desired height */
}

By setting the display property to block and specifying the desired width and height, you can ensure consistent dimensions for the font element, which will, in turn, impact the sizing of the background images. Adjust the values of width and height according to your specific requirements.

@DavidW Hey this is not the ChatGPT, this is the root cause fix of the issue, have you verified the solution given by me before commenting like it's a ChatGPT. What's wrong with you? It seems like you are too much frustrated. Don't comment like this without verifying the answers. I am noticing you are following my answers and already commented the same on my many posts. — Prem Chaudhary, Jun 09 '23 at 17:27

isherwood · Accepted Answer · 2023-06-07T02:12:45.737

As has been said, wrap your list items in a list and don't use the font element, which is deprecated. And anchors don't have width or height attributes.

Then, use the tools that your layout library offers. You've written a bunch of custom CSS which does things Bootstrap already gives you, such as display variations and flexbox.

How you space the anchors is up to you, but a little horizontal margin seems to work.

Then, if you find yourself repeating code more than once you're doing it wrong. You can easily apply sizing to all anchors in the list with one rule using a descendant selector or a common class.

Finally, don't load the Bootstrap docs CSS into your website. It's not a CDN, and you probably don't need it anyway.

.my-container {
  max-width: 1080px;
}

.disable {
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-indent: 110%;
}

li {
  list-style-type: none;
}

li a {
  width: 35px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 18px;
  margin: 0 .25rem;
}

.atalanta {
  background-image: url('https://i.ibb.co/MfVyXRY/atalanta.png');
}

.bologna {
  background-image: url('https://i.ibb.co/sttS1T9/bologna.png');
}

.cremonese {
  background-image: url('https://i.ibb.co/W6N0Jwg/cremonese.png');
}

.empoli {
  background-image: url('https://i.ibb.co/Yyjycb5/empoli.png');
}

.fiorentina {
  background-image: url('https://i.ibb.co/dmMF3Hw/fiorentina.png');
}

.verona {
  background-image: url('https://i.ibb.co/cbRzLK3/hellas.png');
}

.inter {
  background-image: url('https://i.ibb.co/4wbLqYd/inter.png');
}

.juventus {
  background-image: url('https://i.ibb.co/42ChC8w/juve.png');
}

.lazio {
  background-image: url('https://i.ibb.co/CPPntPm/lazio.png');
}

.lecce {
  background-image: url('https://i.ibb.co/2KLGvzK/lecce.png');
}

.milan {
  background-image: url('https://i.ibb.co/gWXyj17/milan.png');
}

.monza {
  background-image: url('https://i.ibb.co/WxFDdJk/monza.png');
}

.napoli {
  background-image: url('https://i.ibb.co/LYVKhx0/napoli.png');
}

.roma {
  background-image: url('https://i.ibb.co/gj9Nj4x/roma.png');
}

.salernitana {
  background-image: url('https://i.ibb.co/RYMzs5L/salernitana.png');
}

.sampdoria {
  background-image: url('https://i.ibb.co/vwGYGc9/sampdoria.png');
}

.sassuolo {
  background-image: url('https://i.ibb.co/CHXBS7X/sassuolo.png');
}

.spezia {
  background-image: url('https://i.ibb.co/QJ8S2KY/spezia.png');
}

.torino {
  background-image: url('https://i.ibb.co/wYKTSGW/torino.png');
}

.udinese {
  background-image: url('https://i.ibb.co/bWFBx1V/udinese.png');
}

<head>
  <!-- Boostrap Files -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- My Css -->
</head>

<body>
  <div class="my-container d-flex justify-content-center mx-auto">
    <nav class="navbar bg-body-tertiary">
      <div class="container-fluid">
        <ul class="d-flex p-0 m-0">
          <li>
            <a class="atalanta disable" href="roma.html" title="Atalanta">atalanta</a>
          </li>

          <li>
            <a class="bologna disable" href="roma.html" title="Bologna">bologna</a>
          </li>

          <li>
            <a class="cremonese disable" href="roma.html" title="Cremonese">cremonese</a>
          </li>

          <li>
            <a class="empoli disable" href="roma.html" title="Empoli">empoli</a>
          </li>

          <li>
            <a class="fiorentina disable" href="roma.html" title="Fiorentina">fiorentina</a>
          </li>

          <li>
            <a class="verona disable" href="roma.html" title="Verona">verona</a>
          </li>

          <li>
            <a class="inter disable" href="roma.html" title="Inter">inter</a>
          </li>

          <li>
            <a class="juventus disable" href="roma.html" title="Juventus">juventus</a>
          </li>

          <li>
            <a class="lazio disable" href="roma.html" title="Lazio">lazio</a>
          </li>

          <li>
            <a class="lecce disable" href="roma.html" title="Lecce">lecce</a>
          </li>

          <li>
            <a class="milan disable" href="roma.html" title="Milan">milan</a>
          </li>

          <li>
            <a class="monza disable" href="roma.html" title="Monza">monza</a>
          </li>

          <li>
            <a class="napoli disable" title="Napoli">napoli</a>
          </li>

          <li>
            <a class="roma disable" href="roma.html" title="Roma">roma</a>
          </li>

          <li>
            <a class="salernitana disable" href="roma.html" title="Salernitana">salernitana</a>
          </li>

          <li>
            <a class="sampdoria disable" href="roma.html" title="Sampdoria">sampdoria</a>
          </li>

          <li>
            <a class="sassuolo disable" href="roma.html" title="Sassuolo">sassuolo</a>
          </li>

          <li>
            <a class="spezia disable" href="roma.html" title="Spezia">spezia</a>
          </li>

          <li>
            <a class="torino disable" href="roma.html" title="Torino">torino</a>
          </li>

          <li>
            <a class="udinese disable" href="roma.html" title="Udinese">udinese</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</body>

Small problem. I see you used background-size: 35px 35px and padding-top: 18px which are the measurements I had written in my code. Well, right! However, i don't know why, in your code the images are too big and don't resize. I've tried scaling the background-size, but nothing happens. In your code, how can one make the images smaller like in my code or like the screenshot in the question? Thank you. I appreciated your answer. I will be happy to accept it — Horiatiki, Jun 07 '23 at 00:56
Updated. You see the problem with "like the image". It's not very specific. — isherwood, Jun 07 '23 at 02:13
Excuse me,I'm translating with Google translator and many things don't translate well.Yes,now it's finally perfect.On each image there is also a link to open a page for each image,right?A little curiosity:with this method we take the images from the CSS with background-image:url.I was thinking that it could also be done by inserting the img directly into the HTML.So the curiosity is:the loading of the page where there is the image navbar and also the loading of the images will it be more performance and faster with the background-image method from CSS or with img from HTML?Thank you — Horiatiki, Jun 07 '23 at 02:34
I don't believe that there will be a noticeable difference between the two techniques, as the images need to load regardless, but that's a different question and shouldn't be presented here in a comment. — isherwood, Jun 07 '23 at 12:47

How to equally space images in a navbar?

5 Answers5