Positioning Links over a background image

hi…can you look at this site? http://nidaholly.wp.hobbsherder.com

i'm trying to position the Home | Blog | Contact that is currently over the logo to be over the slogan text to the right of it like this… http://nidaholly.wp.hobbsherder.com/about-holly-bill-nida/

can someone give me any suggestions on this?

here's my css which isn't working…
#hh-lander-header
{
height:735px;
width:2200px;
position:relative;
}

#image
{
position:absolute;
left:0;
top:0;
}
#hh-lander-header-content
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:0;
top:0;
}

and here's my code in the header.php file which isn't working…
<div class="hh-home-header">
<div class="hh-lander-header">
<div id="banner">
<div class="active" style="background:url(/wp-content/themes/nida_holly/images/header-home1.png) no-repeat center center;"></div>
<div style="background:url(/wp-content/themes/nida_holly/images/header-home1.png) no-repeat center center;"></div>
<div style="background:url(/wp-content/themes/nida_holly/images/header-home2.png) no-repeat center center;"></div>
<div style="background:url(/wp-content/themes/nida_holly/images/header-home3.png) no-repeat center center;"></div>
<div style="background:url(/wp-content/themes/nida_holly/images/header-home4.png) no-repeat center center;"></div>
<div style="background:url(/wp-content/themes/nida_holly/images/header-home5.png) no-repeat center center;"></div>
<div style="background:url(/wp-content/themes/nida_holly/images/header-home6.png) no-repeat center center;"></div>
<div style="background:url(/wp-content/themes/nida_holly/images/header-home7.png) no-repeat center center;"></div>
<div style="background:url(/wp-content/themes/nida_holly/images/header-home8.png) no-repeat center center;"></div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function cycleImages(){
var $active = $('#banner .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#banner div:first');
$next.css('z-index',2);//move the next div up the pile
$active.fadeOut(1500,function(){//fade out the top div
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the div
$next.css('z-index',3).addClass('active');//make the next div the top one
});
}

$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 4000);
})
</script>
<p id="hh-lander-header-content" style="margin:50px 0 0 799px; font-family:'Arial', Helvetica, serif; font-size:16px; color:#78746d; font-weight:normal; line-height:125%; font-style:normal; text-align:right;"><a href="/home/" style="font-family:'Arial', Helvetica, serif; font-size:18px; color:#03a0b3; font-weight:normal; line-height:125%; font-style:normal; text-align:right; text-decoration:none;">Home</a>&nbsp;&nbsp;<span style="font-family:'Arial', Helvetica, serif; font-size:12px; color:#c0c993; font-weight:normal;">|</span>&nbsp;&nbsp;<a href="/blog/" style="font-family:'Arial', Helvetica, serif; font-size:18px; color:#03a0b3; font-weight:normal; line-height:125%; font-style:normal; text-align:right; text-decoration:none;">Blog</a>&nbsp;&nbsp;<span style="font-family:'Arial', Helvetica, serif; font-size:12px; color:#c0c993; font-weight:normal;">|</span>&nbsp;&nbsp;<a href="/contact-the-nida-team/" style="font-family:'Arial', Helvetica, serif; font-size:18px; color:#03a0b3; font-weight:normal; line-height:125%; font-style:normal; text-align:right; text-decoration:none;">Contact</a></p>
</div>
</div>

 

never mind…went a different route.

 

It is easy.Can i have access to your code? I can add the menu.