Html-Seite mit zwei Bereichen nebeneinander (CSS)

S

Svenni

Mitglied
Hallo,
ich habe ein Problem bei der Entwicklung einer beispielhaften HTML-Seite. Die HTML-Seite soll erst einmal über zwei Bereiche verfügen. Links ein Navigationsbereich und rechts ein Inhaltsbereich. Also nichts besonderes. Die beiden Bereiche sollen jeweils die selbe Höhe besitzen und es soll eine Mindesthöhe und eine vorgegebene Breite geben und beide Bereiche sollen zentriert angezeigt werden. Zudem sollen beide Bereiche mit unterschiedlichen Hintergrundfarben hinterlegt werden. Hört sich ja eigentlich einfach an, aber ich kriegs mit HTML und CSS einfach nicht hin.

Hier mal mein bisheriger Code. Die Farben etc. sind hier nur beliebig gewählt, da ich nur das Layout hinkriegen wollte. Das Problem ist noch, dass der Navigationsbereich stets genauso hoch sein soll wie der Inhaltsbereich, so dass er auch immer komplett mit der anderen Farbe gefüllt ist. Hier im Beispiel ist nur eine Zeile grau, da der Navigationsbereich nicht hoch genug ist.

[XML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Html-Seite mit zwei Bereichen</title>
<style type="text/css">
div#mainPage {
text-align: left;
margin: 0 auto;
width: 760px;
min-height:400px;

}

div#navigation {
background: #aaaaaa;
float: left;
width: 160px;
}

div#content {
background: #773355;
margin-left: 165px;

}
</style>
</head>
<body>
<div id="mainPage">
<div id="navigation">
Eintrag 1
</div>
<div id="content">
Inhalt<br>
Neue Zeile<br>
Neue Zeile<br>
</div>
</div>
</body>
</html>
[/XML]

Wir sollen wenn möglich CSS nutzen. Daher habe ich bisher bewusst von normalen Tabellen abgesehen.

Danke vorab.
 
Spin

Spin

Top Contributor
So schwer ist dass echt nicht . Dein Code sieht doch ganz gut aus .

Außer dass man CSS und HTML trennt , ne? ;)

Du willst also einen linken und einen rechten Bereich haben.
Nun gut denn packe doch erstmal alles in einen großen bereich zusammen.

Den nennst du wrapper und richtigst ihn mit margin:0,auto aus.
Dann hast du eine Webseite die genau in der Mitte ist.
Weiterhin schreibst du deine anderen div Container rein und passt auf dass diese auch abgeschlossen sind.

Wenn du das hast.
Gehts ab in Css.


Du möchtest mit Float arbeiten? Na denn. Setze beide divs auf floaf:left und definiere größe und hintergrundfarbe.
Danach setzt du die mindestbreiten und das spiel ist fertig , gruß
 
S

Svenni

Mitglied
Atze: Genau nach so etwas hab ich gesucht danke.
Spin: Auch danke für deine Antwort. Mit float: left in beiden Bereichen sieht es leider nicht ganz so aus, wie ich es gerne hätte. Trotzdem danke.
 
M

maki

Gast
Für Mozilla gibt es ein Plugin namens FireBug, damit kann man unter anderem die aktuellen CSS Einstellungen ansehen und sogar ändern, hilft viel in so einem Falle ;)
 
Y

y0dA

Top Contributor
Habe nun so ein ähnliches Problem, wie bekomme ich es hin dass die Navigation (links) und der Content(mitte und rechts) immer gleich "hoch" sind? Sprich es kann sein dass mal die Navigation höher ist als der Content und umgekehrt trotzdem sollen beide Bereiche immer gleich hoch sein.

Hat hierfür jemand ein "Basistemplate" (HTML + CSS)?
 

Aktuelle Jobs

Neue Themen


Oben