PHP Build a Basic PHP Website Building a Media Library in PHP Adding Active States to the Navigation

Richard Hall
Richard Hall
9,139 Points

Getting a weird alignment glitch

In the <ul class="items"> section, if I split up the code in the following:

<ul class="items">
                    <li><a href="details.php?id=201"><img src="img/media/forest_gump.jpg" alt="Forrest Gump"><p>View Details</p></a></li><li><a href="details.php?id=204"><img src="img/media/princess_bride.jpg" alt="The Princess Bride"><p>View Details</p></a></li><li><a href="details.php?id=302"><img src="img/media/elvis_presley.jpg" alt="Elvis Forever"><p>View Details</p></a></li><li><a href="details.php?id=303"><img src="img/media/garth_brooks.jpg" alt="No Fences"><p>View Details</p></a></li>
                </ul>

and change it to:

    <ul class="items">
        <li>
          <a href="details.php?id=201">
            <img src="img/media/forest_gump.jpg" alt="Forrest Gump">
            <p>View Details</p>
          </a>
        </li>
        <li>
          <a href="details.php?id=204">
            <img src="img/media/princess_bride.jpg" alt="The Princess Bride">
            <p>View Details</p>
          </a>
        </li>
        <li>
          <a href="details.php?id=302">
            <img src="img/media/elvis_presley.jpg" alt="Elvis Forever">
            <p>View Details</p>
          </a>
        </li>
        <li>
          <a href="details.php?id=303">
            <img src="img/media/garth_brooks.jpg" alt="No Fences">
            <p>View Details</p>
          </a>
        </li>
                </ul>

The Garth Brooks album drops down from the row and creates a second row. I didn't delete anything from the code (that I could find) I simply added some spacing, and now it's getting rendered differently. This makes 0 sense to me as to why this would happen.

2 Answers

Hi Robert,

The list items have a display of inline-block in the css.

If there is any whitespace between inline elements in the html source it will produce a gap between those elements on the rendered page. By reformatting the code, you're creating whitespace between the list items. The items on the page now have a small gap between them and there isn't quite enough room for the 4th item to fit and so it drops down to the next row.

The following css tricks article illustrates the problem and shows a few different methods to fix it: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

In the case of this project, you'll be outputting that html with a php foreach loop later on. It can be output as 1 long line like you have in your first code block. And that is one way to eliminate the whitespace and fix the problem.

Richard Hall
Richard Hall
9,139 Points

Bah! Thanks Jason! For whatever reason I didn't even look in the CSS to see if there was an something causing the problem.