WordPress.org

Ready to get started?Download WordPress

Forums

Re-aligning Navigation Tabs (2 posts)

  1. steenface
    Member
    Posted 5 years 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;
    }
  2. chaoskaizer
    Member
    Posted 5 years 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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic