Thesis theme customization question...

I am trying to customize my header a certain way and I am stuck on something.
Just a side note, I know very little about html and css, but I get by.

I want my header to appear like this sites header: timatkinsonlive.com

I want my header image to appear as if it is overlapping the main header (hope that makes sense)

Is it just photoshopped that way or is there more to it?

Here is the start of my site prestonschumacher.com

Also, how can I get the nav bar to float on top like on Tim's site (it looks super clean and cool)

Thank you in advance for everyones help

 

I am startin to get somewhere, but I am having a problem with header image width.

Here is my custom.css file

#header {
border: none;
background-image: url(images/backgroundps.png);
background-repeat: no-repeat;
height: 200px;
padding: 0;
position:relative;
top:50px;
}



.custom #header #logo a {
text-indent: 0px;
width: 1400px;
height: 300px;
float: left;
}

#textlink {
position: absolute; top: 20px; left: 600px;
}

/* Style the First (or Only) Post */
.custom .top {
background:#FFFFFF none repeat scroll 0 0;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
border:5px solid #0000aa !important;
margin:1em;
padding:2em;
}

/* Style Remaining Posts (in a Multi-Post Listing) */
.custom .post_box {
background:#FFFFFF none repeat scroll 0 0;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
border:5px solid #0000aa;
margin:1em;
padding:2em;
}

/* Make all widget headings red */
.custom .widget {
color: red;
background:#FFFFFF none repeat scroll 0 0;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
border:5px solid #0000aa;
margin:1em;
padding:2em;
}

/* Specify bottom padding on all widgets */
.custom li.widget {
padding-bottom: 15px;
}

/* Specify bottom margin on all widgets */
.custom li.widget {
margin-bottom: 2.769em;
}

.custom #header_area {background:#000000;}
height: 0px;
.custom #header_area .page {background:transparent;}
.custom #header {border-bottom:0;}

Any suggestions to increase the width to the "blank white image" area in my header. Here is my site for a visual of where I am at prestonschumacher.com

 

ok, there are a couple of items so i will try to address what i can one by one.

his nav menu is below the header, that might be part of what you are trying to do with the header.

in your custom php enter:

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_after_header','thesis_nav_menu');

 

Cool, that fixed part of my problem.

I almost have my site where I want it, but still struggling with a couple things.

How do I increase the width of my center header image ( prestonschumacher.com)

For the life of me I cannot figure this out

 

Here is a tutorial on how to use the thesis full page framework: http://www.artofblog.com/the-ultimate-visual-guide-to-the-thesis-full-width-framework/