PDA

View Full Version : trying to position navbar with css



ahughes3
Apr 28th, 2009, 12:43 PM
Hi,

I have set up a wordpress blog and am trying to get it to resemble the other pages in my web site. I've managed to get parts of it looking the same and have been trying to get the nav bar the same too as it appears in the header on all my other pages.

I've got it to appear in the wordpress page but it's in the wrong place. Not being an experienced CSS person, I've tried everything I can think of but it won't move and I need some help. The website for reference is www.pageoneofgoogle.co.uk and the blog is at the main domain plus /blog

I have included below the code from the style.css, the header.php and the index.php files. Any help anyone can give would be greatly appreciated. I know it's probably going to be something reasonably straight forward but I've exhausted my limited knowledge. I've not included the whole of each file as the css one is very long and lots of it is irrelevant (I think).

style.css


ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{

margin:0;

padding:0;

}

ul{

list-style:none;

}

a{

color:#3d3d3d;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

a img{

border:0;

}

.clear{

clear:both;

}



body{

margin:0px;

padding:0px;

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

background:#ffffff url(images/bg-copy.gif) repeat-x;

color:#3d3d3d;

}



#page{

width:1000px;

margin:0px auto;

}



/* HEADER */

/* Header panel styles */

#header td.logopanel{
background:url(../images/logo-panelbg.gif) 0 0 repeat-x;
}
#header img.logo{
margin:40px 0 0 7px;
}
{
}

/* Navigation panel style */

#navigation a{
font:bold 11px/27px Arial, Helvetica, sans-serif;
color:#0a9ecb;
background-color:inherit;
margin:0 1px;
background:url(images/button-bg.gif) 0 0 repeat-x;
display:block;
height:27px;
padding:0 13px;
position:relative;
text-decoration:none;
}
#navigation a:hover, #navigation a.active{
font:bold 11px/27px Arial, Helvetica, sans-serif;
color:#inherit;
background-color:inherit;
margin:0 1px;
background:url(images/buttonover-bg.gif) 0 0 repeat-x;
display:block;
height:27px;
padding:0 13px;
position:relative;
text-decoration:none;
}
#navigation a span{
background:url(images/button-bgspan.gif) 100% 0 no-repeat;
width:5px;
height:27px;
display:block;
line-height:0;
font-size:0;
position:absolute;
right:0;
top:0;
}
#navigation a:hover span, #navigation a.active span{
background:url(images/buttonover-bgspan.gif) 100% 0 no-repeat;
width:5px;
height:27px;
display:block;
line-height:0;
font-size:0;
position:absolute;
right:0;
top:0;
}

h1{
font:normal 30px/36px Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
padding:68px 0 7px 22px;
}
#header p{
font:20px/17px Arial, Helvetica, sans-serif;
line-height: 20px;
color:#765617;
background-color:inherit;
padding:0 0 0 22px;
}
#header table.extrabutton{
margin:5px 3px;
}


#header{

width:100%;

height:208px;

}



#header_rss{

float:right;

}



#header_title{

float:left;

}



#header_title h1{

color:#271d14;

font-size:52px;

font-weight:normal;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

padding:60px 0 0 40px;

font-style:italic;

}



#header_title h1 a{

color:#271d14;

}



.description{

font-size:14px;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

position:relative;

top:-10px;

color:#271d14;

display:block;

text-align:center;

}



#header_rss div{

padding:110px 75px 0 0;

}



/* MENU */



#menu{

width:100%;

height:53px;

}



#menu_items{

float:left;

color:#ffffff;

font-size:15px;

width:753px;

}



#main_search{

float:right;

width:247px;

}



#menu_items ul{

padding:8px 0 0 10px;

}



#menu_items li{

float:left;

display:block;

font-family:Arial, Helvetica, sans-serif;

}



#menu_items a{

color:#ffffff;

display:block;

float:left;

height:26px;

padding:0px 10px 0 10px;

text-transform:uppercase;

}



#menu_items a:hover{

background:url(images/menu_items_a.gif) repeat-x;

text-decoration:none;

}



#searchform_body{

width:238px;

height:34px;

background:url(images/searchform_body.gif) no-repeat;

margin:9px 9px 0 0;

}



#searchform_top{

color:#99bdd5;

margin-left:10px;

}



#searchform_top span{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-style:italic;

font-size:12px;

}



#searchform_top_text{

width:197px;

border:0px;

background:none;

color:#8c8662;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

float:left;

margin:10px 0 0 0;

}



#gosearch{

position:relative;

top:5px;

float:left;

}



/* Begin Images */

p img {

padding: 0;

max-width: 100%;

}



/* Using 'class="alignright"' on an image will (who would've

thought?!) align the image to the right. And using 'class="centered',

will of course center the image. This is much better than using

align="center", being much more futureproof (and valid) */



img.centered {

display: block;

margin-left: auto;

margin-right: auto;

}



img.alignright {

padding: 4px;

margin: 0 0 2px 7px;

display: inline;

}



img.alignleft {

padding: 4px;

margin: 0 7px 2px 0;

display: inline;

}



.alignright {

float: right;

}



.alignleft {

float: left

}

/* End Images */







/* Begin Calendar */

#wp-calendar {

empty-cells: show;

margin: 10px auto 0;

width: 98%;

}



#wp-calendar #next a {

padding-right: 10px;

text-align: right;

}



#wp-calendar #prev a {

padding-left: 10px;

text-align: left;

}



#wp-calendar a {

display: block;

}



#wp-calendar caption {

text-align: center;

width: 100%;

}



#wp-calendar td {

padding: 3px 0;

text-align: center;

}



#wp-calendar td.pad:hover { /* Doesn't work in IE */

background-color: #fff; }

/* End Calendar */







/* Begin Various Tags & Classes */

acronym, abbr, span.caps {

cursor: help;

}



acronym, abbr {

border-bottom: 1px dashed #999;

}



blockquote {

margin: 15px 30px 10px 10px;

padding-left: 24px;

padding-bottom:7px;

background:url(images/blockquote_bg.gif) repeat-y;

}



blockquote blockquote{

background:url(images/blockquote_bg2.gif) repeat-y;

}



blockquote cite {

margin: 5px 0 0;

display: block;

}



.center {

text-align: center;

}



hr {

display: none;

}



a img {

border: none;

}



.navigation {

display: block;

text-align: center;

margin-top: 10px;

margin-bottom: 60px;

font-weight:bold;

clear:both;

}



.navigation a{

color:#c23500;

font-size:12px;

text-decoration:underline;

font-family:Arial, Helvetica, sans-serif;

}



.navigation a:hover{

text-decoration:none;

}



.navigation .alignleft a{

background:url(images/prev.gif) no-repeat left center;

padding:0 0 0 14px;

}



.navigation .alignright a{

padding:0 14px 0 0;

background:url(images/next.gif) no-repeat right center;

}

/* End Various Tags & Classes*/



/* Begin Lists



Special stylized non-IE bullets

Do not work in Internet Explorer, which merely default to normal bullets. */



.entry ul {

margin: 0 10px 15px 0;

list-style: none;

padding:15px 15px 15px 20px;

background:#fdfbe9;

}



.entry ul li {

padding: 4px 0 6px 0;

border-bottom:1px solid #f4d9ba;

}



.entry ul li:before{

content: url(images/entry_before.gif);

}



.entry ol {

margin: 0 10px 15px 0;

padding:15px 15px 15px 40px;

background:#fdfbe9;

}



.entry ol li {

margin: 0;

padding: 4px 0 6px 0;

border-bottom:1px solid #f4d9ba;

}



.postmetadata ul, .postmetadata li {

display: inline;

list-style-type: none;

list-style-image: none;

}



ol li{

list-style: decimal outside;

}

/* End Entry Lists */







/* Begin Form Elements */

#searchform {

margin: 10px auto;

padding: 5px 3px;

text-align: center;

}



#sidebar #searchform #s {

width: 108px;

padding: 2px;

}



#sidebar #searchsubmit {

