How do I make these image buttons display right?

HTML & CSS
1

I am trying to make a navbar that uses images as the links, with one larger image in the center. my problem it that i want the buttons to be a dynamic distance from each other, from the center. they are displaying a certain distance from each other across the whole width of the bar. I would also like the center image to display as taller than the buttons.

Heres a visual representation of what i want:

1366×250 10.1 KB

here’s the code i have:

   <div id="navbar">
		<ul id="nav">
			<li><a href="#welcome"><img alt="Food" src="http://via.placeholder.com/1000x500"></a></li>
			<li><a href="#food"><img alt="Hours" src="http://via.placeholder.com/1000x500"></a></li>
			<a href="#"><img src="http://via.placeholder.com/502x532" width="100px" alt="Sol Logo"></a>
			<li><a href="#hours"><img alt="Location" src="http://via.placeholder.com/1000x500"></a></li>
			<li><a href="#location"><img alt="About" src="http://via.placeholder.com/1000x500"></a></li>
		</ul>
	</div>

#navbar {
	z-index: 1;
	position: fixed;
	top: 0;
	text-align: center;
	width: 100%;
}

#nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#nav li {
	display: inline;
}

#nav img {
	width: 25%
}
2

There are many different ways to do this.

Here’s one solution:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!--
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
-->
<title>Accordion with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!--
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/CSS3Accordion/css/style.css" />
-->
<style>
#navbar {
  text-align:center;  
  vertical-align:middle;

  /* DEBUG ONLY */
  width: 88%; margin: 0 auto;
  border:dotted 1px red;
  background-color:#ddd;
}

#navbar li {
  vertical-align:middle;
  display:inline-block; 
  margin: 0 1em; 

  /* DEBUG ONLY */
  padding: 1em; 
  background-color:#cfc;
}
#navbar li:hover {
  background-color:#fcf;
}

</style>
</head>
<body>
    <h4> NavBar </h4>

    <ul id="navbar">
      <li>
        <a href="#welcome">
          <img 
            alt="Food" 
            src="http://via.placeholder.com/100x50"
            width="100" height="50" 
          >
        </a>
      </li>
      <li>
        <a href="#food">
          <img 
            alt="Hours" 
            src="http://via.placeholder.com/100x50"
            width="100" height="50" 
          />
        </a>
      </li>
      <li>    
        <a href="#temp">
          <img
            alt="Sol_Logo_1"
            src="http://via.placeholder.com/100x50" 
            width="50" height="100" 
          >
        </a>
      </li>
      <li>
        <a href="#hours">
          <img
            alt="Location" 
            src="http://via.placeholder.com/100x50"
            width="100" height="50" 
          />
        </a>
      </li>
      <li>
        <a href="#location">
          <img 
            alt="About" 
            src="http://via.placeholder.com/100x50"
            width="100" height="50" 
          />
        </a>
      </li>
    </ul>

</body>
</html>

ScreenShot

840×169 5.33 KB

Edit:
I forgot to mention that your script has errors. please validate:

1 Like
3

Yes as John said you are not allowed to put the logo outside of the list tags.

This is invalid:

<li><a href="#food"><img alt="Hours" src="http://via.placeholder.com/1000x500"></a></li>
	<a href="#"><img src="http://via.placeholder.com/502x532" width="100px" alt="Sol Logo"></a>
<li><a href="#hours"><img alt="Location" src="http://via.placeholder.com/1000x500"></a></li>

All content in a ul (or ol) must be inside the li tags. Nothing can exist outside those tags apart from comments

2 Likes
4

off-topic
I was surprised to see that <dl><div></div><dt> is now valid. *Note: dl, not ul or ol.

Under “matching reality better” :rolleyes:
https://www.w3.org/TR/html5/changes.html#changes

<div> as a child of a <dl> element.

5 Likes
5

I didn’t know about that until now. I think it’s actually useful, as there was no way of “grouping” <dd>s with associated <dt> which made custom styling of <dl>s difficult.
Presumably the intent is for the <div> to contain <dt>s and <dd>s, otherwise it is stupid and open to abuse.

5 Likes
6

Yes that’s interesting and allows for proper grouping of dt and dd elements when you have multiple sets in the dl list. Previously it was awkward (if not impossible) to achieve certain layouts without starting a new dl for each pair of dt and dd.

5 Likes
7
@Mittineague

I noticed the following:

The following constructions are now valid HTML:
style within the body.

8

I saw that one. Don’t think I approve. It seems sloppy/hacky to me, like disjointed bits of code thrown in as an after thought, scattered about the page.
Plenty have been doing it for a while regardless, but I don’t see the need or benefit.

4 Likes
9

this worked out perfectly, thank you. Thanks as well for correcting my mistake with the image being outside of the list tags. One more thing to know to avoid in the future!

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.