HTML/CSS Problem bei eigener Homepage

aloa! =)

ich hätte da eine frage: könnte mir jemand die folgenden sachen vl "neu" schreiben?
also...
genau sagen, was ich wo ändern muss?
oder am besten vl sogar noch selbst neu reinschreiben und es farblich kennzeichnen?

wäre super! ;)

also: ich habe eine homepage unter

www.CG13.jimdo.com

diese bearbeite ich schon seit nen paar tagen.
jetzt ist das layout dran, bevor ich mich wieder dem restlichen inhalt widme.

mein anbieter hat leider keine vorlage, die meinen vorstellungen entspricht, aber er gibt mir die möglichkeit das layout selbst zu gestalten.

das habe ich auch. (muss vl noch per photoshop angepasst werden... strecken, ziehen... drehen, etc.)
aber ich bekomme es einfach nicht in html bzw. css rein, so dass es dann auch so aussieht, wie es sein soll...

also.
meine hp dreht sich hauptsächlich um lyrik.
daher möchte ich, dass dieser holzhintergrund bleibt.
dort, wo die mitte ist (also text erscheint, sollen blätter zu sehen sein. wenn der text von zb,. einem gedicht angeklickt wird, dann wäre es prima, wenn er genau auf dem blatt erscheinen würde.

http://s14.directupload.net/file/d/2939/zv45gs5o_jpg.htm
(das ist der gesamte hintergrund)

so. das menü hätte ich gerne links am rand und "den rest" rechts. wie es unter www.CG13.jimdo.com auch zu sehen ist (leider verschwindet das immer, wenn ich den quellcode bearbeite).

schön wäre es, wenn untem am rand dieser papierhaufen bleiben würde.
ebenso sollten die zettel, die ich links angeordnet habe ("everything happens for a reason", etc.) links unter dem menü erscheinen würden (also nicht ins menü reinragen).
rechts die 2 zettel sollen wenns geht möglichst nicht in die rechte spalte übergehen. also... "ganz" rechts ist nur holz und eben das, was unter meiner jetzigen hp rechts zu sehen ist.

der header kann so bleiben, wie er ist.
(footer mit schmetterlingen auch)

okay.
sagen wir mal, ich hätte das oben stehende bild in 4 teile aufgeteilt.
teil 1 ist der linke rand mit den 3 zetteln
teil 2 ist unten die papierhaufenleiste
die mitte mit dem "laufenden zettel" sei teil 3
und teil 4 ist rechts holz und die 2 zettel.

hier kommen jetzt html und css, wo baue ich was ein?
(namen zb. "header.jpeg" können in teil X geändert werden!)


<div id="container">
<div id="header">
<h1>
Headline
</h1>
<img src="header.jpg" alt="" />
</div>

<div id="navigation">
<var>navigation[1|2|3]</var>
<div id="sidebar">
<var>sidebar</var>
</div>
</div>

<div id="content">
<var>content</var>
</div>

<div id="footer">
<div class="gutter">
<var>footer</var>
</div>
</div>
</div>




/* Typo
----------------------------------------------- */

a:link, a:visited
{
text-decoration: underline;
color:#EC4413;
}
a:active { text-decoration: underline; }
a:hover { text-decoration:none; }


h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }

p {font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/* Layout
----------------------------------------------- */

body {
background: #333333 url(fertig-layout.jpg) no-repeat top left, right;
padding:35px 0 0 0;
margin:0;
font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container
{
margin:0 auto;
width:834px;
background: url(fertig-layout.jpg);
}

#header
{
padding:17px;
}

#header h1,
#header a
{
padding:0;
font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size:30px;
font-weight:normal;
text-decoration:none;
line-height:1.3em;
color:#666666;
text-align:right;
}

#header a:hover { text-decoration:none; }


#navigation
{
float:left;
width:220px;
padding:17px;

}
#sidebar
{
padding-top:17px;
}

#content
{
float:right;

width:530px;
padding:17px;

}

#footer
{
clear:both;
margin-top:220px;
background:url(unbenannt-123456.png) repeat-x top;
height:65px;
}

#footer .gutter
{
height:30px;
padding:35px 15px 0 90px;
}

/* Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
margin:0;
padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li
{
display: inline;
margin: 0;
padding: 0;
}


ul.mainNav1 li a,
ul.mainNav2 li a
{
font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
color:#333;
border-bottom:1px solid #CCC;
}


ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }


ul.mainNav1 a:hover
{
background:#EEE;
color:black;
}

ul.mainNav1 a.current { font-weight:bold; }


DANKE SCHÖN! :)