Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Best way to do it is this:</p> <p>Wrap the ul in a new div id="topmenu" or something like that, then give this the following styles</p> <pre><code>bottom:0; position:absolute; width:780px; </code></pre> <p>and give the ul.menu this</p> <pre><code>margin:0 auto; width:535px; </code></pre> <p>The only gotcha here is that you're setting the width of the menu list, so if the width of the menu items change it will need to be changed in the CSS file too (ie if a new menu item is added.</p> <p><strong>UPDATE:</strong> Just noticed your comment above about not setting the width manually. If you're willing to use a wee bit of javascript, you could stick this inside the document ready block and remove the <code>width: 535px;</code> </p> <pre><code>var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30); </code></pre> <p>This will set the css width property to the actual rendered width once the page loads, so the layout will work.</p> <p>Complete HTML below:</p> <pre><code>&lt;div id="header"&gt; &lt;h1 class="blog-title"&gt;&lt;a href="http://www.hootingyard.org/" accesskey="1"&gt;Hooting Yard&lt;/a&gt;&lt;/h1&gt; &lt;p class="description"&gt;A Website by Frank Key&lt;/p&gt; &lt;div id="topmenu"&gt; &lt;ul class="menu"&gt; &lt;li class="current_page_item"&gt;&lt;a href="http://www.hootingyard.org/" title="Prose, etc"&gt;Prose, etc&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-533"&gt;&lt;a href="http://www.hootingyard.org/archivepage" title="Archives"&gt;Archives&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-534"&gt;&lt;a href="http://www.hootingyard.org/books" title="Books"&gt;Books&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-551"&gt;&lt;a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key"&gt;Regarding Mr Key&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-1186"&gt;&lt;a href="http://www.hootingyard.org/subscriptions" title="Subscriptions"&gt;Subscriptions&lt;/a&gt;&lt;/li&gt; &lt;li class="admintab"&gt;&lt;a href="http://www.hootingyard.org/wp-login.php?action=register"&gt;Register&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </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