css header help

[sheep01]

I have the actual header file called header.php But it loads the header and everything loads but when it does there is a rather large gap between two images. Any ideas whats causing it? File can be found at www.sheep01.com/lazydays/include.php

 

<style type="text/css">
#header {
  position: relative;
  height: 193px;
}

/* Holds the site title and subtitle */
#header #title {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 130px;

  padding: 5px;
  text-align: right;
}

#header h1 {
  margin: 0;
  padding: 0;

  font: 700 4em "trebuchet ms", serif;
  letter-spacing: -3px;
  text-transform: lowercase;
  color: #000000;
}

#header h2 {
  position: absolute;
  top: 10px;
  right: 5px;

  margin: 0;
  padding: 0;

  font: 700 1em "trebuchet ms", serif;
  text-transform: lowercase;
  color: #00F0EC;
}


/* Sets where the header images will go */
#header img.left {
  position: absolute;
  z-index: 1;

  top: 0;
  left: 0;
}

#header img.right {
  position: absolute;
  z-index: 0;

  top: 0;
  right: 0;
}

#header img.balloons {
  position: absolute;
  z-index: 2;

  top: 70px;
  right: 400px;
}
</style>
<div id="header">

    <div id="title">
      <h1>Sheep01.com</h1>
      <h2></h2>
    </div>

    <img src="images/bg/balloons.gif" alt="balloons" class="balloons" />
    <img src="images/bg/header_left.jpg" alt="left slice" class="left" />
    <img src="images/bg/header_right.jpg" alt="right slice" class="right" />

  </div>

 

And then the very basic php include:

 

<?php 
include("header.php"); 
?>

[haku]

What do you mean? The gap is there because you set your images to be on the left and right sides of the div they are contained in. That gives them a gap. The fact that there is an include has nothing to do with it.

[sheep01]

My question is what do I need to change to fix the gap?

[haku]

You have given the left images a position of absolute, and a left value of zero. You gave the right images a position of absolute and a right value of zero. Doing this makes them zero pixels from the left and right sides of their containing div.There are a dozen ways you can bring them together - take off the absolute positioning, float the left side left and the right side right, then add margins. Or you could contract the width of the containing div that the two are in, or you could increase the values of left and right as the div is now.

 

It depends on what it is you are trying to do I guess.

 

What I don't get is how you got to where you are without realizing what it is you had done. I would recommend some online CSS tutorials at the least, and maybe a book on CSS.