Frage stellen
ich möchte für eine Freundin eine Webseite bauen, die folgendermaßen aussehen soll (allerdings alles mittig):
- Code: Alles auswählen
+-------+-------+
| divol | divor |
+-------+-------+
| divml | divmr |
+------ +-------+
| divul | divur |
+-------+-------+
Dazu hab ich folgenden Quelltext der Datei:
- Code: Alles auswählen
<html>
<head>
<title> start</title>
<link href="stiles_new.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">
<!--<div id="header">--->
<div id="header_left">
OL
</div>
<div id="header_right">
OR
</div>
<!--</div>-->
<div class="clearer">
<!-- Trennung zum Menu -->
</div>
<!--<div id="menu">-->
<div id="menu_left">
ML
</div>
<div id="menu_right">
MR
</div>
<!--</div>-->
<div class="clearer">
<!-- Trennung zum Hauptteil -->
</div>
<!--div id="main">-->
<div id="main_left">
UL
</div>
<div id="main_right">
<span class="mainname">name</span><span class="maintitle">title</span>
</div>
<!--</div>-->
</div>
</body>
</html>
Und dazu folgenden CSS - Code:
- Code: Alles auswählen
body { background-color: #DDD; color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; }
/* zuerst Container festlegen... */
/* Container um alles... */
#content { margin: 50px auto; width: 900px; background-color: #F70; color: #000; }
/* Header - Kopfbereich */
/* #header { width: 900px; background-color: #F70; color: #000; }*/
#header_left { float: left; width: 329px; padding: 98px 0 10px 0; text-align: right; }
#header_right { float: right; width: 551px; padding: 98px 0 10px 0; }
/* Menubereich - (Haupt-) Navigation */
/* #menu { width: 900px; background-color: #fff; color: #000; }*/
#menu_left { float: left; width: 329px; height: 30px; text-align: right; background-color: #fff; line-height: 30px; font-size: 10px; }
#menu_right { float: right; width: 551px; height: 30px; text-align: right; background-color: #fff; line-height: 30px; padding: 0 20px 0 0; font-size: 10px; }
/* Hauptbereich - Inhalt */
/* #main { background-color: #F70; color: #000; }*/
#main_left { float: left; width: 329px; text-align: right; height: 300px }
#main_right { float: right; width: 551px; height: 300px }
/* nur fuer die erste Seite... */
.mainname { font-size: 30px; color: #FFF; background-color: #F70; }
.maintitle { font-size: 20px; color: #CCC; background-color: #F70; }
/* -------------------------------- */
.clearer { clear : both; margin : 0; padding : 0; height: 1px;}
Das Problem ist etwas merkwürdig. Im Prinzip geht das so, aber wenn ich das so lasse, haben die beiden unteren div's keine von mir festgelegte Farbe. Nemme ich bei #main_right das float raus, wird es zwar nicht so angezeigt, wie ich es will, aber die Hintergrundfarbe ist da...??
Hat jemand eine Idee, was da los ist?
Im Prinzip müsste es doch aber so gehen? Oder liege ich da falsch?
Wäre supi, wenn mir da jemand einen Tipp geben könnte.
Danke schon mal,
Noreen
Jetzt klappt es.