Minor CSS Problem. Need a quick fix

[garryconn]

I am trying to modify some CSS to shift some text over slightly and raise it up. Here is the HTML code and CSS I am working with:

-------------
THE HTML CODE
-------------


<div id="header">
<div id="headerimg">
<h1><a href="http://www.blogtheinternet.com/testblog/">Professional Product Reviews</a></h1>
<div class="description">A professional product review blog on the Internet</div>
</div>
</div>

----------------------------
INFORMATION IN THE STYLE.CSS
----------------------------

#header {
background: #73a0c5 url('http://www.blogtheinternet.com/testblog/wp-content/themes/default/images/kubrickheader.jpg') no-repeat top center;
}

#headerimg {
margin: 7px 9px 0;
height: 192px;
width: 740px;
}

h1, h2, h3 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight: bold;
}

h1 {
font-size: 4em;
text-align: center;
}

#headerimg .description {
font-size: 1.2em;
text-align: center;
}

What I want to do is raise the <h1> test up to be pretty much level with the gold seal and maybe about 10 pixels away from it.

From there I want to add a 468x60 Google Adsense code below the gold seal. I have been working on this for a few hours now, can anyone throw me a bone real quick and possibly modify the CSS included above?

* NOTE: Here is a Mock Up image I did in photo shop to illustrate what I am wanting to do. Granted the headerimage as you see it now will be a different background... more less a solid or standard gradient color.

http://www.blogtheinternet.com/testb...er-example.jpg

Best Regards,
Garry

[garryconn]

Just a bump.

I want to see if I can get someone to offer a few minutes of help.

Thanks in advanced.

Garry

[jhardman]

Just a bump.

I want to see if I can get someone to offer a few minutes of help.

Thanks in advanced.

Garry

You nasty little bumper!

There are several ways to do things like this, using just padding and margins you could try:
[html]<style type="text/css">
#header {
width:760px;
background: #73a0c5 url('http://www.blogtheinternet.com/testblog/wp-content/themes/default/images/kubrickheader.jpg') no-repeat top center;
}

#headerimg {
margin: 7px 9px 0;
padding: 20px;
height: 70px;
width: 740px;
}

h1, h2, h3 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight: bold;
}

h1 {
font-size: 2.5em;
text-align: center;
margin: 0px;
}

#headerimg .description {
margin: 0px;
font-size: 1.2em;
text-align: center;
color: white;
}

a {
color: white;
text-decoration: none;
}[/html]
you also might want to look up relative and absolute positioning, especially since old versions of ie notoriously mis-interpret padding and margins

Jared