Positionierung & Visability

[Robert]

Hallo, ich habe ein Problem mit der Positionierung von Elementen.
Im FF wird alles perfekt angezeigt, aber mit IE bzw. mit nem MAC (k.a. welcher Browser) wird die Positionierung verworfen.
Auch wird Visability als Fehler im Code nicht ausgeführt.
Kann mir das jemand erklären? Ich weiß jetzt nicht mehr weiter.

Es gibt zwar noch mehr Probleme die der IE mit meiner Seite hat, aber ein Problem nach dem anderen ;-)

[wahsaga]

hi,

Hallo, ich habe ein Problem mit der Positionierung von Elementen.

Aha. Und welches?

Im FF wird alles perfekt angezeigt, aber mit IE bzw. mit nem MAC (k.a. welcher Browser) wird die Positionierung verworfen.

Und das heisst?

Beschreibe bitte genauer.
</hilfe/charta.htm#tipps-fuer-fragende>

Auch wird Visability als Fehler im Code nicht ausgeführt.
Kann mir das jemand erklären?

Willst du wirklich angeben, ob ein Element Einreiseberechtigungen ausstellen darf - oder meinst du visibility?

Es gibt zwar noch mehr Probleme die der IE mit meiner Seite hat, aber ein Problem nach dem anderen ;-)

Falls es um die Seite geht, die du im URL-Feld angegeben hast, bin ich ganz deiner Meinung:
Die enthält nämlich noch eine Menge Fehler. Die gehören erst mal beseitigt, danach kann man sich auf die Suche nach der Ursache von Darstellungsfehlern machen.

gruß,
wahsaga

[Robert]

hi,

Hallo, ich habe ein Problem mit der Positionierung von Elementen.
Aha. Und welches?

Im FF werden alle Elemente an die definierte Stelle positioniert, im IE (und MAC) findet KEINE Positionierung statt, die Elemente werden untereinander (nacheinander?) angezeigt.

Auch wird Visability als Fehler im Code nicht ausgeführt.
Kann mir das jemand erklären?
Willst du wirklich angeben, ob ein Element Einreiseberechtigungen ausstellen darf - oder meinst du visibility?

Natürlich geht es um visibility, entschuldige bitte den Rechtschreibfehler ;-)

Es gibt zwar noch mehr Probleme die der IE mit meiner Seite hat, aber ein Problem nach dem anderen ;-)
Falls es um die Seite geht, die du im URL-Feld angegeben hast, bin ich ganz deiner Meinung:
Die enthält nämlich noch eine Menge Fehler. Die gehören erst mal beseitigt, danach kann man sich auf die Suche nach der Ursache von Darstellungsfehlern machen.

So, die angesprochenen Fehler sind nun beseitigt, die restlichen resultieren auf einem externen Link, der natürlich genau so bestehen bleiben muß!

[Patrick Andrieu]

Hallo Robert!

So, die angesprochenen Fehler sind nun beseitigt, die restlichen resultieren auf einem externen Link, der natürlich genau so bestehen bleiben muß!

Aargh! Dieser Punkt müsste eigentlich in den FAQ!
Natürlich muß der Link bleiben, wenn er denn muß, aber nicht so, wie er jetzt ist. Was sagt der Vali:

This is usually a cascading error caused by a an undefined entity reference or use of an _unencoded_ ampersand (&) in an URL or body text.

Und wie _codiert_ man solche Zeichen?

Viele Grüße aus Frankfurt/Main,
Patrick

[Robert]

Danke!
Ich wusste nicht das das in Links auch gemacht werden kann/soll.
Ist jetzt fehlerfrei ;-)
Dann können wir uns ja dem eigentlichen Problem widmen... hoffe ich

Die Elemente werden mit IE 6.028 falsch angeordnet.
Die Elemente werden mit MAC Safari 2.0.4 falsch angeordnet.
Der Seitenaufbau mit IE 5.2 ist FAST KORREKT (~FireFox)

Warum ich so viele gleiche Schleifen habe:
Ich nicht so Fit in JavaScript und habe mir erst mal so beholfen, aber ich werde es nach Deinem Vorbild umbauen, sofern ich das Anzeigeproblem in den Griff kriege.

[Patrick Andrieu]

Hallo Robert!

Danke!
Ich wusste nicht das das in Links auch gemacht werden kann/soll.
Ist jetzt fehlerfrei ;-)

Prima.

Die Elemente werden mit IE 6.028 falsch angeordnet.

wahsaga hat Dir gesagt, warum

Die Elemente werden mit MAC Safari 2.0.4 falsch angeordnet.

Ich kann hier nur mit Safari for Windows testen.

Der Seitenaufbau mit IE 5.2 ist FAST KORREKT (~FireFox)

Kann ich mangels älteren IEs nicht beurteilen.

Warum ich so viele gleiche Schleifen habe:
Ich nicht so Fit in JavaScript und habe mir erst mal so beholfen, aber ich werde es nach Deinem Vorbild umbauen, sofern ich das Anzeigeproblem in den Griff kriege.

Ich habe ein Beispiel online gestellt. Weiter aufräumen und anpassen überlasse ich Dir.

Ich habe:

• position:fixed durch absolute ersetzt
• visibility:visible/hidden durch display:block/none ersetzt (es entstehen nur dann die Scrollleisten, wenn ein längerer Textblock angezeigt wird - dazu musste ich die Unsinnige height:1500px für den Body entfernen, wozu sollte sie gut sein?
• sämtliche inline-styles rausgeworfen (waren teilweise doppelt gemoppelt) und auch der CSS-Block aus der HTML-Datei in die styles.css kopiert, wo sowas hin gehört) - Das Selbe zu tun mit dem Javascript überlasse ich Dir
• einige Klassen hinzugefügt: es sind aber noch Klassen, die nicht im CSS definiert sind, was sollen die? class="content" zum Beispiel
• die Funktion onoff ist jetzt eine Schleife
  und ein paar Kleinigkeiten, die ich nicht mehr weiß, weil ich mir nicht alles gemerkt habe (jaja, das Alter)

Was Dir zu tun bleibt:

• wenn Du auf position:fixed bestehst, einen Workaround (CSS-Hack) einzubauen (siehe SELFHTML)
• und weiter aufräumen, ist nicht gerade übersichtlich, was Du da fabriziert hast

Robert -> FF, IE 6, Opera 9 und Safari for Windows und valide!

Viele Grüße aus Frankfurt/Main,
Patrick

[Robert]

Ich habe ein Beispiel online gestellt. Weiter aufräumen und anpassen überlasse ich Dir.

Hey Patrick... besten Dank dafür!
Das war jetzt viel viel mehr als ich überhaupt erwartet hatte.

Ich habe:

• position:fixed durch absolute ersetzt
• visibility:visible/hidden durch display:block/none ersetzt (es entstehen nur dann die Scrollleisten, wenn ein längerer Textblock angezeigt wird - dazu musste ich die Unsinnige height:1500px für den Body entfernen, wozu sollte sie gut sein?
• sämtliche inline-styles rausgeworfen (waren teilweise doppelt gemoppelt)

Was sind denn inline-styles ??
Was hab ich denn da benutzt was ich nicht kenne???

und auch der CSS-Block aus der HTML-Datei in die styles.css kopiert, wo sowas hin gehört) - Das Selbe zu tun mit dem Javascript überlasse ich Dir

• einige Klassen hinzugefügt: es sind aber noch Klassen, die nicht im CSS definiert sind, was sollen die? class="content" zum Beispiel

Die noch nicht definierten Klassen sind schon mal vorbereitet eingebaut.

• die Funktion onoff ist jetzt eine Schleife

Das war der größte Brocken - für mich, aber so richtig hab ich es nicht verstanden wie das funktioniert. Liegt aber definitiv an meinem schmalen JavaScript-Wissen!

und ein paar Kleinigkeiten, die ich nicht mehr weiß, weil ich mir nicht alles gemerkt habe (jaja, das Alter)

kann nichts tragisches gewesen sein.

Was Dir zu tun bleibt:

• wenn Du auf position:fixed bestehst, einen Workaround (CSS-Hack) einzubauen (siehe SELFHTML)
• und weiter aufräumen, ist nicht gerade übersichtlich, was Du da fabriziert hast

