zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Layout mit fester und variabler Größe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.01.2005, 12:19
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
  #2 (permalink)  
Alt 18.01.2005, 12:35
Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard

"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 ?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.01.2005, 12:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.01.2005
Beiträge: 162
Xavier befindet sich auf einem aufstrebenden Ast
Standard

Wußte nicht, wie ich das sonst machen soll...
Wie würdest du das denn machen?
Mit Zitat antworten
  #4 (permalink)  
Alt 18.01.2005, 14:12
Benutzerbild von magick
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 05.09.2004
Ort: Hamburg
Beiträge: 302
magick befindet sich auf einem aufstrebenden Ast
Standard

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;
}
__________________
Gruss, Merlin
xw3.org - light your style
Mit Zitat antworten
  #5 (permalink)  
Alt 18.01.2005, 14:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.01.2005
Beiträge: 162
Xavier befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #6 (permalink)  
Alt 18.01.2005, 14:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #7 (permalink)  
Alt 18.01.2005, 14:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 18.01.2005, 14:57
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.01.2005
Beiträge: 162
Xavier befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:12 Uhr.