I need some help with CSS
I'm trying to center the menu (marked with red) to the header, but it's not working.
Could someone who knows CSS better, take a look at the code.
Index
Header
CSS
I'm trying to center the menu (marked with red) to the header, but it's not working.
Could someone who knows CSS better, take a look at the code.
Index
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"> <head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <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="wrapper"> <div id="firefox_fix"> <?php get_header(); ?> <div id="container"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <div class="post_icon"> <div class="title"><h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small> </div> </div> <div class="entry"> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Posted in:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?> <?php _e('|'); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p> </div> </div> <?php endwhile; ?> <div class="navigation"> <?php posts_nav_link(); ?> </div> <?php else: ?> <div class="post"> <h2><?php _e('Not Found'); ?></h2> <?php _e('Sorry, but you are looking for something that is not here.'); ?> </div> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> </div> </div> </body> </html>
Code:
<!–[if IE]> <style type="text/css"> body{ behavior:url("<?php bloginfo(’template_directory’); ?>/csshover.htc"); } </style> <![endif]–> <div id="header"> <a href="<?php bloginfo("url"); ?>"><div id="banner_link"></div></a> <!-- <h1><a href="<?php bloginfo("url"); ?>"><?php bloginfo('info'); ?></a></h1> <?php bloginfo ("description"); ?> --> <div id="menu"> <div class="hover-wrap"> <a href="<?php bloginfo("url"); ?>"><div id="home" class="mouseover"></div></a> <div class="hover-menu"> <ul> <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?> </ul> </div> </div> <div class="menu_div"></div> <div class="hover-wrap"> <a href="<?php bloginfo("url"); ?>"><div id="blog" class="mouseover"></div></a> <div class="hover-menu"> <ul> <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=1'); ?> </ul> </div> </div> <div class="menu_div"></div> <a href="<?php bloginfo("url"); ?>"><div id="images" class="mouseover"></div></a> <div class="menu_div"></div> <a href="<?php bloginfo("url"); ?>"><div id="videos" class="mouseover"></div></a> </div> </div>
Code:
/* Theme Name: Huntteri Theme URI: huntteri.co.cc Description: Theme for huntteri website Version: 1.0 Author: tupla_s Author URI: huntteri.co.cc */ body, h1, h2, h3, h4, h5, h6, blockquote, p{ margin: 0; padding: 0; } body{ margin: 0; font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; text-align: center; vertical-align: top; background: url('images/top_grad.png') repeat-x; background-color: #deded5; color: #000000; } h1{ font-family: Georgia, Sans-serif; font-size: 24px; padding: 0 0 10px 0; } a:link, a:visited { text-decoration: none; color: #6f7537; } a:hover { text-decoration: underline; } p{ padding: 10px 0 0 0; } #wrapper{ margin: 0 auto auto auto; width: 739px; background: url('images/background.png') repeat-y; background-color: #bfc0ae; text-align: left; } #firefox_fix{ float: left; width: 739px; background: url('images/background.png') repeat-y; background-color: #bfc0ae; text-align: left; } #header{ float: left; width: 739px; height: 150px; background: url('images/banner.png') no-repeat; text-align: center; } #banner_link{ height: 100px; width: 739px; } #menu{ height: 21px; min-width: 739px; margin: 13px auto auto auto; position: relative; float: left; } .menu_div{ height: 21px; min-width: 6px; background: url('images/menu_div.png') no-repeat; float: left; margin: 0 5px 0 5px; } #home{ min-width: 67px; min-height: 21px; background: url('images/menu_home.png') no-repeat; float: left; } #home:hover{ background-position: 0 -21px; } #blog{ min-width: 51px; min-height: 21px; background: url('images/menu_blog.png') no-repeat; float: left; } #blog:hover{ background-position: 0 -21px; } #images{ min-width: 84px; height: 21px; background: url('images/menu_images.png') no-repeat; float: left; } #images:hover{ background-position: 0 -21px; } #videos{ min-width: 81px; height: 21px; background: url('images/menu_videos.png') no-repeat; float: left; } #videos:hover{ background-position: 0 -21px; } .hover-wrap{ position: relative; } .hover-wrap .hover-menu{ display: none; } .hover-wrap:hover .hover-menu{ display: block; position: absolute; top: 20px; left: 10px; z-index: 100; white-space: no-wrap; } #container{ float: left; width: 560px; } .sidebar{ background: url('images/sidebar_line.png') no-repeat; float: left; width: 179px; } .sidebar ul, #menu ul{ list-style-type: none; margin: 0; padding: 0 10px 0 25px; } .sidebar ul li, #menu ul li{ padding: 10px 0 10px 0; } .sidebar ul li h2, #menu ul li h2{ font-family: Georgia, Sans-serif; font-size:14px; } .sidebar ul ul li, #menu ul ul li{ padding: 0; line-height: 20px; list-style-image: url(images/arrow.png); } /*-------------------------FOOTER-------------------------*/ #footer{ clear: both; float: left; width: 739px; height: 42px; background: url('images/footer.png') no-repeat; text-align: center; } /*-------------------------LINKS-------------------------*/ #blank_link1{ float: left; height: 42px; width: 26px; } #emote_link{ float: left; height: 42px; width: 87px; } #blank_link2{ float: left; height: 42px; width: 421px; } #thehunter_link{ float: left; height: 42px; width: 110px; } #avalanche_link{ float: left; height: 42px; width: 71px; } #blank_link3{ float: left; height: 42px; width: 25px; } /*-------------------------LINKS END-------------------------*/ #footer p{ line-height: 15px; } .post{ padding: 10px 0 30px 20px; } .post_icon{ background: url('images/post_icon.png') no-repeat; background-position: left; width: auto; height: 45px; } .title{ padding: 6px 0 0 46px; } small{ color: #777; } .post h2{ font-family: Georgia, Sans-serif; font-size: 18px; } .entry{ line-height: 18px; } p.postmetadata{ background: url('images/post_div.png') no-repeat; background-position: bottom; text-align: center; margin: 10px 0 0 0; } .navigation{ padding: 10px 0 10px 20px; font-size: 14px; font-weight: bold; line height: 18px; } .comments-template{ margin: 10px 0 0; border-top: 1px solid #ccc; padding: 10px 0 0; } .comments-template ol{ margin: 0; padding: 0 0 15px; list-style: none; } .comments-template ol li{ margin: 10px 0 0; line-height: 18px; padding: 0 0 10px; border-bottom: 1px solid #ccc; } .comments-template h2, .comments-template h3{ font-family: Georgia, Sans-serif; font-size: 16px; } .commentmetadata{ font-size: 12px; } .comments-template p.nocomments{ padding: 0; } .comments-template textarea{ font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; }