✔ 2 Hintergrundfarben auf einer Seite

Cesideem · 26. Mai 2006

Hallo,

ich habe folgendes Problem:
Eine bestehende Webseite - basierend auf Frames - soll ohne Frames in CSS formatiert werden. Die Frameseite hat einen Kopfframe oben, einen Menüframe links und einen Inhaltsframe rechts.
Der Kopfframe hat eine andere Hintergrundfarbe als der Menü- und Inhaltsframe.

Ist es nun möglich, diese Trennung der Hintergrundfarben auch mit CSS zu bauen?

In einem ersten Versuch habe ich die Kopfzeile sowie Menü- und Inhaltsbereiche einfach in jeweils zwei DIV-Kontainer mit den Entsprechenden Farben gesetzt. Bei dieser Lösung habe ich jedoch noch weisse Ränder, die ich gerne auch noch weghaben will...
Am liebsten wäre mir quasi ne doppelte Body-Formatierung. Body1=dunkle farbe, Body2=helle farbe ála <body id = dunkel> ... dunkel ... </body><body id=hell> ... hell ... </body>

Ist das irgentwie machbar? Und wenn ja, wie?

Maik · 26. Mai 2006

Das body-Element darf in einem HTML-Dokument nur einmal enthalten sein, also müssen die drei Bereiche auf eine andere Weise eingerichtet werden.

Dein Vorhaben liesse sich in den Grundzügen beispielsweise mit folgendem CSS-Layout realisieren:

Code:

html, body {
margin: 0;
padding: 0;
}

div#head {
background: #dfdfdf;
height: 100px;
}

div#menu {
background: #efefef;
float: left;
width: 150px;
}

div#content {
background: #efefef;
margin: 0 0 0 150px;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

div#head {
background: #dfdfdf;
height: 100px;
}

div#menu {
background: #efefef;
float: left;
width: 150px;
}

div#content {
background: #efefef;
margin: 0 0 0 150px;
}
-->
</style>

</head>
<body>

<div id="head">head</div>

<div id="menu">menu</div>

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

</body>
</html>

Weitere Beispiele und Techniken für CSS-Layouts findest du auf den folgenden Seiten:

Cesideem · 26. Mai 2006

Thx, dank deines Beispiels hab ich meinen Fehler mit den weissen Rändern gefunden... hatte im body/html die Ränder nicht auf 0 gesetzt...

✔ 2 Hintergrundfarben auf einer Seite

Cesideem

Grünschnabel

Maik

Cesideem

Grünschnabel

Neue Beiträge