Placement

**Tye** · 01-29-2009, 03:53 AM

Hey! I'm working on my new site HERE, and well anyway the navigation bar is kinda jammed together.

Here is a screenshot of it: Jammed Navigation Bar

I want to spread the two forms out, and move the "go" button a little to the right of the forms, Nile and I have both tried...and no luck. Anyone else think they can help?

Below is the code for the header.php which contains the drop down bar.

HEADER -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<script language="javascript" src="wp-content/themes/decoder.0.9.1/decoder/java/chainedmenu.js">

/***********************************************
* Chained Select Menu- By Xin Yang (http://www.yxscripts.com/) & Dynamic Drive (http://dynamicdrive.com)
* Script featured on/available at http://www.dynamicdrive.com/
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for legal use!
***********************************************/

</script>
<script language="javascript" src="wp-content/themes/decoder.0.9.1/decoder/java/config.js"></script>

<title>
		<?php if ( is_home() ) { ?><?php bloginfo('description'); ?> &raquo; <? bloginfo('name'); ?><?php } ?>
		<?php if ( is_search() ) { ?><?php echo $s; ?> &raquo; <? bloginfo('name'); ?><?php } ?>
		<?php if ( is_single() ) { ?><?php wp_title(''); ?> &raquo; <? bloginfo('name'); ?><?php } ?>
		<?php if ( is_page() ) { ?><?php wp_title(''); ?> &raquo; <? bloginfo('name'); ?><?php } ?>
		<?php if ( is_category() ) { ?>Archive <?php single_cat_title(); ?> &raquo; <? bloginfo('name'); ?><?php } ?>
		<?php if ( is_month() ) { ?>Archive <?php the_time('F'); ?> &raquo; <? bloginfo('name'); ?><?php } ?>
		<?php if ( is_tag() ) { ?><?php single_tag_title();?> &raquo; <? bloginfo('name'); ?><?php } ?>
		<?php if ( is_404() ) { ?>Sorry, not found! &raquo; <? bloginfo('name'); ?><?php } ?>
</title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/lib/superfish.css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/js/supersubs.js"></script>

<script type="text/javascript"> 
 
    $(document).ready(function(){ 
        $("ul.sf-menu").supersubs({ 
            minWidth:    12,   // minimum width of sub-menus in em units 
            maxWidth:    27,   // maximum width of sub-menus in em units 
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over 
                               // due to slight rounding differences and font-family 
        }).superfish();
    });
 
</script>

<?php if (is_singular()) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>

</head>

<body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'savestate')">

<div id="page">

<div id="header">

	<div id="blog-logo" class="clearfix">
	</div>

	<ul id="menu" class="sf-menu clearfix">
		<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
                <li><a href= "http://narutounloaded.com/forum">Forum</a></li>
                <li><a href= "http://narutounloaded.com/?page_id=654">Download Content</a></li>
                <li><a href= "http://www.narutounloaded.com/?page_id=638">Legal Disclaimer</a>
                <li><a href= "http://narutounloaded.com/?page_id=79">Contact Us</a></li>
		
	</ul>

	
	<div id="rss">
		<a href="<?php bloginfo('rss2_url'); ?>">Subscribe to RSS Feed</a>
	</div>

</div><!-- end header -->

<div id="navbar">
<form name="listmenu0">
<td><select name="firstlevel" style="width:180px;"></select></td>
<td><select name="secondlevel" style="width:200px;"></select></td>
<input type="button" value="Go" onClick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel)">
<input type="button" value="Reset" onClick="resetListGroup('chainedmenu')">
</form>
</div>

<div id="bannerad">
<script type="text/javascript"><!--
google_ad_client = "pub-3289959596797445";
/* 468x60 Banner - Under Vid, created 1/15/09 */
google_ad_slot = "7772175816";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

**Medyman** · 01-29-2009, 11:57 PM

Nile wasn't able to figure this out? I'm surprised.

It's simple really, if you want the "Go" more to the right, just add margins around it. Add the following in your CSS:

Code:

input[type='button'] {
  margin-left:10px;
}

Note: This will add a 10px margin to the right and left of all <input type='button'> elements. If you only want to apply it to the "Go" button, give that a unique ID and call the CSS with that.

Secondly, your form has some <td> tags when you're not using a table. They're completely useless. You should remove them.

Thread: Placement

Thread Tools

Search Thread

Placement

Bookmarks

Bookmarks

Posting Permissions