Question

I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!

Website is http://www.pearsonfoods.com.au

<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>

<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>

<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>

<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>

<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>

</div>

Answer 1

Your markup is not well-formed. <a> is an “inline element” and <div> is a “block element”. Block elements cannot exist within inline elements.

Your navigation list is better structured as a simple unordered list:

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About us</a></li>
    <li><a href="index.html">Where we sell</a></li>
</ul>

See? So much cleaner 🙂

Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it’s strictly a visual thing) and apply float: left; to the <li> elements.