CSS Layout mit fester und variabler Größe

Xavier · #1 (**permalink**) 18.01.2005, 11:19

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?

mikey · #2 (**permalink**) 18.01.2005, 11:35

"alles sichtbar"

heißt das nicht auch, dass du die Boxen jeweils zentriert in der Bildschirmmitte(zumindest horizontal) haben möchtest ?

warum dann position : absolute ?

Xavier · #3 (**permalink**) 18.01.2005, 11:40

Wußte nicht, wie ich das sonst machen soll...
Wie würdest du das denn machen?

magick · #4 (**permalink**) 18.01.2005, 13:12

Immer Einheiten angeben --> http://www.css4you.de/einheiten.html

Zentrieren geht z.B. so:

Code:

#body {
   text-align:center;
}
#top {
	text-align:left;
	position:relative;
	width:640px;
	margin:0 auto;
}

Xavier · #5 (**permalink**) 18.01.2005, 13:24

Mhh...
Müsste bei

Zitat:

margin:0 auto;

nicht auch eine Angabe zu 0 gemacht werden?

Habe jetzt mal überall px hinzugefügt, wo ich es vergessen hatte, aber das ändert nichts im IE. Denke die Browser machen automatisch ein px daraus, wenn man's nicht setzt, ist aber schlechter Prog-Stil - schon klar

Also das Problem, warum das im IE nicht funzt ist folgendes:

habe ja für "top" und "bottom" jeweils eine Angabe gemacht. FF macht das Fenster entsprechend groß, also z.B. bei

Code:

top: 50px;
bottom: 20px;

geht das Fenster vom oberen Rand - 50px bis zum unteren Rand + 20px.
Der IE macht das nicht. Da ist die Höhe vom Inhalt abhängig.

OK, Problem erkannt, aber Lösung hab ich leider keine...

ulle · #6 (**permalink**) 18.01.2005, 13:27

Code:

selector { /* Block-Level z.B. <div> */

      width: 30em;  /* em-Einheit ~ dem Schriftgrad angepasst */
      
      margin: 0 auto;

}

Das vorher gezeigte ist für den Quirks-Mode bzw. IE5

ulle · #7 (**permalink**) 18.01.2005, 13:30

Zitat:

Denke die Browser machen automatisch ein px daraus

Nein, warum auch - wo kein Abstand gewollt sollte auch kein Pixel auto. erfolgen.....

Pixel sind schlecht, nur bei Bilder sinnvoll - also feste Formate

Zitat:

habe ja für "top" und "bottom"

Aufziehen von Containern ist im z.B. IE nicht möglich

Xavier · #8 (**permalink**) 18.01.2005, 13:57

Also ich habe das jetzt nochmal etwas verändert:

Code:

#top {
	height: 4em;
   	border: 1px solid gray;
   	background-color: white;
}

#menu {
	float:left;
	width:	13em;
	height:	44em;
	background-color:	white;
	text-align:	center;
	border-left:	1px solid gray;
	border-right:	1px solid silver;
}

#main {
	height:	44em;
	overflow:	auto;
	background-color:	#C0C0C0;
	border-right:	1px solid gray;
}

#fuss {
	clear: both;
	text-align:	center;
	background-color:	white;
   	border: 1px solid gray;
}

Hier anzusehen.

Allerdings bekomme ich es nicht hin, dass die mittleren Felder (menu und main) sich so anpassen, dass das Fenster immer komplett ausgefüllt ist.

Hoffe das Problem ist jetzt allen klar und dass jemand eine Lösung kennt!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Css 3 Seiten Layout will net so :)	nova_rs	CSS	1	30.03.2010 15:54
CSS Layout Komplex	yanu	CSS	0	01.04.2009 20:27
CSS Layout für Fortgeschrittene	StefanE	CSS	2	15.01.2009 07:39
CSS layout was 'mit geht'	Iceman*	CSS	2	30.12.2005 08:36
includes bei css layout	dan	CSS	2	10.03.2004 18:21