Timo: DIV CSS statt FRAMES

Beitrag lesen

Hallo,

ich hab mich nun mal gewagt ohne Frames eine Seite zu basteln, und zwar mit DIV Containern und CSS, leider gelingt es mir nicht das es so ist wie es sein soll.

Hier mal den Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {
 font-family: Geneva, "lucida sans", Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #666666;
}
body {
 background-color: #FFFFFF;
 margin-left: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}

#top {
 left: 0px;
 width: 980px;
 height: 94px;
 border: 0px;
 background-color:#003399
}

#nav {
 left: 0px;
 width: 257px;
 height: 100%;
 border: 0px;
 background-color:#FFFFFF;
}

#content {
 left: 257px;
 width: 723px;
 height: 100%;
 border: 0px;
 background-color:#CCCCCC;
 overflow: scroll;
}

#bottom {
 left: 0px;
 bottom: 10px;
 width: 980px;
 height: 179px;
 border: 0px;
 background-color:#999999;
}
-->
</style>
</head>

<body>
<div id="top">Dies ist der obere Teil </div>
<div id="nav>">01<br>02<br>03<br>04<br></div>
<div id="content"> Die UNESCO hat eine Brosch&uuml;re unter dem Titel &quot;Ethical Implications of Emerging Technologies&quot; (PDF-Datei) ver&ouml;ffentlicht, die sich mit den Folgen des Einsatzes von RFID-Chips, von biometrischen Identifikationssystemen und Location Based Services (LBS) besch&auml;ftigt. Die von amerikanischen Juristen verfasste Brosch&uuml;re wird im Rahmen des &quot;NGO Geneva Net Dialogue&quot; ver&ouml;ffentlicht, in dem Nichtregierungs-Organisationen nach dem UN-Weltgipfel f&uuml;r Informationsfreiheit und dem Internet Governance Forum ihre Ansichten vortragen k&ouml;nnen. Was in diesem Netzdialog erarbeitet wird, soll in die Aktionslinie C10 &quot;Ethische Dimensionen der Informationsgesellschaft&quot; des Genfer WSIS-Aktionsplanes einflie&szlig;en.<br>
.<br>
</div>
<div id="bottom">Dies ist der untere Teil</div>
</body>
</html>

1.
Der obere Teil (id="top") soll immer oben sein was auch funktioniert.

2.
Der mittlere Teil der aus zwei DIV Container besteht (id="nav", id="content"), soll neben einander erscheinen und nicht untereinander. Mit der ("id=nav") soll dann auch der mittlere graue Teil (id="content") mit Hilfe der nav verändert werden.

3.
Der untere Teil (id="bottom") soll immer 10px höher als der untere Browserrand kleben. Wenn man das Fenster in der Länge kleine macht, soll dann ein Scrollbalken
entstehen beim "content".

4.
Weiterhin soll man die Seite zwar in der Größe bzw in der Länge verändern können, so das der Content dann vielleicht, je nach Inhalt keine Scrollbalken mehr benötigt. Weiterhin soll eine Sperre eingebaut sein das man wenn man das Browserfenster verkleinert, dies nur bist zu einem bestimmten Masß gehen so das der "Content" nie kleiner wird als in der Höhe von 350px.

Ich habe es schon vieles ausprobiert aber leider ist es mir nicht gelungen, ich bin für jede Hilfe und Tip dankbar.

Mit freundlichen Grüßen
Timo