Content nicht ordentlich sichtbar... warum?

Ich habe folgendes Template:

<!  -BODY------------------------------------------>
<body id="body">
<div id="print"> Dies ist die Druckversion der Seiten der Christlichen Pfadfinderschaft Kreuzträger e.V.<br /> www.cp-kreuztraeger.de</div>

<! - CONTAINER-------------------------------------->
<div id="container">


<! - CONTENT-------------------------------------->
	<div id="bereich_content">	

<!  - Überschrift---------------------------------------->
		<div id="titel">###titel### </div>
		<div id="content">###content###</div>

<! - menu3---------------------------------------->
		<div id="menu3">###menu3### </div>





<!  - bereich_links--------------------------------------->

		<div id="menu">	###menu_links###	
		<div id="LOGIN">###LOGIN###</div>	</div>				


	</div>

<!  - HEADER-------------------------------------->
	<div id="header">
		<div id="trailer"></div>
		<!--- <div id="cpk">###cpk###</div>	-->
		<div id="bild"></div>
		<div id="logo"></div>
<!  - menu_oben---------------------------------------->
		<div id="menu_oben">###menu_oben###</div>
	</div>
</div>
<!  - menu3---------------------------------------->


</body>
</html>

dies habe ich durch eine CSS Datei folgendermaßen umgesetzt:

BODY { font-size: 100%; 
font-family: Verdana, Arial, Helvetica, sans-serif; 	
margin: 0px; 
width:100%;
background: #000033; 
background-repeat: repeat-xy;

}




#container {
position: relative;
/*--margin: 0 auto; --*/
text-align: left; 
overflow-x: hidden;
overflow-y: hidden; 
	border-right-color: #000033;
	border-right-style: ridge;
	border-right-width: 2px;#
	border-left-color: #ffffff;
	border-left-style: ridge;
	border-left-width: 2px;
        border-bottom-color: black;
        border-bottom-style: ridge;
        border-bottom-width: 2px;
	width: 950px;

height: 300%;
background:#ffffff;
}





#header {
width: 100%;
height: 200px;
background: url(bilder/headerf.jpg) repeat-y;
}

#logo {
position:absolute;
top:25px;
right:10px;
width: 180px;
height: 210px;
/*--background: transparent url(bilder/liliegr.gif) no-repeat;--*/
border: 0;
}

#bild {
position:absolute;
top:0px;
left:20px;
width: 220px;
height: 130px;
/*--background:url(bilder/fahrt3.gif) no-repeat;--*/
}


#trailer {
position: absolute;
top:130px;
left:0px;
border-top: 3px white;
background:#000033 url(bilder/leiste2.gif) repeat-x;
width: 100%;
height: 50px;
}

#cpk {
position: relative;
top:20px;
left:230px;
	}

#bereich_content {
	position: absolute;
	top: 180px;
	left: 0px;
	width: 100%;
	height:100%;
	background: #fff url(bilder/hgv.jpg) repeat-y;
	}



#menu_oben {
	position: absolute;
	top:115px;
	right:60px;
	text-align:right;
	padding-right: 10px;
	width:100%;
	height: 20px;

}


#titel {
	position: absolute;
	top: 3px;
	left:180px;
padding-bottom: 0px;
border-bottom: 1px double #000000;
}

#menu3 {
	position: absolute;
	top: 18px;
	left:350px;
padding: 1px;
margin:2px;
font-size:10px;
font-color:#000;

}





/* ----------------LOGIN--------- ------------------------ */
#LOGIN {
	position: static;
	top: 230px;
	left: 0px;
	margin-bottom:3em;
	margin-top:3em;
	padding:1.3em 3.5em 1.5em 1.5em;
}





#menu {
	position: relative;
	top: 30px;
	left: 0px;
	width: 150px;
	height: 100%;
	list-style: none;


}




#content {
	position: absolute;
	top: 30px;
	left:150px;
	width: 780px;
	heigth:250%;
	overflow:hidden;}

#print {
position:absolute;
top:0px;
right:10px;
width: 180px;
height: 210px;
color:green;
display:none
}

Wie ihr seht, musste ich meinen Content usw. teilweise auf height:200% stellen, da sonst nie alles sichtbar war, d.h. bei 100% hat sich das Fenster nicht entsprechend vergrößert.

Im Augenblick sieht das ganze jetzt so aus www.cpk.mue-to.de

es ist natürlich keine zufriedenstellende Lösung!
Kann mir hier vielleicht jemand weiterhelfen?

Danke Andimueto

Sorry, aber Deine (X)Html-Struktur ist das absolute Chaos!

Wie soll sowas vernünftig angezeigt werden können?

Dein Frameset hat z.B. gar keinen Doctype und auf Deinen Inhaltsseiten stehen gleich zwei Doctypes (sowohl html4 trans, als auch xhtml strict...) mit zwei Headbereichen (und 10000 Zeilen css-styles) etc.

Danke für die deutliche Kritik!
Hatte mein Template nicht vollständig angegeben - hier der erste Teil!
Was meinst Du mit zwei Doctypes in den Inhaltsseiten und zwei Headbereichen?
--> wär schön, wenn Du mir bei meinem Problem weiterhelfen könntest!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="mueto" />
	<meta name="keywords" content="CPK " />
	<meta name="description" content="mal sehen" />
	<meta name="robots" content="all" />
	<title>EP Homepage</title>

	<script type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" media="print" href="fileadmin/cpk/print.css" />

</head>

Andimueto schrieb

Was meinst Du mit zwei Doctypes in den Inhaltsseiten und zwei Headbereichen?

Guck Dir doch mal den Quelltext Deiner ausgegebenen Seite im Browser an.

...das sieht nicht gut aus, da gebe ich dir recht!

Doch wie kann ich es verhindern, ich arbeite gerade an allen Baustellen gleichzeitig, da ich neu in Typo bin und erst seit ein paar Monaten mit CSS begonnen habe... html ist mir aus älteren Tagen bekannt.

Wie verhindere ich, dass sämtlicher CSS-Code im Quelltext erscheint?
Woher kommen zwei Doctypes? (habe die Grobstruktur des Templates aus einer Dokumentation übernommen)

Wäre dir für ein paar konstruktive Vorschläge dankbar, wo ich beginnen kann nachzuarbeiten!

Danke

Um fehlende Grundkenntnisse, bzw. das fehlende Grundverständnis aufzuarbeiten (ist ja nun wirklich keine Schande) ist die deutsche Doku von Robert Meyer hervorragend geeignet.

Du findest sie als pdf links im Menu unter "Literatur zu Typo3"