Tja... genau hier bin ich jetzt am Grübeln.
Das Layout sollte so aussehen, dass das Schild und die Titelanzeige fixiert bleibt, so dass zu jeder Zeit in einen anderen Menüpunkt gesprungen werden kann.
Durch "absolute" scrollt die Navigation jetzt mit.
Gibt es noch eine Lösung -außer Frames- das hin zu bekommen?

-> FF, IE 6, Opera 9 und Safari for Windows und valide!

Jetzt geht sogar MAC Safari
Aber dafür kann IE5.2 das jetzt nicht mehr anzeigen...
sehr seltsam!

[wahsaga]

hi,

Durch "absolute" scrollt die Navigation jetzt mit.
Gibt es noch eine Lösung -außer Frames- das hin zu bekommen?

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

gruß,
wahsaga

[Patrick Andrieu]

Hallo Robert!

Was sind denn inline-styles ??
Was hab ich denn da benutzt was ich nicht kenne???

Es sind style-Definitionen innerhalb eines HTML-Tags mittels des style-Attributs:

<p style="font-weight:bold">Fetter Text</p>

Die sollten vermieden werden (Trennung von Markup und Layout). Auch die JavaScript-Funktionen solltest Du in eine externe .js-Datei packen (siehe auch hierzu SELFHTML, JavaScript in separaten Dateien).

Die noch nicht definierten Klassen sind schon mal vorbereitet eingebaut.

Hm, OK. Würde ich jedoch vermeiden, und die class-Attribute erst dann einbauen, wenn auch die entsprechenden Klassen definiert sind. Es wird sonst schnell unübersichtlich.

• die Funktion onoff ist jetzt eine Schleife
  Das war der größte Brocken - für mich, aber so richtig hab ich es nicht verstanden wie das funktioniert. Liegt aber definitiv an meinem schmalen JavaScript-Wissen!

  
function onoff(name) {     // logo, dass auch nur ein Textbereich auf einmal angezeigt wird  
  texte = new Array("text1","text2","text3","text4","text5","text6","text7","text8","text9");  
  document.getElementById(name).style.display="block";  
  for (i=0;i<texte.length;i++) {  
    if (texte[i] != name) {  
      document.getElementById(texte[i]).style.display="none";  
    }  
  }  
}  

Hab' oft Schwierigkteiten damit, etwas verständlich zu erläutern, was ich zwar verstanden habe und kann, aber versuchen's wir mal.
In den Klammern erwartet onoff() einen Parameter. Hier: name. In diesem Fall kannst Du genausogut wubbeldibubbel nehmen, _wenn in der if-Abfrage auch wubbeldibubbel steht_.

Die Funktion wird in Deinem Quelltext so aufgerufen:
javascript:onoff('text1') (Früher hattest Du: onoff1())
javascript:onoff('text2') (Früher hattest Du: onoff2())
etc...

Dadurch wird "text1", "text2", etc... beim jeweiligen Aufruf an die Funktion übergeben.

