Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 18.01.2005, 12:19
Xavier Xavier ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.01.2005
Beiträge: 162
Xavier befindet sich auf einem aufstrebenden Ast
Standard CSS Layout mit fester und variabler Größe

Hi!
Ich hatte mal ein Design mit Tabellen gemacht und wollte das jetzt mit CSS machen, dabei bin ich auf folgedes Problem gestossen:

Das Layout soll etwa so aussehen:

--------------------------------
| < - - - feste Größe - - > |
--------------------------------
| <-- variable Größe - - > |
| <-- variable Größe - - > |
| <-- variable Größe - - > |
| <-- variable Größe - - > |
| <-- variable Größe - - > |
--------------------------------
| < - - - feste Größe - - > |
--------------------------------

Dabei soll immer alles sichtbar sein. Sprich: nur das mittlere Fenster soll sich an den Bildschirm anpassen, der Rest soll die Größe beibehalten.
Da ich immer FireFox benutzte, habe ich natürlich auch damit das Design ausprobiert (also die neue Version mit CSS). Hat nach langem Probieren auch gefunzt, aber als ich das dann mit dem IE geöffnet habe hat mich der Schlag getroffen: Alles total verrutscht!

Also hier der Quellcode:
Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
	background-color: #F0F0F0;
	font-family: Geneva, Arial, helvetica, sans-serif;
	font-size: 12px;
}

a {
	cursor:pointer;
	color: #666666; 
	text-decoration: none;
	font-size: 11px;
}

a:hover
{
	cursor:pointer;
	color: black;
	text-decoration: none;
}

#top {
	position: 	absolute;
	z-index: 	1;
	top:		6;
	left:		6;
	right:		6;
	height: 	44;
	border-top: 1px solid gray;
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	border-bottom: 1px solid silver;
	background-color: white;
}

#topmenu {
	position:	absolute;
	top:		0;
	right:		0;
	height: 	15;
	background-color:	#F0F0F0;
	text-align:	center;
	border-left: 1px solid gray;
	border-bottom: 1px solid gray;
}

.menu {
	border-top: 1px solid silver;
	border-left: 1px solid silver;
	border-right: 1px solid silver;
	position: absolute;
	left:	2%;
	right:	2%;
	width: 95%;
	text-align:center;
}

.menu a{
	display:block;
	color: #666666;
	font-size: 11px;
	background-color:#EEEEEE;
	border-bottom: 1px solid silver;
	height:	14;
	width: 100%;
}

.menu a:hover {
	background-color: #D0D0D0;
}

#begruessung {
	position:	absolute;
	bottom:		0;
	left:		2;	
	font-weight: bold;
	font-size:	11px;
	cursor:default;
}

#datum {
	position:	absolute;
	bottom:		0;
	right:		2;	
	font-weight: bold;
	font-size:	11px;
	cursor:default;
}

#firma {
	position:	absolute;
	bottom: 16;
	width:	100%;
	text-align:	center;
	font-weight: bold;
	font-size:	13px;
	text-decoration: underline;
	cursor:default;
}

#menu {
	position: absolute;
	top: 50;
	bottom: 20;
	left: 6;
	width: 140;
	background-color: white;
	border-left: 1px solid gray;
	border-right: 1px solid silver;
	text-align: center;
}

#main {
	position: absolute;
	top: 50;
	bottom: 20;
	left: 148;
	right: 6;
	margin-top:	2px;
	margin-left:	2px;
	margin-bottom:	2px;
	background-color: #F0F0F0;
	border-right: 1px solid gray;
	overflow:	auto;
}

#fuss {
	position: absolute;
	bottom: 6;
	left: 6;
	right: 6;
	height: 14;
	background-color: white;
	text-align: center;
	font-size: 10px;
	border: 1px solid gray;
}
</style>
</head>

<body>
<div id="top">
<div id="topmenu">Einstellungen
Abmelden
?
</div>
<div id="firma">Firmenname</div>
<div id="begruessung">Guten Tag, User !</div>
<div id="datum">Dienstag, den 83. Januar 2005</div>

</div>
<div id="menu">
Menu
<div class="menu">
Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
</div>
</div>
<div id="main">Main</div>
<div id="fuss"><a href=#>link</a></div>
</body>
</html>

Das komplette Design mit CSS zu gestalten ist für mich noch ziemlich neu, daher die Probleme...

Hat jemand eine Idee, wie man das Problem am besten lösen kann?
Mit Zitat antworten
Sponsored Links