Databases
StackOverflow2013
Postsdbo
PONavigation bar glitches
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONavigation bar glitches
    text
    copied!<p>When I change the resolution of my navigation bar it glitches. Here is my HTML;</p> <pre><code>&lt;!--Start header--&gt; &lt;div id="header"&gt; &lt;div id="nav_header"&gt; &lt;ul id="list-nav"&gt; &lt;a href="index.htm" id="home"&gt;Troll Happy&lt;/a&gt; &lt;li&gt;&lt;a href="iphone.htm" id="fail"&gt;iPhone Fail&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="forever.htm" id="alone"&gt;Forever Alone&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="rage.htm" id="rage"&gt;Rage Comics&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="derphina.htm" id="Derp"&gt;Derpina&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="okay.htm" id="okay"&gt;Okay face&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://forums.trollhappy.co.uk/xenforo/forum/index.php" id="forums"&gt;Forums&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--End header--&gt; </code></pre> <p>And my CSS;</p> <pre><code> #header { height:66px; background-color:#000; position: absolute; width: 100%; left:0; } #nav_header { height:50px; margin-left:100px; } ul#list-nav { list-style:none; margin:20px; padding:0; } ul#list-nav li { display:inline; font-family: Century Gothic, sans-serif; font-size:13px; font-weight:bold; } ul#list-nav li a { text-decoration:none; padding:15px 0; width:110px; color:#eee; float:left; text-align:center; border-right:1px solid #353535; } </code></pre> <p>You can see what is happening here;</p> <p>trollhappy.co.uk</p> <p>As you can see, if you change the resolution the navigation bar goes very glitchy!</p> <p>Thanks again guys and girls</p>
 

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