Breite Hintergrund stimmt einfach nicht

Status
Nicht offen für weitere Antworten.
C

catcharry

Grünschnabel
Hallo,

ich habe meine Seite per css in drei Bereiche aufgeteilt. Der mittlere davon soll abhängig von der Fenstergröße variabel sein. Ich dachte, wenn ich diesen Bereich auf 100% Breite stelle, dann müßte es funktionieren, aber es will nicht. Inhalt verschwindet immer unter dem rechten Menuteil. Erst, wenn ich mich einer Breite von ca. 50% nähere, stimmt das Ergebnis annähernd bei meiner Auflösung, ist aber auch nicht variabel.
Hier mal mein CSS-Code:


Code: 
#menu_links {
	background-color:#F0037F;
	position:absolute;
	top:0px;
	height:100%;
	left:0px;
	width:170px;
	z-index:2;
	font-family:arial,helvetica;
	font-size:14px;
	color:#000000;}

#content {
	background-color:#D9ED09;
	position:absolute;
	top:0px;
	height:100%;
	left:170px;
	width:100%;
	z-index:1;
	font-family:arial,helvetica;
	font-size:14px;
	color:#000000;}

#menu_rechts {
	background-color:#F0037F;
	position:absolute;
	top:0px;
	height:100%;
	right:0px;
	width:170px;
	z-index:2;
	font-family:arial,helvetica;
	font-size:14px;
	color:#000000;}

Schon mal vielen Dank vorab
 
Hallo catcharry,

vielleicht wolltest du es so machen:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title>Test</title>
     <style type="text/css">
     <!--
     html, body {
     	width: 100%;
     	height: 100%;
     	margin: 0;
     	padding: 0;
     }
     #menu_links {
     	position: absolute;
     	top: 0;
     	left: 0;
     	height: 100%;
     	width: 170px;
     	z-index: 2;
     	font-family: arial,helvetica,sans-serif;
     	font-size: 14px;
     	color: #000;
     	background-color: #F0037F;
     }
     #content {
     	position: absolute;
     	top: 0;
     	left: 170px;
     	right: 170px;
     	height: 100%;
     	z-index: 1;
     	font-family: arial,helvetica,sans-serif;
     	font-size: 14px;
     	color: #000;
     	background-color: #D9ED09;
     }
     * html #content {
     	left: 0;
     	right: 0;
     	width: 100%;
     	border-left: 170px solid #F0037F;
     	border-right: 170px solid #F0037F;
     }
     #menu_rechts {
     	position: absolute;
     	top: 0px;
     	right: 0px;
     	width: 170px;
     	height: 100%;
     	z-index: 2;
     	font-family: arial,helvetica,sans-serif;
     	font-size: 14px;
     	color: #000;
     	background-color: #F0037F;
     }
     -->
     </style>
     </head>
     <body>
       <div id="menu_links">menu_links</div>
       <div id="content">content</div>
       <div id="menu_rechts">menu_rechts</div>
     </body>
 </html>
Für den Internet-Explorer legst du den CONTENT-Container in die unterste z-Ebene, gibst ihm eine Breite von 100% und einen linken und rechten Rand von 170px Breite, wo du dann in einer höheren z-Ebene den linken und rechten MENÜ-Container darüberlegst.

Für alle anderen (Non-IE-) Browser kann die Randposition der Container über die left-/right- und top-/bottom-Eigenschaft deklariert werden, ohne dass eine expressive Breiten- oder Höhenangabe notwendig ist.

Siehe auch CSS-Tutorial "Tabellenloses Basislayout ...".
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück