Note that there are some explanatory texts on larger screens.

plurals
  1. POcenter menu within the 960 grid
    primarykey
    data
    text
    <p>I have been working on 960 grid,(http://960.gs/) and I used an old style menu i've used in the past from a few years ago and for some reason with the 960 grid, the menu is floating left and I want it centered.</p> <pre><code> ul#menu { width:940px; height:61px; background: url(../images/menu_bg.png) no-repeat; list-style:none; padding-top:0; padding-left:0; margin: 0; } ul#menu li { float:left; } ul#menu li a { background: url(../images/menu_splice_color.png) no-repeat scroll top left; display:block; height:61px; position:relative; } ul#menu li a.shel { width:135px; } ul#menu li a.golf { width:84px; background-position:-135px 0px; } ul#menu li a.pro { width:119px; background-position:-219px 0px; } ul#menu li a.event { width:94px; background-position:-338px 0px; } ul#menu li a.member { width:148px; background-position:-432px 0px; } ul#menu li a.bistro { width:91px; background-position:-580px 0px; } ul#menu li a.contact { width:115px; background-position:-671px 0px; } ul#menu li a span { background: url(../images/menu_splice_color.png) no-repeat scroll bottom left; display:block; position:absolute; top:0; left:0px; height:100%; width:100%; z-index:100; } ul#menu li a.shel span { background-position:0px -61px; } ul#menu li a.golf span { background-position:-135px -61px; } ul#menu li a.pro span { background-position:-219px -61px; } ul#menu li a.events span { background-position:-338px -61px; } ul#menu li a.member span { background-position:-432px -61px; } ul#menu li a.bistro span { background-position:-580px -61px; } ul#menu li a.contact span { background-position:-672px -61px; } </code></pre> <p>and my generic html markup is</p> <pre><code>&lt;div class="container_16"&gt; &lt;!-- Navigation Start --&gt; &lt;div class="grid_16"&gt; &lt;ul id="menu"&gt; &lt;li&gt;&lt;a href="#" class="shel"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="golf"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="pro"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="events"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="member"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="bistro"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="contact"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And I use jquery animations to roll over the images. </p> <pre><code> $(function() { $("ul#menu span").css("opacity","0"); $("ul#menu span").hover(function () { $(this).stop().animate({ opacity: 1 }, "slow"); }, function () { $(this).stop().animate({ opacity: 0 }, "slow"); }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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