Re-aligning Navigation Tabs

  • steenface

    (@steenface)


    17 years, 5 months ago

    Right now, my navigation tabs are centered at the top of my blog like so: http://mamanabi.com/ ; I would like them to align to the right. However, I’ve been tinkering with the header.php and absolutely cannot get it to work properly. I know it has to do with the div id=”menu” portion.

    Here is my header.php:

    <!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">
<head profile="http://gmpg.org/xfn/1">
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>

<body>
<div id="menu">
			<ul>
				<li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" title="mamanabi.com">mamanabi.com</a></li>
				<?php wp_list_pages('title_li=&depth=1');?>
			</ul>
		</div>
	<div id="header" style="display: inline">
		<h1></h1>

	</div>
<div id="splash"></div>

	<div id="main">

    And here is the relevant stylesheet code:

    /* Menu */

#menu
{
	background: #e7bd3e;
	height:28px;
	line-height:28px;
	margin:0 auto;
	padding:10px 0 0;
}
#menu ul
{
	padding:2px 0;
	margin:0;
	list-style: none;
	text-align: center;
        position: relative;
}

#menu li
{
	margin:0;
	padding: 0;
	display: inline;
}

#menu li a
{
	color: #331e21;
	font-weight: bold;
	text-transform:uppercase;

	letter-spacing: 0.2em;
	padding:4px 10px;
}

#menu li a:hover,#menu li.current_page_item a
{
	background:#331e21;
	color:#fff;
}

Viewing 1 replies (of 1 total)
  • chaoskaizer

    (@chaoskaizer)

    17 years, 5 months ago

    my navigation tabs are centered at the top of my blog like so: http://mamanabi.com/ ; I would like them to align to the right

    find

    #menu
{
	background: #e7bd3e;
	height:28px;
	line-height:28px;
	margin:0 auto;
	padding:10px 0 0;
}
#menu ul
{
	padding:2px 0;
	margin:0;
	list-style: none;
	text-align: center;
        position: relative;
}

    replace with

    #menu
{
	background: #e7bd3e;
	height:28px;
	line-height:28px;
	margin:0 auto;
	padding:10px 0 0;
        text-align: right;
        width: 930px
}
#menu ul
{
	padding:2px 0;
	margin:0;
	list-style: none;
}

Viewing 1 replies (of 1 total)

The topic ‘Re-aligning Navigation Tabs’ is closed to new replies.