Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    overlaying images in css

    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
    Last edited by Daimz; 08-06-2007 at 06:55 AM.


 

Posting Permissions

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