Mittels CSS Seite 'sauber' aufteilen

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen!

Ich sollte eine Seite wie folgt aufteilen:

Oben: Titel & Navigation
Unten: Seitenrahmen
Mitte links: Seitentext
Mitte rechts (100px): Hinweise etc

Das ganze hört sich relativ einfach an. Die Problematik die ich habe ist, dass ich eine feste Höhe für Titel & Navigation habe und ausserdem für den Seitenrahmen. Auch den mittleren Bereich zu trennen ist relativ easy, da ja die Breite der Hinweise (100px) bekannt ist.

Was ich aber nicht lösen kann ist die Höhendefinition des mittleren Bereiches. Als Beispiel hat er ja top: 100px; bottom: 25px; width: 100%. Dies funktioniert auch einwandfrei mit dem Firefox, aber der IE hat offensichtlich so seine Probleme wenn man die Höhe nicht fix angibt. Nun habe ich natürlich eine Lösung gefunden, welche für den IE Anhand der Seitenwerte das ganze berechnen kann. Das Problem ist aber, dass dies (obwohl im CSS eingebunden) schlussendlich auf Javascript basiert. Logische Konsequenz: Wenn Javascript deaktiviert ist geht es nicht…

Gibt es eine sinnvolle Möglichkeit eine Seite nur mittels CSS grob gesagt in drei Teile (oben fix / mitte variabel / unten fix) zu teilen ? Das würde mir dann auch schon helfen :smile:

Liebe Gruss

Chris

#2

Hallo

Warum nimmst du keine Frames od. Tabellen?

Hier ein Beispiel mit Tabellen

Oberer Teil
Flex. Mitte L
Flex. Mitte R
Unten

#3

Hallo :smile:

Weil ich mich weiterentwickeln will. Mit Frames und Tabellen arbeite ich seit Jahren… und gerade was Crossbrowserkompatibilität angeht sind Tabellen mehr als mühsam :wink:

Darum möchte ich das ganze mittels CSS machen :smile:

Gruss
Chris

#4

Tja

Alternativ kenn ich nur noch „span“ – Tags, aber geht nur im IE und mit Prozentuellen Größenangaben.

Text 1
Text 2
Text 3

Text 1
Text 2
Text 3

Text 1
Text 2
Text 3

Text 1
Text 2
Text 3

#5

Uhu :wink:

Genau das ist das Problem…

Die Seite sollte dann etwa so aussehen:

++++++++++++++++++++++++++++++++++++
+ A +
++++++++++++++++++++++++++++++++++++
+ B + C +
+ + +
+ + +
++++++++++++++++++++++++++++++++++++
+ D +
++++++++++++++++++++++++++++++++++++

Definitionen:

A: Breite 100% - Höhe 20px - oben angedockt
B: Breite Variabel - Höhe Variabel
C: Breite 100px - Höhe Variabel
D: Breite 100% - Höhe 20px - unten angedockt

Und das Problem ist vorallem B & C… das mit den variablen Werten funtkioniert einfach nicht richtig nur mittels CSS :frowning:

Gruss
Chris

#6

Das „Höhen“ – Problem lies sich bei einer meiner Seiten auch nicht lösen (2 Inline frame in einem 3er Frameset)

Ich hab’s dann mit javascript gelöst:

if (window.innerHeight){
hoehe=window.innerHeight;
}else{
hoehe=document.body.offsetHeight;
}
hoehe -= hoehe - 250;
document.write(’<xxxx height="’+hoehe+’">’);

#7

Hallo nochmal :wink:

Ja genau das mit der Höhe ist Schrott :smile:
Es gibt schon eine Möglichkeit, damit man dieses Problem überwinden kann. Dies setzt aber direkt in CSS Javascript voraus - und das möchte ich vermeiden :smile:

Gruss
Chris

#8

Schau mal unter http://css.fractatulum.net/sample/layout1format.htm

Ich glaub dass das hin kommt

#9

Re^7: …Falsche Reihenfolge :wink:
Also nochmal

Schau mal unter http://css.fractatulum.net/sample/lay…
Ich glaub dass das hin kommt

1 Like
#10

Hallo :smile:

Danke für den Link!
Aber auch dort gibt es keine brauchbare Lösung, wie ich ein Layout oben und unten fixieren kann und dann den mittleren Bereich zoombar habe. Klar… es hat ein Beispiel… aber dieses funktioniert nur mit prozentualen Angaben :frowning:

Ach menno… es muss doch dafür eine Lösung geben :frowning:

Gruss
Chris

#11

Gibt es eine sinnvolle Möglichkeit eine Seite nur mittels CSS
grob gesagt in drei Teile (oben fix / mitte variabel / unten
fix) zu teilen ? Das würde mir dann auch schon helfen :smile:

Also mit fallen dazu ganz spontan „position:fixed;“ und „position:absolute;“ in Verbindung mit div-Elementen ein.
Mit beiden Möglichkeiten kannst du bestimmte Breiten- oder Höhenangaben variabel lassen und so eine Größenanpassung an das Browserfenster ermöglichen. Scrollleisten in einem div mit zu viel Inhalt im mittleren Teil sind auch ganz interessant.
Der IE macht da zwar ziemlich sicher Probleme, aber die lassen sich mit einem zweiten Stylesheet nur für IE lösen, das du nach dem ersten mit Conditional Comments einbindest und das ggf. Werte aus dem ersten überschreibt. Genauso kannst du mit Conditional Comments auch weitere Elemente nur im IE einfügen, falls das nötig sein sollte.

Auf die schon genannten Tabellen und Frames würde ich auf jeden Fall verzichten, das ist übelster Stil und außerdem viel komplizierter, größer und unübersichtlicher.

#12

Re^9: …Falsche Reihenfolge :wink:
Hi Chris,

hier wird glaub ich ganz gut auf Dein Problem eingegangen, da auch gezeigt wird, wie man die Anzeigeunterschiede zwischen IE und i.e. Firefox ausbügelt.

http://de.selfhtml.org/css/layouts/index.htm

Gruss

Ferdi

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]