And this to your CSS:

#header #searchform { position: absolute;left: 630px;top: 72px;width: 274px;height: 46px;background:url(graf/search.PNG) top left no-repeat;border:0px<br /> } #header #searchform #searchinput { font-size: 11px;color: #666666;padding: 10px 55px 4px 8px;width: 200px;background:none;border:0px; } #header #searchform .searchbutton { height: 22px;width: 20px;text-indent: -9000px;text-transform: capitalize;background: url(graf/searchicon.PNG) no-repeat 0 0;border: none;position: absolute;right: 16px;top:7px; }

Now we only need a background under ours navigation. It's big semi-transparent rectangle, but for a background we will cut out just a small piece of it. Once again, copy this layer to a new document and select just small rectangle (even 1 by 1 pixels could be). Then save it as a nav.PNG. I've made it bigger for you to see.

The whole div should be 940 pixels in width following our design. We can make fixed height but if we will want to change the text we will also have to change that div. Here's html for our navigation:

</p> <div id="nav"> <h1>I am a Polish designer and webdeveloper, currently living in Lublin. I study in the Lublin University of Technology.<br /> My adventure with design began in 2005. Read more about me <a href="#footer">over here</a>, or just step over to my <a href="#">blog</a>.<br /> You can also check some of my <a href="works.php">works</a> and in the end write something to me right <a href="">here.</a></h1> </div> <p>

And complete CSS for that piece of code:

#header #nav { position:absolute;top:175px;left:20px;width:940px;background: url(graf/nav.PNG) repeat; } #header h1 { font: 20px/30px 'adventlight', Arial, sans-serif;letter-spacing: 0;color:#a95570;text-shadow: 2px 0px 1px #111;padding:10px 0 10px 20px; } #header h1 a { color:#e4b127;text-decoration:none;font-family: 'advent', Arial, sans-serif; } #header h1 a:hover { color:#f7d724;text-decoration:underline; }