Question

Can anyone offer a solution on how to center the menu on this page: http://theelevenkeys.com/wordpress/

Thanks.

Answer 1

Try encapsulating your nav pieces in its own div; then, set that div’s positioning to absolute.

<div> <!-- this is the div just inside of #wrapper -->
<div style="position: absolute;"> <!-- You need to add this line. -->

          <div style="height: 25px; left: 645px; position: absolute; top: 21px; width: 56px; z-index: 1;" class="tinyText">
            <img title="" alt="Contact" style="border: medium none; height: 36px; left: -4px; position: absolute; top: -4px; width: 69px; z-index: 1;" src="wp-content/themes/networker-10/images/shapeimage_1.png" id="shapeimage_1" usemap="#map1"><map id="map1" name="map1"><area coords="4, 4, 60, 29" alt="Contact.html" title="Contact.html" href="../Contact.html"></map>
          </div>



 <div style="height: 25px; left: 497px; position: absolute; top: 21px; width: 37px; z-index: 1;" class="tinyText">
            <img title="" alt="Blog" style="border: medium none; height: 36px; left: -4px; position: absolute; top: -4px; width: 50px; z-index: 1;" src="wp-content/themes/networker-10/images/shapeimage_2.png" id="shapeimage_2" usemap="#map2"><map id="map2" name="map2"><area coords="4, 4, 41, 29" alt="http://theelevenkeys.com/wordpress/" title="http://theelevenkeys.com/wordpress/" href="http://theelevenkeys.com/wordpress/"></map>
          </div>



          <div style="height: 25px; left: 355px; position: absolute; top: 21px; width: 105px; z-index: 1;" class="tinyText">
            <img title="" alt="News &amp; Events" style="border: medium none; height: 36px; left: -4px; position: absolute; top: -4px; width: 118px; z-index: 1;" src="wp-content/themes/networker-10/images/shapeimage_3.png" id="shapeimage_3" usemap="#map3"><map id="map3" name="map3"><area coords="4, 4, 109, 29" alt="News_and_Events.html" title="News_and_Events.html" href="../News_and_Events.html"></map>
          </div>



          <div style="height: 25px; left: 96px; position: absolute; top: 21px; width: 69px; z-index: 1;" class="tinyText">
            <img title="" alt="The Book" style="border: medium none; height: 36px; left: -4px; position: absolute; top: -4px; width: 82px; z-index: 1;" src="wp-content/themes/networker-10/images/shapeimage_4.png" id="shapeimage_4" usemap="#map4"><map id="map4" name="map4"><area coords="4, 4, 73, 29" alt="The_Book.html" title="The_Book.html" href="../The_Book.html"></map>
          </div>



          <div style="height: 25px; left: 200px; position: absolute; top: 21px; width: 122px; z-index: 1;" class="tinyText">
            <img title="" alt="About The Author" style="border: medium none; height: 36px; left: -4px; position: absolute; top: -4px; width: 135px; z-index: 1;" src="wp-content/themes/networker-10/images/shapeimage_5.png" id="shapeimage_5" usemap="#map5"><map id="map5" name="map5"><area coords="4, 4, 126, 29" alt="About_The_Author.html" title="About_The_Author.html" href="../About_The_Author.html"></map>
          </div>



          <div style="height: 25px; left: 571px; position: absolute; top: 21px; width: 43px; z-index: 1;" class="tinyText">
            <img title="" alt="Store" style="border: medium none; height: 36px; left: -4px; position: absolute; top: -4px; width: 56px; z-index: 1;" src="wp-content/themes/networker-10/images/shapeimage_6.png" id="shapeimage_6" usemap="#map6"><map id="map6" name="map6"><area coords="4, 4, 47, 29" alt="Store.html" title="Store.html" href="../Store.html"></map>
          </div>



          <div style="height: 25px; left: 0px; position: absolute; top: 21px; width: 64px; z-index: 1;" class="tinyText">
            <img title="" alt="11 Home" style="border: medium none; height: 36px; left: -4px; position: absolute; top: -4px; width: 77px; z-index: 1;" src="wp-content/themes/networker-10/images/shapeimage_7.png" id="shapeimage_7" usemap="#map7"><map id="map7" name="map7"><area coords="4, 4, 68, 29" alt="Home.html" title="Home.html" href="../Home.html"></map>


    </div>

</div> <!-- Also need to add this line; closes the new absolute positioned div. -->

<div id="container">