In der Funktion wird eine Variable deklariert (wenn man's richtig machen will, sollte an dieser Stelle sogar var texte = new Array(...); stehen, genauso wie in der Schleife for (var i=0;i<texte.length;i++)  stehen sollte). Es wird ein Array definiert, dessen Inhalt alle Deine Textdiv-IDs sind.

Darunter wird der jeweilige Textbereich auf sichtbar geschaltet, und zwar durch die Änderung der display-Eigenschaft. Beispiel: Hast Du auf den Link geklickt, der für das Sichtbar-Schalten vom DIV mit der ID text1 gedacht ist (javascript:onoff('text1')), wird eben "text1" übergeben, und es passiert nichts anders als in Deinen vielen früheren Funktionen:

document.getElementById('text1').style.display="block";

Das Array und die Schleife werden gebraucht, um alle andere Textbereiche auf unsichtbar zu schalten (hier durch die Änderung der display-Eigenschaft auf none). Die Schleife durchläuft das Array mit den IDs, und schaltet alle DIVs bis auf dem, dessen ID an die Funktion übergeben wurde, auf display:none:

for (i=0;i<texte.length;i++) {
    if (texte[i] != name) {
      document.getElementById(texte[i]).style.display="none";
    }
  }

Um beim Beispiel mit dem ersten Bereich "text1" zu bleiben, bedeutet das:
Durchlaufe das Array, und mach alle DIVs, dessen IDs du findest und die nicht die übergebene ist, unsichtbar. Wenn also text1 übergeben wurde, werde text2, text3 etc... - so eine von denen zuvor sichtbar war, wieder versteckt.

und ein paar Kleinigkeiten, die ich nicht mehr weiß, weil ich mir nicht alles gemerkt habe (jaja, das Alter)
kann nichts tragisches gewesen sein.

Doch: Ich habe Optimiert für Firefox 'rausgenommen ;)

Was Dir zu tun bleibt:

• wenn Du auf position:fixed bestehst, einen Workaround (CSS-Hack) einzubauen (siehe SELFHTML)
  Tja... genau hier bin ich jetzt am Grübeln.
  Das Layout sollte so aussehen, dass das Schild und die Titelanzeige fixiert bleibt, so dass zu jeder Zeit in einen anderen Menüpunkt gesprungen werden kann.
  Durch "absolute" scrollt die Navigation jetzt mit.
  Gibt es noch eine Lösung -außer Frames- das hin zu bekommen?

Klar, ich hatte Dir den Tipp mit SELFHTML gegeben, dort ist ein Beispiel mit fixe Bereiche für den IE (hier mit Conditional Comments gelöst - es gibt auch reine CSS-Hacks dafür).

Aber dafür kann IE5.2 das jetzt nicht mehr anzeigen...
sehr seltsam!

Der wird vermutlich einen Doctype brauchen, der ihn nicht in den Quirks-Mode schickt.

Viele Grüße aus Frankfurt/Main,
Patrick

[wahsaga]

hi,

Im FF werden alle Elemente an die definierte Stelle positioniert, im IE (und MAC) findet KEINE Positionierung statt, die Elemente werden untereinander (nacheinander?) angezeigt.

Mit welcher IE-Version testest du denn? Dass der IE <= 6 position:fixed noch nicht versteht, ist dir bewusst?

Und die Angabe "(und MAC)" kannst du dir sparen, die nützt uns gar nichts. Wenn, dann sag uns, welcher Browser auf dem "MAC".

gruß,
wahsaga

[Patrick Andrieu]

Hallo Robert!

Erst die Fehler korrigieren!

Hallo, ich habe ein Problem mit der Positionierung von Elementen.
Im FF wird alles perfekt angezeigt, aber mit IE bzw. mit nem MAC (k.a. welcher Browser) wird die Positionierung verworfen.
Auch wird Visability als Fehler im Code nicht ausgeführt.

Abgesehen davon, dass es visIbility heißt (also mit I wie IE und nicht mit A wie Andrieu - aber gut, im Quelltext hast Du es richtig), meldet IE:

Die Visibility-Eigenschaften wurden nicht gefunden. Ungültiges Argument.

Und was kann dieser ungültige Argument Deiner Meinung nach sein? Kann eine Sichtbarkeit kollabieren? Aus Sicht des IE 6 nein. Er kennt nur hidden und visibile (vg. visibility: da gibts die selbe Meldung).

Außerdem: Warum brauchst Du so viele onoff-Funktionen die alle das selbe machen, nur mit einem anderen Bereich. Wozu gibt es Schleifen?

Ein ähnliches Beispiel aus meiner Startseite:

  
function just1text(name) {     // logo, dass auch nur ein "Tafeltext" auf einmal angezeigt wird  
  texte = new Array("tafeltext1","tafeltext2","tafeltext3","tafeltext4","tafeltext5","tafeltext6");  
  dc.getElementById(name).style.visibility="visible";  
  for (i=0;i<texte.length;i++) {  
    if (texte[i] != name) {  
      dc.getElementById(texte[i]).style.visibility="hidden";  
    }  
  }  
}  

Kann mir das jemand erklären? Ich weiß jetzt nicht mehr weiter.

Der IE kann lesen: "Optimiert für den Mozilla Firefox 2.0" hat ihn sicher gekränkt ;)

Viele Grüße aus Frankfurt/Main,
Patrick