padding: 1px;

}



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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<!-- Navigation panel start -->
<table width="466" border="0" cellpadding="0" cellspacing="0" id="navigation">
<tr>
<td width="60" align="center" valign="top"><a href="index.html" class="active" title="Home">HOME<span>&nbsp;</span></a></td>
<td width="93" align="center" valign="top"><a href="ANS-0007-WEBD/html/about_us.html" title="About Us">ABOUT US<span>&nbsp;</span> </a></td>
<td width="79" align="center" valign="top"><a href="ANS-0007-WEBD/html/web_design.html" title="Web Design">WEB<span>&nbsp;</span></a></td>
<td width="77" align="center" valign="top"><a href="ANS-0007-WEBD/html/seo_services.html" title="SEO Services">SEO<span>&nbsp;</span></a></td>
<td width="62" align="center" valign="top"><a href="ANS-0007-WEBD/html/portfolio.html" title="Portfolio">WORK<span>&nbsp;</span></a></td>
<td width="104" align="left" valign="top"><a href="ANS-0007-WEBD/html/contact_us.html" title="Contact Us">CONTACT US<span>&nbsp;</span> </a></td>
</tr>
</table>
<!-- Navigation panel end -->

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!--[if IE ]>
<link rel="stylesheet" href="<?=bloginfo('template_url')?>/style-ie.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="<?=bloginfo('template_url')?>/style-ie6.css" type="text/css" media="screen" />
<![endif]-->

<?php wp_head(); ?>
</head>

<body>
<div id="page">

<div id="menu">
<div id="menu_items">
<ul>
<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?=wp_list_pages2()?>
</ul>
<div class="clear"></div>
</div>
<div id="main_search">
<div id="searchform_body">
<form method="get" id="searchform_top" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="Type your search here..." name="s" id="searchform_top_text" onclick="this.value='';" />
<input type="image" src="<?php bloginfo('template_url')?>/images/go.gif" id="gosearch" />
</div>
</form>
</div>
</div>
<div class="clear"></div>
</div>

<div id="header">
<div id="header_title">
<h1>
<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a><span class="description"><?php bloginfo('description'); ?></span>
</h1>
</div>
<div id="header_rss">
<div><a href="<?php bloginfo('rss2_url'); ?>" title="Rss"><img src="<?php bloginfo('template_url')?>/images/rss.gif" alt="<?php bloginfo('name'); ?> Rss" /></a></div>
</div>
<div class="clear"></div>
</div>

<div id="body">

<div id="body_left">
<div id="body_left_content">


index.php


<?php get_header(); ?>



<div id="content" class="narrowcolumn">



<?php if (have_posts()) : ?>



<?php while (have_posts()) : the_post(); ?>



<div class="post" id="post-<?php the_ID(); ?>">

<div class="post-top">

<div class="post-date">

<?php the_time('M') ?>

<p><?php the_time('d') ?></p>

</div>

<div class="post-title">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php if ( function_exists('the_title_attribute')) the_title_attribute(); else the_title(); ?>"><?php the_title(); ?></a></h2>

<h3>

Posted by <span><?php the_author() ?></span> | Posted in <?php the_category(', ') ?> | Posted on <?php the_time('d-m-Y') ?>

</h3>

</div>

</div>

<div class="clear"></div>



<div class="entry">

<?php the_excerpt('Read the rest of this entry &raquo;'); ?>

</div>



<div class="postmetadata">

<div class="alignleft"><?php comments_popup_link('<span>(0)</span> Comments', '<span>(1)</span> Comment', '<span>(%)</span> Comments'); ?></div>

<div class="alignright"><a class="readmore" href="<?php the_permalink() ?>" ><span>Read More</span></a></div>

<div class="clear"></div>

</div>

</div>



<?php endwhile; ?>



<div class="navigation">

<div class="alignleft"><?php next_posts_link('Previous') ?></div>

<div class="alignright"><?php previous_posts_link('Next') ?></div>

</div>



<?php else : ?>



<h2 class="center">Not Found</h2>

<p class="center">Sorry, but you are looking for something that isn't here.</p>

<?php include (TEMPLATEPATH . "/searchform.php"); ?>



<?php endif; ?>



</div>



<?php get_footer(); ?>