Formatierungsschwierigkeiten: u.a. Bildgröße, versch. Layouts

[lala]

Ich bin absoluter CSS/HTML Anfänger und hab noch eingige Probleme damit:

1. Wie finde ich die optimale Bildgröße heraus? Ich hab ein bisschen rumprobiert, aber es war nie passend. Zudem überlege ich im "splash" 2 Bilder statt nur ein Bild einzufügen, weil ich glaube dass es dann besser aussieht.

2. Wie muss ich formatieren, dass die Unterpunkte in der Menueleiste gleichmäßig verteilt sind? (derzeit linksbündig?, dadurch ist rechts noch viel freie Fläche..)

3. Fährt man mit dem Cursor über den Header bei der Webansicht, so erscheint unten links im Browserfeld der Dateiname und -ort. Den wollte ich umbenennen, dann kann aber keine Seite mehr angezeigt werden

4. Wenn ich die einzelnen Unterseiten in unterschiedlichen Farben gestalten möchte, brauche ich dann jeweils ein gesondertes CSS oder kann ich das in einem CSS-Formular formatieren? Bisher sind alle Seiten gleich farbig.

Vielen Dank schonmal..

Hier mein CSS:

body
{
 margin: 50px;
 padding: 0;
 background: #FFFFFF url(images/img1.gif);
 font: normal small Arial, Helvetica, sans-serif;
 color: #6F4503;
}

h1, h2, h3, h4, h5, h6
{
 margin: 0;
 padding: 0;
 text-transform: uppercase;
 color: #9E6813;
}

h1, h2, h3
{
}

h4, h5, h6
{
}

p, ul, ol, blockquote
{
 margin-top: 0;
}

a
{
 color: #6F4503;
}

a:hover
{
 text-decoration: none;
}

img
{
 border: none;
}

/* Header */

#header
{
 width: 900px;
 height: 110px;
 margin: 0 auto;
 padding: 35px 0 0 0;
 background: #FFEE8F url(images/img2.gif) repeat-x;
 border: 5px solid #FFFFFF;
 border-bottom: none;
}

#header h1
{
 text-align: center;
 font-size: 3em;
}

#header h2
{
 text-align: center;
 font-size: 1.4em;
}

#header a
{
 text-decoration: none;
 color: #9E6813;
}

/* Menu */

#menu
{
 width: 900px;
 height: 36px;
 margin: 0 auto;
 padding: 0;
 background: #4E4E4E;
 border: 5px solid #FFFFFF;
 border-top: 1px solid #FFFFFF;
 border-bottom: 1px solid #FFFFFF;;
}

#menu h2
{
 display: none;
}

#menu ul
{
 margin: 0;
 padding: 0;
 list-style: none;
}

#menu li
{
 display: inline;
}

#menu a
{
 display: block;
 float: left;
 width: 98px;
 height: 26px;
 padding-top: 10px;
 text-align: center;
 text-decoration: none;
 color: #CCCCCC;
}

#menu a:hover, #menu .active a
{
 background: #000000;
 color: #FFFFFF;
}

/* Splash */

#splash
{
 width: 900px;
 margin: 0 auto;
 background: #FFFFFF;
 border-left: 5px solid #FFFFFF;
 border-right: 5px solid #FFFFFF;
}

/* Content */

#content
{
 width: 900px;
 margin: 0 auto;
 background: #FFFFFF;
 border: 5px solid #FFFFFF;
}

#content .title
{
 padding: 10px 20px;
 background: #FFEE8E url(images/img4.gif) repeat-x left bottom;
 font-size: 1em;
}

#content .story
{
 padding: 20px;
 border: 2px solid #FFEE8E;
}

/* Footer */

#footer
{
 width: 860px;
 margin: 0 auto;
 padding: 10px 20px;
 background: #4E4E4E;
 border: 5px solid #FFFFFF;
 border-top: none;
}

#footer p
{
 margin: 0;
 padding: 0;
 text-align: center;
 font-size: x-small;
 color: #CCCCCC;
}

#footer a
{
 color: #CCCCCC;
}