overlaying images in css

Daimz · 08-06-2007, 02:06 AM

I am making a blog and as part of my template I am wanting to have my header and then another image on the side of that using the z-index: 2; to make it that layer about. so here is the css.

Code:

.splash {
        z-index: 2;
	width: 135px;
	height: 386px;
	margin: 0 auto;
        position: relative;
        left: 450px;
        top: 0px;
	background: url('images/splash1.png');

}

and this is the code for the header. (its a wordpress blog btw.)

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">

<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>

 <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="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 wp_head(); ?>

</head>

<body><p class="splash">welcome</p>

<div class="main">
		 <div class="top">

		 			<div class="topl">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

</div>
					
<div class="topr">
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<p><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="search_query" />
<input type="submit" class="searchbutton" value="Search" /></p>

 </form>


</div>
     </div>
		 <div class="shortnfo">
		 			<div class="menuitems">
  <ul>

<li class="page_item"><a href="<?php bloginfo('url'); ?>">Home</a></li>

<?php wp_list_pages('title_li='); ?>

</ul>

</div>
					<div class="welcome">
							 <h2>Welcome</h2>

							 <p><?php bloginfo('description'); ?></p>

					</div>
		 </div>

and the link to my site is: http://www.arctosdesign.com/blog

you should see the layout as it should be but then a nice watery image above that which is the image i am wanting to move.
if anyone could give me some advice or tips as to how to sort this i would really appriciate it.
thanx