Databases
StackOverflow2013
Postsdbo
POI am having problems with my horizontal navigation bar
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POI am having problems with my horizontal navigation bar
    text
    copied!<p>I have a header, and the body of my page. The body is 1200px width, with 3 columns. the left column is 20%, middle column is 55% and the right column is 25%. The header of the page is 100% of the page width with position:absolute and top:0px; and left 0px;</p> <p>I want the navigation bar to line up with the middle column of the body, but I am having problems with it. The left edge of the navigation bar should be directly above the left edge of the middle body column, and the same for the right edges. Either I am having problems with the math of it, or my setup is wrong.</p> <p>I hope it is clear what I want. Here is my website as it is: <a href="http://darkonyx.webatu.com/" rel="nofollow">http://darkonyx.webatu.com/</a></p> <p>Here is my html code:</p> <pre><code>&lt;div id="headerwrapper"&gt; &lt;div id="navbar"&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/roster/roster.html"&gt;Roster&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/about/about.html"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/faq/faq.html"&gt;FAQs&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/contact/contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p></p> <p>with the relevant css styling:</p> <pre><code>#headerwrapper { position:absolute; top:0px; left:0px; z-index:999; width:100%; overflow:hidden; height:120px; background:url(img/headerBG.jpg); -moz-box-shadow: 0px 6px 20px #000; -webkit-box-shadow: 0px 6px 20px #000; box-shadow: 0px 6px 20px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000'); #navbar{ position:absolute; top:85px; left:50%; width:1200; margin-left:-600;} #nav { width: 100%; float: left; padding: 0; list-style: none; background-color: #222;} #nav li { width:20%; float: left;} #nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #666; border-right: 1px solid #777; border-top: 1px solid #777; border-left: 1px solid #777; } #nav li a:hover { color: #000; background-color: #555;} </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload