pixellayout mit fixierten Bereichen

[Melanu Rinots]

Hallo, ich grüße Euch!

Meine Frage:

Ist es möglich ein pixelgenaues Layout (welches sich nicht den Bildschirmgrößen anpasst) zentriert anzeigen zu lassen UND trotzdem fixierte Bereiche (position:fixed) in ihm zu haben?

(Dh. ein Layout wie z.B.ARD, nur mit fixierten Bereichen, wie z.B. eine Navigationsleiste.)

Ein pixelgenaues Layout würde ich über eine Box mit definierter Breite und {margin:0px auto;} schreiben.

Das fixieren bestimmter Elemente, welche immer im Bereich der Box bleiben, aber trotzdem nicht mitscrollen gelingt mir nicht.

MfG

Melanu

[suit]

(Dh. ein Layout wie z.B.ARD, nur mit fixierten Bereichen, wie z.B. eine Navigationsleiste.)

Ich sehe keine fixierten Elemente - kannst du bitte einen Link zu einer entsprechenden Unterseite posten?

Das fixieren bestimmter Elemente, welche immer im Bereich der Box bleiben, aber trotzdem nicht mitscrollen gelingt mir nicht.

Definiere "gelingt mir nicht"

[Melanu Rinots]

Ich sehe keine fixierten Elemente - kannst du bitte einen Link zu einer entsprechenden Unterseite posten?

Das meine ich ja gerade: Auf der ARD-Seite gibt es keine fixierten Bereiche.
Ich möchte fragen ob man das grundsätzlich überhaupt kombinieren kann: pixelgenaues znetriertes Layout UND fixierte Elemente.

Ich kann keine Beispielseite nennen.

Das fixieren bestimmter Elemente, welche immer im Bereich der Box bleiben, aber trotzdem nicht mitscrollen gelingt mir nicht.

Definiere "gelingt mir nicht"

Wenn ich eine zentrierte Box mit fester Breite definiere und dann ein Element darin fixiere, so löst es sich aus der Box und orientiert sich am Browserfenster.

Ich möchte aber gerne das es in der Box bleibt (welche dann bei viel Text auch gescrollt werden kann) und trotzdem fixiert ist (und somit unbeeinflusst vom scrollen).

Mein Ansatz für eine fixierte Navigationsleiste links in einer scrollbaren zentrierten Box wäre:

den zu fixierenden Bereich in die Mitte des Browser setzen und dann um die Hälfte der Breite der scrollbaren Box nach links verschieben.

Ist dies grundsätzlich möglich?
Und wenn ja dann wie?

MfG

Melanu Rinots

[suit]

Mein Ansatz für eine fixierte Navigationsleiste links in einer scrollbaren zentrierten Box wäre:

den zu fixierenden Bereich in die Mitte des Browser setzen und dann um die Hälfte der Breite der scrollbaren Box nach links verschieben.

Ist dies grundsätzlich möglich?
Und wenn ja dann wie?

Der von dir genannte ansatz entspricht dem, was ich auch vorgeschlagen hätte zu tun.

Ansonsten kannst du es Browserübergreifend mit JavaScript lösen, da der Internet Exploder in einigen alten Versionen nicht mit position: fixed umgehen kann.

[Melanu Rinots]

Der von dir genannte ansatz entspricht dem, was ich auch vorgeschlagen hätte zu tun.

Wie setze ich den Ansatz konkret um?

Mittig bekomme ich ein fixierte Box über: {left:50%;}. Doch wie verschiebe ich die Box dann noch um einen bestimmten Betrag nach links?

Ansonsten kannst du es Browserübergreifend mit JavaScript lösen, da der Internet Exploder in einigen alten Versionen nicht mit position: fixed umgehen kann.

»»

Hast du da zufällig schon eine grundsätzliche Idee, oder gibt es sogar entsprechende Skripts schon im Internet?

Und noch eine Frage: Ist bei allen IE Versionen JavaScript grundsätzlich aktiviert?

MfG

Melanu Rinots

[Der Martin]

Hallo,

Und noch eine Frage: Ist bei allen IE Versionen JavaScript grundsätzlich aktiviert?

das kommt auf die Benutzer an.
Grundsätzlich ist Javascript bei allen IE-Versionen in der Defaulteinstellung aktiviert, wie bei den anderen Browsern auch. Aber wie bei den anderen Browsern auch, gibt es natürlich immer ein paar User, die es aus verschiedensten Gründen abschalten.
Und solange selbst Microsoft beim Auftreten von Sicherheutslücken im IE gern pauschal zum Deaktivieren von Javascript rät, muss man mit einer gewissen Quote rechnen, die sich aber vermutlich im einstelligen Prozentbereich bewegt.

So long,
 Martin

[Detlef G.]

Hallo Melanu

Mittig bekomme ich ein fixierte Box über: {left:50%;}. Doch wie verschiebe ich die Box dann noch um einen bestimmten Betrag nach links?

Für margin sind negative Werte erlaubt. (Beispiele mit position:absolute)
Bedenke aber auch, was passiert, wenn das Browserfenster zu schmal ist?

Ansonsten kannst du es Browserübergreifend mit JavaScript lösen, da der Internet Exploder in einigen alten Versionen nicht mit position: fixed umgehen kann.

Das denke ich nicht, die IE-Hacks für fixierte Elemente dürften auch in dem Fall anwendbar sein.

Bitte sei doch so gut, und frage nicht in verschiedenen Threads zu Teilaspekten deines Problems nach, sondern versuche uns mitzuteilen,was du im Endeffekt erreichen willst. So stellen sich einige Probleme der IE-Hacks für fixierte Bereiche überhaupt nicht, wenn eine feste Breite vorgegeben ist.

Am besten, du verlinkst uns eine Skizze mit einer Beschreibung deines Ziels, damit unsere Vorschläge dann auch für dein spezielles Problem passen.

Auf Wiederlesen
Detlef

[Melanu Rinots]

Hallo Detlef,

Danke für Deine vorzügliche Hilfe (das meine ich Ernst).

Bitte sei doch so gut, und frage nicht in verschiedenen Threads zu Teilaspekten deines Problems nach, sondern versuche uns mitzuteilen,was du im Endeffekt erreichen willst. So stellen sich einige Probleme der IE-Hacks für fixierte Bereiche überhaupt nicht, wenn eine feste Breite vorgegeben ist.

Am besten, du verlinkst uns eine Skizze mit einer Beschreibung deines Ziels, damit unsere Vorschläge dann auch für dein spezielles Problem passen.

Ich habe mal kurz eine Skizze gemacht:

alternativer Link

In einem Interesse wäre es dieses Layout für alle moderne Broser und für den IE ab Version 6 umzusetzen.

Melanu Rinots

[Melanu Rinots]

Hallo,

ich muss jetzt leider los. Morgen werde ich wiederkommen.

Für Vorschlage wäre ich sehr dankbar.

Vielleicht schildere ich nocheinmal meinen Stand:

ich möchte folgendes Layout umsetzen (für die moderne Browser und den IE ab Version 6).

Mir gelingt folgendes:

a) ein zentriertes pixelgenaues Design (ohne fixierte Bereiche)(nach unten anpassungsfähig)

b) ein zu den Seiten flexibles Design mit fixiertem Kopfbereich und einer fixierten Navigation am linken Rand.

Wie kann ich die beiden Ansätze kombinieren: ein pixelgenaues, zentriertes Design mit fixierten Bereichen (logischer Weise im zentrieten Bereich und nicht irgendwo am linken Rand rumschwebend)?

Ich wünsche Euch einen guten Abend und bin gespannt auf Morgen

Melanu

[Detlef G.]

Hallo Melanu

Wie kann ich die beiden Ansätze kombinieren: ein pixelgenaues, zentriertes Design mit fixierten Bereichen (logischer Weise im zentrieten Bereich und nicht irgendwo am linken Rand rumschwebend)?

Erstmal nur ein kleiner Tip:
Wenn du bei position:fixed oder position:absolute nur den Wert für top (bzw. bottom) angibst, aber keinen für left (bzw. right), wonach wird das Element dann horizontal ausgerichtet?

Anmerkung:
Im IE6 wird bei zu schmalem oder zu niedrigem Browserfenster der Scrollbalken durch die fixierten Elemente überdeckt. Eine praktikable Lösung für dieses Problem ist mir bisher nicht eingefallen.
(Das dürfte sich nur mit Hilfe von Javascript vermeiden lassen.)

Auf Wiederlesen
Detlef

[Melanu Rinots]

Hallo Detlef,

ich habe es jetzt geschafft das Layout für die modernen Browser umzusetzen. Ich poste es mal.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="de" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<title>Unbenanntes Dokument</title>
<style type="text/css">

body	{
	background-color:#FF3;
	margin:0px;
	padding:0px;
}

#kopf	{
	position:fixed;
	top:0px;
	width:990px;
	height:120px;
        left:50%;
	margin-left:-495px;
	background-color:#C00;
}

#navigation	{
	width:145px;
	position:fixed;
	top:140px;
	left:50%;
	margin-left:-495px;
	background-color:#00F;
}

#inhaltsbereich {
	width:990px;
	margin:120px auto;
	margin-bottom:0px;
	padding:0px;
	background-color:#93F;
}

#inhalt	{
	width:700px;
	margin:0px auto;
	padding:0px;
	background-color:#FFF;
}

#inhalt p	{
	padding-top:40px;
	padding-left:30px;
	padding-right:30px;
	padding-bottom:0px;
	margin:0px;
	text-align:justify;
}

#kopf h1	{
	text-align:center;
	color:#000;
}

</style>
</head>

<body>

<div id="kopf">
<h1>KOPF</h1>
</div>

<div id="navigation">

<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Lorem</li>

<li>Ipsum</li>
<li>Lorem</li>
<li>Ipsum</li>
</ul>

</div>

<div id="inhaltsbereich">

<div id="inhalt">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
</p>

</div>

</div>

</body>
</html>

Meine Frage an Dich lautet also: Wie setze ich das ganze am Besten für den IE um (bestenfalls natürlich ab Version 5.5)?

Erstmal nur ein kleiner Tip: Wenn du bei position:fixed oder position:absolute nur den Wert für top (bzw. bottom) angibst, aber keinen für left (bzw. right), wonach wird das Element dann horizontal ausgerichtet?

Leider werden die Elemente dann immer an den linken Bildschirmrand gequetscht (zumindest bei meinen Versuchen mit position:fixed).

Anmerkung: Im IE6 wird bei zu schmalem oder zu niedrigem Browserfenster der Scrollbalken durch die fixierten Elemente überdeckt. Eine praktikable Lösung für dieses Problem ist mir bisher nicht eingefallen. (Das dürfte sich nur mit Hilfe von Javascript vermeiden lassen.)

Kennst Du schon so ein Skript.

Mit herzlichen Grüßen

Milon

[Detlef G.]

Hallo Melanu

ich habe es jetzt geschafft das Layout für die modernen Browser umzusetzen.

Zählt IE ab 7 in der Hinsicht auch zu den „modernen Browsern”?
(Ich  habe zur Zeit weder IE7 noch 8 zum Testen hier.)

Ich poste es mal.

Viel Code!
Besser ist es, das irgendwo hoschzuladen und hier zu verlinken, als so riesige Quelltexte zu posten.

Hast du dir mal angesehen, was bei schmalerem Browserfenster passiert?
Deine Navigation wird unerreichbar!

Meine Frage an Dich lautet also: Wie setze ich das ganze am Besten für den IE um (bestenfalls natürlich ab Version 5.5)?

Für IE6 hatte ich das schnell. Dürfte im IE5.5 auch nicht zu sehr zerschossen sein, wenn auch ohne fixierte Elemente.

Als erstes sorgen wir dafür, dass <html> und <body> den gesamten Viewport komplett ausfüllt.

  
* html, * html body {  
  margin: 0;  
  padding: 0;  
  height: 100%;  
  width: 100%;  
}  

Damit keine doppelten Scrollbalken erscheinen verbieten wir es <html>.

  
* html {  
  overflow: hidden;  
}  

Dann sorgen wir dafür, dass <body> bei Bedarf Scrollbalken erzeugt. Falls wir auch kürzere Seiten absichern wollen, dann können wir dafür sorgen, dass mindestens ein vertikaler Geisterscrollbalken erzeugt wird. Und damit auch der 5er IE zentriert, noch ein center.

  
* html body {  
  overflow: auto;  
/*  overflow-y:scroll; */  
  text-align: center;  
}  

Für die alten IEs gibt es statt der fixen eine absolute Positionierung, die sich bei IE ab 6 nur auf positionierte Vorfahren oder den Viewport bezieht. Außerdem heben wir das center von oben wieder auf.

  
* html #kopf, * html #navigation {  
  position: absolute;  
  text-align: left;  
}  

Nur für den 6er IE müssen wir noch die typische Breite des Scrollbalkens ausgleichen (495 + 16/2 = 503).

  
* html b\ody #kopf, * html b\ody #navigation{  
  margin-left: -503px;  
}  

Weil die alten IEs in dem Fall margin-top ignorieren, machen wirs eben mit padding. (Das könnte auch statt über den Hack direkt für alle Browser so formatiert werden.)

  
* html #inhaltsbereich {  
  margin: 0 auto;  
  padding-top: 120px;  
}  

Und nochmal das center aufheben, dass wir für die 5er IEs gesetzt haben.

  
* html #inhalt {  
  text-align: left;  
}  

Ich hoffe, dass ich nichts übersehen habe.
Die text-align für 5er IE können auch ohne Hack direkt zu den Regeln für moderne Browser geschrieben werden. Dort sind sie zwar nicht nötig, schaden aber auch nicht.

Wenn du bei position:fixed oder position:absolute nur den Wert für top (bzw. bottom) angibst, aber keinen für left (bzw. right), wonach wird das Element dann horizontal ausgerichtet?

Leider werden die Elemente dann immer an den linken Bildschirmrand gequetscht (zumindest bei meinen Versuchen mit position:fixed).

Ja, weil sie direkt im <body> sind, der hat die volle Breite.

Kennst Du schon so ein Skript.

Auch deshalb hat meine Antwort so lange gedauert.
Ich habe meinen Ansatz etwas weiter verfolgt, damit die Navigation nicht unerreichbar wird, und dazu einen Entwurf für so ein Script verfasst.

Beispiel

Auf Wiederlesen
Detlef

[Melanu Rinots]

Hallo Detlef,

vielen, vielen Dank für Deine Hilfe.
Die Seite ist nun genau nach meinen Vorstellungen. Ab IE Version 6 wird alles sauber angezeigt.

Auch ich habe einiges ausprobiert. Zuletzt habe ich alle IE Versionen (IE5-IE8)in den Quircksmodus gebracht um dann nur eine Optimierung vornehmen zu müssen, dass gelang auch recht gut, ist aber nicht vergleichbar mit Deiner schlichten und übersichtlichen Variante.

Ich habe gerade versucht in Deinen Quellcode noch eine Lösung mit fixierten Elementen für den IE 5.5 einzubauen (IE 5 kann ich leider nicht testen). Gelang mir leider noch nicht zufriedenstellend:

- entweder habe ich fixierte Elemente und die Scrollbar wie gewünscht am rechten Rand, aber leider keinen zentrierten Inhaltsbereichm mit fester Breite

- oder fixierte Elemente und eine fixierte Breite, aber leider nur eine Scrollbar direkt am zentrieten Inhaltsbereich (d.h. bei zu kleinem Fenster sogar teilweise 2 Scrollleisten).

Vielleicht kannst Du mir ja noch einen Tip geben. (Das Layout mit Script, wie Du es verfasst hast ist zwar eigentlich schon ausreichend, doch wäre es nicht schlecht zumindest dem IE5.5 noch fixierte Bereiche zu geben.)

Ansonsten probiere ich noch ein bisschen selbst herum.
Das Script würde ich einfach eins zu eins übernehmen, oder soll ich erst eine Lizenz bei Dir erwerben? :-)

Also nochmal vielen Dank

Dein Melanu

[Detlef G.]

Hallo Melanu

vielen, vielen Dank für Deine Hilfe.
Die Seite ist nun genau nach meinen Vorstellungen. Ab IE Version 6 wird alles sauber angezeigt.

Welche Variante, deine mit den eingefügten CSS-Schnipseln oder meine verlinkte Version?
(Übrigens, das JavaScript habe ich noch so angepasst, dass es auch mit deiner Version funktionieren müsste.)

Ich habe gerade versucht in Deinen Quellcode noch eine Lösung mit fixierten Elementen für den IE 5.5 einzubauen (IE 5 kann ich leider nicht testen). Gelang mir leider noch nicht zufriedenstellend:

Im Quirksmodus des IE6, der ja dann dem IE5.5 entspricht, werden bei position:absolute die Werte für top und left nicht nur auf das nächste positionierten Vorfahrenelement sondern auch auf das nächste, bei dem ein von visited abweichender Wert für overflow festgelegt ist.
Damit fällt mir da auch keine zufriedenstellende Lösung ein.

Das Script würde ich einfach eins zu eins übernehmen, oder soll ich erst eine Lizenz bei Dir erwerben? :-)

Das war mal wieder ein Anlass meine verkümmerten JavaScriptkentnisse etwas aufzufrischen. Und wie es so ist, mir kommen gleich wieder viele Gedanken, wie es noch verbessert und universeller gestaltet werden könnte (für mehrere Elemente, für beide Scrollbalken, auch ohne das Div #inhaltsbereich funktionierend). In nächster Zeit werde ich aber wohl nicht dazu kommen.

Auf Wiederlesen
Detlef

[Melanu Rinots]

Welche Variante, deine mit den eingefügten CSS-Schnipseln oder meine verlinkte Version?

Natürlch Deinen Variante!

Aus meiner Variante werde ich wahrscheinlich etwas für den IE5.5 einbauen, leider funktioniert es aber noch nicht ganz zufriedenstellend. Wenn es mir gelungen ist kann ich es ja ins Netz stellen und dann kannst Du eventuell noch einmal etwas dazu sagen . . .

Übrigens, kannst Du mir einen guten Freehoster für Testzwecke empfehlen?
Kilu.de ist leider zur Zeit nicht erreichbar . . .

Melanu

[Detlef G.]

Hallo Melanu

Übrigens, kannst Du mir einen guten Freehoster für Testzwecke empfehlen?
Kilu.de ist leider zur Zeit nicht erreichbar . . .

Kann ich leider nicht, weil ich üblicherweise einen demo-Ordner auf meinem Webspace verwende.

Auf Wiederlesen
Detlef

[Melanu Rinots]

Ich grüße Dich Detlef,

ich habe in die von Dir geschriebene Beispielseite noch etwas code für den IE 5 eingefügt (ich kann nur Version 5.5 testen, vielleicht kannst Du ja mal sagen, wie sie in Version 5.0 aussieht?). Die Seite sieht im IE5.5 auch gut aus, wenn man einen einigermaßen großen Bildschirm besitzt. Wenn man aber den Anzeigebereich verkleinert treten die zwei bekannten Probleme auf:

1. der fixierter obere Balken verdeckt die Scrollleiste

&

2. die fixierte Navigation verschwindet bei zu kleinem Fenster

Hier also die Seite:
Layout

Für die anderen Browser und den IE ab Version 6 hast Du beide Problem ja lösen können. Hast Du auch bezüglich des IE 5 noch eine Idee? Könnte man den IE 5 in das von Dir geschriebene Skript mit einbeziehen?

Zum zweiten Problem war eine meiner Überlegungen, dass man den scrollbaren Bereich garnicht bis unter die Navigation legen braucht und so die Navigation vielleicht statisch positionieren könnte. Aber dann wüsste ich nicht mehr wie man das zentrieren der Seite behält.

Hast Du noch eine bessere Idee? (Wenn es nicht anders geht wäre mir auch eine Scrollbar direkt am inneren Textfeld recht.)

Und dann habe ich noch eine Frage:

Damit der IE 5 in meiner Seite die vorher für die anderen geschrieben Stylesheets nicht beachtet habe diese in die bestimmten Conditional Comments gesetzt (Downlevel-revealed Conditional Comments). Nach folgendem schema:

<!--[if lt IE 7]><!--> Anweisungen für IE vor Version 7 und andere Browser <!--<![endif]-->

( . . . [if !IE 5] . . . )

Gibt es noch eine schickere Möglichkeit zum ausklammern von IE-Browsern.

Mit herzlichen Grüßen
Melanu

[Detlef G.]

Hallo Melanu

… vielleicht kannst Du ja mal sagen, wie sie in Version 5.0 aussieht?

Das kann ich morgen Abend tun, ich habe unter Linux IE 5 bis 6, bin aber gerade unter Windows und sollte endlich ins Bett kommen (ja mein Urlaub ist vorbei).

Für die anderen Browser und den IE ab Version 6 hast Du beide Problem ja lösen können. Hast Du auch bezüglich des IE 5 noch eine Idee? Könnte man den IE 5 in das von Dir geschriebene Skript mit einbeziehen?

Das müsste ich dann mal kontrollieren, inwieweit das Script auch für IE <6 geeigent ist. Bisher hatte ich es nur für IE6 vorgesehen, weil es außer für IE6 nicht nötig ist (der 7er versteht position:fixed und für 5er war keine Fixierung vorgesehen).

Zum zweiten Problem war eine meiner Überlegungen, dass man den scrollbaren Bereich garnicht bis unter die Navigation legen braucht und so die Navigation vielleicht statisch positionieren könnte. Aber dann wüsste ich nicht mehr wie man das zentrieren der Seite behält.

Dabei könnte dir das falsche Boxmodell der IE <6 helfen (entspricht dem Quirksmodus von IE6). Dazu wäre dein Ansatz teilweise sogar besser geeignet. Inhaltsbereich in ein zusätzliches Element (oder nicht #seite oder #inhaltsbereich sondern #inhalt selbst zentrieren) packen, das bekommt ein padding-top der Kopfhöhe, 100% Höhe (durch den Boxmodelbug wird padding in die Höhe eingerechnet) und overflow:auto (body dann natürlich auf overflow:hidden). Der Scrollbalken beginnt dann zwar erst unter dem Kopf, dürfte aber am rechten Rand sein.
Kopf und Navigastion müssten außerhalb dieses Elements stehen und separat ausgerichtet werden.
Dann wäre auch kein Script dafür erforderlich.

(Wenn es nicht anders geht wäre mir auch eine Scrollbar direkt am inneren Textfeld recht.)

Das dürfte relativ einfach sein, wenn du für 5er IEs body auf overflow:hidden setzt und dafür #inhaltsbeich auf height:100% und overflow:auto setzt, dürfte nur nauch eine kleine Breitenanpassung erforderlich sein.

Damit der IE 5 in meiner Seite die vorher für die anderen geschrieben Stylesheets nicht beachtet habe diese in die bestimmten Conditional Comments gesetzt (Downlevel-revealed Conditional Comments). Nach folgendem schema:

<!--[if lt IE 7]><!--> Anweisungen für IE vor Version 7 und andere Browser <!--<![endif]-->

( . . . [if !IE 5] . . . )

Gibt es noch eine schickere Möglichkeit zum ausklammern von IE-Browsern.

Für eine Beispiel oder Testseite ist CSS und Javascript im Dokument selbst ja ganz praktisch, für die endgültige Version sollten diese dann aber ausgelagert werden.
Wenn man dies tut, dann ist es nicht mehr so toll, mittels Conditional Comments noch mehrere verschiedene CSS-Dateien einzubinden. Auch deshalb habe ich in meinem Beispiel den Star-HTML-Hack für IE6 und nicht Conditional Comments verwendet. Einpaar Hacks findest du in SELFHTML: Spezielle Browserweichen (CSS-Hacks), eine umfangreiche Sammlung für verschiedenste, auch noch ältere Browser findest du bei Kristof Lipferts CSS für alle Browser.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Melanu

1. der fixierter obere Balken verdeckt die Scrollleiste

Natürlich, denn das Javascript ist ja nur für IE 6 geschrieben.

2. die fixierte Navigation verschwindet bei zu kleinem Fenster

Oder sie verdeckt dann den Text. Es gibt wohl kaum eine vernünftige Möglichkeit, eine fixe Positionierung nur in eine Richtung wirken zu lassen. Bei der Navigation z.B. wäre es gut, wenn sie nur in der Höhe fixiert wäre, seitlich aber mitscrollt, so dass sie immer auf dem Balken bleibt.

Hier also die Seite:
Layout

Ich sehe keinen nennenswerten Unterschied zwischen IE 6, 5.5 und 5.0. Auch bei schmalerem Fenster verdeckt im 5.0er IE der Kopf die Scrolleiste nie sichtbar, sie ist aber oft im dem Bereich nicht greifbar.

Für die anderen Browser und den IE ab Version 6 hast Du beide Problem ja lösen können. Hast Du auch bezüglich des IE 5 noch eine Idee? Könnte man den IE 5 in das von Dir geschriebene Skript mit einbeziehen?

Nein, ich halte nicht viel davon, dieses Script zu verwenden, wenn du auch die 5er IEs noch unterstützen willst. Es war ja nur entstanden, weil du den 6er unbedingt im Standardmodus verwenden wolltest und mir dazu erstmal keine andere Lösung einfiel. Wie ich bereits schrieb, finde ich es sinnvoller, den IE 6 in den Quirksmodus zu schicken, dann sind 90% der Anpassungen für IE 5.0 bis 6 identisch.

Hast Du noch eine bessere Idee? (Wenn es nicht anders geht wäre mir auch eine Scrollbar direkt am inneren Textfeld recht.)

Naja, dann schau dir meine drei Beispiele an. Mir hat es keine Ruhe gelassen, dass es doch Lösungen ohne Javascript geben müsste. Die drei Beispiele schicken IE 6 in den Qurksmodus und dürften in IE 5.0, IE 5.5 und IE 6 so gut wie identisch aussehen und funktionieren und teilweise auch genauso, wie in vernünftigen Browsern. (Kurz getestet unter Windows in FF 2.0.0, FF 3.0.13, FF 3.5.2, IE 6.0 und Opera 9.27, unter Linux in FF 3.0.13 und Opera 9.27, dort unter Wine in IE 5.00, IE 5.50 und IE 6.0.) Bei FF 3.0.13 unter Linux verschwindet beim verkleinern des Fensters irgendwann der senkrechte Scrollbalken, scheint aber ein FF-Linux-Problem zu sein, es passiert auch auf jeder anderen Seite, die ich getestet habe.

Als erstes hatte ich diesen Versuch, funktioniert zwar, aber gefiel mir nicht, also folgte dieser Versuch. OK, es sieht weitgehend identisch aus, Mist ist aber, dass die Navigation bei kleinerem Fenster so schnell nach rechts verschwindet, also nochmal ein wenig überlegen und probieren, woraus dann dieses Beispiel wurde.
Die Unterschiede zwischen Beispiel zwei und drei fallen erst schmaleren Fenstern auf, nicht nur die Navigation, auch der Kopf verschiebt sich anders. Je nachdem, könnten auch die Formatierungen für den Kopf von einem Beispiel und die der Navigation vom anderen verwendet werden.
(Eventuell notwendige Feinkorrekturen oder eventuelle Anpassungen für die Browser, die ich nicht getestet habe, kannst du dann ja selbst machen.)
(Übrigens, einer der CSS-Hacks ist zwar nicht valide, dürfte aber funktionieren, hatte nicht sofort einen validen dafür gefunden und nicht weitergesucht, vielleicht findest du einen.)

Auf Wiederlesen
Detlef

[Melanu Rinots]

Hallo Detlef,

die dritte Version gefällt mir sehr gut. Besonders der auch bei kleinen Fenstern zentriete Kopfbereich gefällt mir sehr gut.

Vielen Dank

(Übrigens, einer der CSS-Hacks ist zwar nicht valide, dürfte aber funktionieren, hatte nicht sofort einen validen dafür gefunden und nicht weitergesucht, vielleicht findest du einen.)

Damit meinst Du sicher diesen CSS-Hack:

* html.* #kopf { /* nicht IE 5.0 */  
margin-left:-487px; }

Ich habe noch eine Frage dazu: Warum ist hier noch eine Sonderbeachtung des IE 5.0 nötig und was erreichts Du mit dem oben zitierten? Bzw. mit folgendem:

  
* html + body #kopfbereich { /* nur IE 5.0 */  
left: 0;  
} 

Grundsätzlich nochmal die Frage zu dem Verwenden von CSS-Hacks und Conditional Comments: Warum bevorzugst Du CSS-Hacks?

Für mich erscheint es erstmal praktischer zu sein Conditional Comments zu benutzen und dann einfach mehrer CSS-Dateinen anzulegen. (Eine für die normalen Browser, eine für die alten IE Versionen . . . ). Mit CSS-Hacks habe ich doch sogar mehr Schreibarbeit und weniger Übersicht . . .
Oder sehe ich das ganz falsch? Haben Conditional Comments viel mehr Nachteile, weil sie ja vielleicht nicht immer funtionieren, langsam sind . .  . ?

Vielen Dank nochmal für Deine Arbeit

Melanu

[Detlef G.]

Hallo Melanu

die dritte Version gefällt mir sehr gut. Besonders der auch bei kleinen Fenstern zentriete Kopfbereich gefällt mir sehr gut.

Dafür benötigt diese auch am meisten zusätzliche Elemente im XHTML.

Ich habe noch eine Frage dazu: Warum ist hier noch eine Sonderbeachtung des IE 5.0 nötig und was erreichts Du mit dem oben zitierten? Bzw. mit folgendem:

Damit bei den alten IEs der #kopf nicht den Scrollbalken verdeckt, wird #kopfbereich um 16 Pixel nach links verschoben und mit overflow:hidden versehen. Das sorgt dafür, dass er immer genau vor dem Scrollbalken abgeschnitten wird. Dadurch verschiebt sich der darin zentrierte #kopf um 8 Pixel nach links, was dann bei margin-left berücksichtigt wird.

Von Zeit zu zeit, aus nicht wirklich nachvollziehbaren Gründen, schneidet der IE 5.0 #kopf dann allerdings nicht 16px vom Seitenrand sondern 16px vom Scrollbalken entfernt ab, was eine hässliche gelben Lücke ergibt. Deshalb wird diese Verschiebung für ihn wieder aufgehoben.

• html + body #kopfbereich { /* nur IE 5.0 */
  left: 0;
  }

  
Dann darf natürlich auch kein 8px Ausgleich bei margin-left von #kopf durchgeführt werden.  
  

> ~~~css

* html.* #kopf { /* nicht IE 5.0 */  

> margin-left:-487px; }

Grundsätzlich nochmal die Frage zu dem Verwenden von CSS-Hacks und Conditional Comments: Warum bevorzugst Du CSS-Hacks?

Weil ich dann alle zusammengehörigen Regeln auch auf einem Haufen habe. Ich sehe welche Regeln gesetzt sind und welche, für die IEs unpassenden ich wieder aufheben muss, ohne erst ewig scrollen oder zum Fenster mit der anderen CSS-Datei wechseln zu müssen.

Für mich erscheint es erstmal praktischer zu sein Conditional Comments zu benutzen und dann einfach mehrer CSS-Dateinen anzulegen. (Eine für die normalen Browser, eine für die alten IE Versionen . . . ).

Bei dem Beispiel mit Hacks schickt der Browser eine Anfrage zum Server, der schickt ihm dann 1.777 Bytes CSS.
Bei Verwendung von Conditional Comments würde der Browser z.Z. drei Anfragen schicken und bekommt dann 976 + 640 + 80 Bytes = 1696 Bytes. Dafür hat er aber statt einmal, drei mal auf die Serverantwort gewartet und auch zusätzlich dreimal je etwa 1 KB für die reine Kommunikation mit dem Server übertragen.

Und was passiert, wenn dir auffallen sollte, dass der IE 7 auch noch eine kleine Anpassung benötigt, und dann vielleicht an irgendeiner Stelle, der IE 5.5 oder der IE 8?
Willst du dann 6 CSS-Dateien einbinden?
Conditional Comments gibt es nur für IE, wenn da wirklich mal Anpassungen für einen der anderen Browser notwendig sind, dann geht das nur mit Hacks. Dann wärde ein Teil der Anpassungen per Hack im CSS und der andere Teil in separaten Dateien.

Mit CSS-Hacks habe ich doch sogar mehr Schreibarbeit und weniger Übersicht . . .

Finde ich nicht, * html ist schnell getippt.
Alle Eigenschaften für ein Element müsste ich mir an mehreren Orten zusammensuchen. So hat man sie doch auf einen Blick. (Ich habe trotzdem noch ein paar Eigenschaften übersehen und versehentlich doppelt gesetzt.)

Oder sehe ich das ganz falsch? Haben Conditional Comments viel mehr Nachteile, weil sie ja vielleicht nicht immer funktionieren, langsam sind . .  . ?

Conditional Comments können sinnvoll sein, z.B. wenn ausschließlich bestimmte IEs ein JavaScript benötigen, oder wenn wirklich umfangreiche Stylesheets nur für IEs benötigt werden und dort dann auch noch Filter und/oder CSS-Expressions Verwendung finden.

Auf Wiederlesen
Detlef