Centering text and links without ruining the template

[wpacollective]

Hi, so I’m trying to center the links bar and make the text centered to be above the logo. Also, whenever I make it float anywhere besides left its black background disappears.
The website can be seen at http://www.wpacollective.com

Here is the code I’ve tried to center it to no avail.

#suckerfishnav {
    background:#333 ;
    font-size:14px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
float:left;
    list-style:none;
    line-height:40px;
    padding:0;
    border:1px solid #aaa;
    margin:0 auto;
width: 758em;
    }

[imported_Ryan]

Hi, the reason it turns black is probably because the menu is collapsing on itself and displaying the background colour underneath. If you specify a height you should be able to avoid that problem.

You should remove the following from your source code. It is better done with an external file inside IE conditional comments. The Multi-level Navigation plugin handles all of this by itself, so that code is not necessary:
[code:3dasbcye]<script type="text/javascript"><!–//–><![CDATA[//><!–
sfHover = function() {
if (!document.getElementsByTagName) return false;
var sfEls = document.getElementById("nav").getElementsByTagName("li");

for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//–><!]]></script>[/code:3dasbcye]

The following width is extraordinarily wide! I think you meant ‘px’ not ’em’. 758em’s is typically rendered at ~7000px or so and I doubt that is what you intended ” title=”Tongue” />
[code:3dasbcye]width: 758em;[/code:3dasbcye]

Good luck with your site ” title=”Smiley” />

[Anonymous]

Dont know if this is the best idea and havnt checked it with IE but you can give it a shot. To center the links only try specifying a div for where Wordpess calls to list the pages. [code:a3lnpxd4]<ul id="suckerfishnav" class="sf-menu">
<div style="width:70%;margin:0 auto">
<?php wp_list_pages(‘title_li=’);

if (is_active_widget("sidebarssuck_widget_search")) {
sidebarssuck_widget_search();
}
?>
</div>
</ul>[/code:a3lnpxd4] Then you can mess around with the width depending on the size.

[imported_Ryan]

Hi,
Sorry for the ridiculously long wait time before I have replied.

It would be much better to use the same method, but with the menus built in CSS. That way you don’t need to hack the plugin files and add extra (unneeded) markup.

Thanks for the suggestion though ” title=”Smiley” />

[Author]

Posts