SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    ddddd
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center horizontal menu in header

    I am trying to align a horizontal menu in my header..however it won't line up the same in both Explorer and Netscape.

    http://www.freeclassifiedlinks.com/wordpress/index.php

    Also, the rest of my page is not being displayed in Explorer once I put the menu code in.

    Can someone please tell me where I am going wrong? This is driving me insane.

    Here is my CSS code:


    body {
    background: #fff url(YouCanPutABackgroundImageHere) repeat-x;
    font-family: arial;
    margin: 0;
    padding: 0;
    color: black;
    }
    h4, li, a, span, th, td, input, select, textarea {
    font-family: verdana, tahoma, arial, helvetica, geneva, sans-serif;
    }
    li, td, caption, input, select, textarea {
    font-size: 10px;
    font-weight: normal;
    }
    p, {
    font-size: 11px;
    font-family: Verdana, Geneva, sans-serif;
    }
    #rap {
    display: block;
    margin: auto;
    position: relative;
    text-align: left;
    width: 770px;
    }
    #header {
    background: #333366 url(images/header-background.gif) repeat-x;
    font: italic normal 140% 'Times New Roman', serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 0px 0px 15px 0px;
    text-align: center;
    }
    #header a {
    color: #fff;
    font: italic normal 200% 'Times New Roman', serif;
    display: block;
    padding: 20px 0px 10px 0px;
    text-decoration: none;
    }
    #header a:hover {
    text-decoration: underline;
    }
    #content {
    left: 158px;
    padding: 0px 0 25px 0;
    position: absolute;
    top: 98px;
    width: 450px;
    }
    #content h2 {
    color: #000000;
    font: 75% Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0px 0px 0px 0px;
    text-align: left;
    text-decoration: none;
    border-bottom: dotted 1px #369;
    }
    #content div.post {
    padding: 0px 0 35px 0;
    }
    #content div.post h3 {
    color: #369;
    font-family: 100% Arial, Helvetica, sans-serif;
    margin: 0px 0 0px 0;
    padding: 2px 10px 2px 0px;
    text-decoration: none;
    }
    #content div.post h3 a, #content div.post h3 a:link, #content div.post h3 a:visited {
    color: #369;
    text-decoration: none;
    }
    #content div.post div.meta, #content div.post div.meta ul li a, #content div.post div.meta ul li a:link, #content div.post div.meta ul li a:visited {
    color: #000000;
    font-size: 10px;
    }
    #content div.post div.meta ul {
    display: inline;
    margin: 0;
    padding: 0;
    }
    #content div.post div.meta ul li {
    display: inline;
    margin: 0;
    padding: 0 3px 0 0;
    }
    #content div.post div.storycontent {
    margin: 0 0px 0 0;
    padding: 10px 0 10px 0px;
    }
    #content div.post div.feedback a {
    color: #369;
    font-size: 11px;
    }
    #content div.post div.storycontent ol, #content div.post div.storycontent ul, #content div.post div.storycontent li, #content div.post div.storycontent blockquote {
    margin-left: 0px;
    padding-left: 0;
    }
    #comment {
    height: 150px;
    width: 400px;
    }
    #calendar, #search, #archives {
    left: 617px;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 150px;
    background: #e8e8e8 url(images/menu-background.gif) repeat-x;
    border: 1px solid #369;
    }
    #calendar {
    top: 0px;
    border: 1px solid #369;
    text-align: center;
    }
    #search {
    top: 165px;
    }
    #archives {
    top: 219px;
    }
    #menu {
    background: #e8e8e8 url(images/menu-background.gif) repeat-x;
    left: 0;
    padding: 0px 0px 0px 0px;
    position: absolute;
    top: 98px;
    width: 150px;
    border: 1px solid #369;
    text-align: center;
    }
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0px 0px 0px 0;
    }
    #menu ul li {
    color: #369;
    font-weight: bold;
    margin: 0 0 0px 0;
    padding: 0 0px 0px 0px;
    }
    #calendar caption {
    font-weight: bold;
    }
    #calendar th {
    color: #369;
    font-size: 10px;
    padding: 2px;
    text-align: center;
    }
    #calendar tbody td {
    font-size: 10px;
    padding: 2px;
    text-align: center;
    }
    #menu form {
    margin: 0;
    padding: 0;
    }
    #menu ul li ul {
    margin: 2px 0 0 0;
    padding: 5px 0 2px 0px;
    }
    #menu ul li ul li {
    color: #369;
    font-weight: normal;
    margin: 0 0 2px 0px;
    padding: 0 0 5px 0;
    }
    #menu ul li ul li a, #menu ul li ul li a:link, #calendar td a, #calendar td a:link {
    color: #369;
    }
    #menu ul li ul li a:visited, #calendar tfoot td a:visited {
    color: #369;
    }
    p.credit {
    display: none;
    position: bottom;
    text-align: center;
    }
    #photos {
    left: 617px;
    top: 281px;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 150px;
    background: #e8e8e8 url(images/menu-background.gif) repeat-x;
    border: 1px solid #369;
    }
    #footer {
    position: absolute;
    bottom: 0px;
    width: 450px;
    background: #333366 url(images/menu-background.gif) repeat-x;
    font: italic normal 100% 'Times New Roman', serif;
    }
    #footer {
    text-color: white;
    text-align: center;
    }

    #navcontainer {
    background: transparent;
    align: center;
    float: left;
    margin: -25px 0 0 2px;
    padding: 0;
    width: 100%;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
    }

    #navcontainer ul li a:hover
    {
    color: #fff;
    background-color: #369;
    }



    Here is my html for my index.php file:

    <?php
    /* Don't remove this line. */
    require('./wp-blog-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 -->

    <style type="text/css" media="screen">
    @import url( <?php echo get_settings('siteurl'); ?>/wp-layout.css );
    </style>

    <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
    <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="rap">
    <h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>


    <div id="navcontainer">
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </div>



    <div id="content">
    <?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

    <?php the_date('','<h2>','</h2>'); ?>

    <div class="post">
    <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <div class="meta"><?php _e("Filed under:"); ?> <?php the_category() ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(); ?></div>

    <div class="storycontent">
    <?php the_content(); ?>
    </div>

    <div class="feedback">
    <?php wp_link_pages(); ?>
    <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
    </div>

    <!--
    <?php trackback_rdf(); ?>
    -->

    <?php include(ABSPATH . 'wp-comments.php'); ?>
    </div>

    <?php endforeach; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    </div>

    <div id="menu">
    <p>

    <b><font color="#006699" size="2">Recent Posts/font></b><br>

    <?php get_recent_posts(); ?><p>

    <b><font color="#006699" size="1">Subscribe to Elite Links</font></b>
    <center>

    <form action="http://www.getresponse.com/cgi-bin/add.cgi" method="post" id="GRSubscribeForm">
    <table><tr>
    <td><label for="GRCategory2">Name</label>/td>
    <td><input type="text" name="category2" size="14" id="GRCategory2" /></td>
    </tr><tr>
    <td><label for="GRCategory3">E-Mail</label>/td>
    <td><input type="text" name="category3" size="14" id="GRCategory3" /></td>
    </tr></table>
    <input type="submit" value="Subscribe Now!" />
    <input type="hidden" name="category1" value="elinks" />
    <input type="hidden" name="confirmation" value="http://www.freeclassifiedlinks.com/elinkson.html" />
    <input type="hidden" name="error_page" value="" />
    <input type="hidden" name="misc" value="" />
    <input type="hidden" name="ref" value="001" />
    </form></center><p>


    <ul>

    <li id="categories"><?php _e('Categories:'); ?>
    <ul>
    <?php wp_list_cats(); ?>
    </ul>

    <?php get_links_list(); ?>
    </li>
    <li id="search">
    <label for="s"><?php _e('Search:'); ?></label>
    <form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
    <div>
    <input type="text" name="s" id="s" size="15" /><br />
    <input type="submit" name="submit" value="<?php _e('Search'); ?>" />
    </div>
    </form>
    </li>
    <li id="archives"><?php _e('Archives:'); ?>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
    </li>
    <li id="calendar">
    <?php get_calendar(); ?>
    </li>

    </ul>

    </div>

    </div>

    <p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite></p>
    </body>
    </html>

  2. #2
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually do something like this

    Code:
    ul{
    
      margin: 0; padding: 0;
      list-style-type: none;
    
    }
    
    li{
    
      display: inline;
      float: left;
    }
    What do you mean it's not "lining up the same"?

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    ddddd
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want the menu to be aligned to the left in my header.

    When I look in Explorer, my menu is in the header, but the rest of the blog won't display.

    In Netscape the menu is aligned below my header.

    I am not sure what I need to do so that my menu is aligned to the left in my header...in both broswers.

    Some part of my code is off, but I am not sure which part. I keep messing with it, but things are just getting worse.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Some part of my code is off, but I am not sure which part. I keep messing with it, but things are just getting worse
    Looks like you've solved this now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •