nicht angemeldet
Layoutfehler in IE
Hi,
Ich hab für ein Wahlfach eine Website entworfen. In Netscape und Safari schaut sie so aus wie gedacht. Aber IE baut scheisse. So wird zwischen Titelbild und Navigationsleiste ein Spalt angezeigt. Auch das andere Navigationsmenu wird verhunzt.
Hat jemand evtl. Lösungsvorschläge?
zu sehen wäre die Site unter www.hoerterer.de/pofi/uni/spanisch/
Gruß, Christoph
P.S.: In Opera geht sie auch nicht. Anscheinend wird der z-index ignoriert. Hat hier auch jemand eine Lösung?
-
Hola Cristoph!
»»So wird zwischen Titelbild und Navigationsleiste ein Spalt »»angezeigt.
Escribe lo de esta forma:
<a href="index.html"><img id="kopf_bild" src="pic/titel.png" alt="Spanisch - Kurs 3" /></a><ul
id="kopf_nav">»»Auch das andere Navigationsmenu wird verhunzt.
Que nos quieres decir? A mi me parece correcto (en IE y Opera).
»»P.S.: In Opera geht sie auch nicht.
Pues no. Visto con Opera 7.32 no hay nignun espacio.
Saludos
Toni-
P.S.: Im Opera funktionieren die Links in der seitlichen Navigation nicht. Seltsam...
-
Genau das meinte ich. Anscheinend kann man nicht klicken weil die Inhaltsbox darüber liegt. Ging in Mozilla anfangs auch nicht. Mit z-index dann schon. Ich dacht Opera könnte das.
Wg. IE: Erscheint bei dir im linken Nav-Menü das oberste Item nicht mit einem anderen Hintergrund? Wäre jedenfalls nicht gedacht.cu Christoph
y Muchas Gracias!-
Hola!
Ging in Mozilla anfangs auch nicht. Mit z-index dann schon. Ich dacht Opera könnte das.
Ich vermute mal, das kann man auch anders lösen.
Wg. IE: Erscheint bei dir im linken Nav-Menü das oberste Item nicht mit einem anderen Hintergrund? Wäre jedenfalls nicht gedacht.
Jetzt, wo du´s sagst. Der erste Punkt des "Submenus" ist einfach Text, ohne Rahmen und Hintergrund.
Ich werde mir jetzt die drei (warum eigentlich?) CSS holen und mich der Sache mal widmen. Kann aber sein, das ich an der Uhrzeit oder mangelnden Kenntnissen scheitere.
y Muchas Gracias!
De nada.
Saludos
ToniP.S.: Wegen der Lücke: Hast dus mal ohne Leerzeichen/Zeilenumbruche zwischen den Tags probiert?
-
Hola!
Ging in Mozilla anfangs auch nicht. Mit z-index dann schon. Ich dacht Opera könnte das.
Ich vermute mal, das kann man auch anders lösen.
Ja, kann sein. Dann hätte ich die Boxes aber ganz anders anordnen müssen. Bei der nächsten Site werde ich darauf achten.
Ich werde mir jetzt die drei (warum eigentlich?) CSS holen und mich der Sache mal widmen. Kann aber sein, das ich an der Uhrzeit oder mangelnden Kenntnissen scheitere.
Ist etwas peinlich. Aber ich benutze ein Shareware Programm, welches kostenlos nur 2499 Zeichen unterstützt. Da war ich mit einem File drüber. *gg*
P.S.: Wegen der Lücke: Hast dus mal ohne Leerzeichen/Zeilenumbruche zwischen den Tags probiert?
Hab ich. Funktioniert super. Danke nochmal.
Saludos, Christoph
-
Buenos Dias!
Ging in Mozilla anfangs auch nicht. Mit z-index dann schon. Ich dacht Opera könnte das.
Ich vermute mal, das kann man auch anders lösen.
Ja, kann sein. Dann hätte ich die Boxes aber ganz anders anordnen müssen.
Glaub ich eigentlich nicht. (Das soll ja an CSS das schöne sein; find´s raus.)
Ist etwas peinlich. Aber ich benutze ein Shareware Programm, welches kostenlos nur 2499 Zeichen unterstützt.
Tip: "Phase 5 HTML Editor" siehe SelfHTML-Linkverzeichnis unter Software.
Saludos
Toni-
Buenos Dias!
Ging in Mozilla anfangs auch nicht. Mit z-index dann schon. Ich dacht Opera könnte das.
Ich vermute mal, das kann man auch anders lösen.
Ja, kann sein. Dann hätte ich die Boxes aber ganz anders anordnen müssen.
Glaub ich eigentlich nicht. (Das soll ja an CSS das schöne sein; find´s raus.)
Check ich jetzt nicht ganz was du meinst. Ich meinte, dass ich mein css anders schreiben hätte müssen. Box neben Box und nicht überlappend. Natürlich sollte es gehen, aber eben in opera nicht.
Ist etwas peinlich. Aber ich benutze ein Shareware Programm, welches kostenlos nur 2499 Zeichen unterstützt.
Tip: "Phase 5 HTML Editor" siehe SelfHTML-Linkverzeichnis unter Software.
Stimmt, der Editor ist top. Hab ich auch immer benutzt. Läuft aber auf dem Mac nicht. Außerdem wären 24,99 für einen guten Editor auch nicht zu viel, wenn ich ihn nur öfters benutzen würde.
Saludos
ToniChristoph
-
Hi Christoph,
Natürlich sollte es gehen, aber eben in opera nicht.
hast Du das hier [pref:t=82680&m=482341] gelesen?
Saludos
Toni
-
-
-
-
-
Genau das meinte ich. Anscheinend kann man nicht klicken weil die Inhaltsbox darüber liegt.
Hola Christoph!
So, das hat mich jetzt wunderbar vom lernen abgehalten und gelernt hab ich auch noch was dabei.
Der Fall: 2 divs, Navigation und Inhalt, beide relativ positioniert; die Navigation floatet außerdem :left und soll im Vordergrund auf dem Inhalt liegen; das ist mittels z-index angegeben. Problem: Opera zeigt die Navi im Hintergrund, Links sind nicht klickbar.
Genau das meinte ich. Anscheinend kann man nicht klicken weil die Inhaltsbox darüber liegt.
Zum Opera 7.23: Ich hab dem div.inhalt einen giftgrünen Hintergrund verpasst. Deine Vermutung, das es über div#navleft liegt war richtig.
Als Nächstes: Schrittweise alle anderen Selektoren aus den CSS entfernen und nach jedem Löschen im Browser angucken. Die Seite sieht immer furchtbarer aus, aber div#navleft bleibt im Hintergrund.
Dann lösche ich nach und nach die CSS-Eigenschaften aus div.inhalt und div#navleft. Dabei lasse ich position:relative und z-index unangetastet, denn die will ich ja schließlich haben. Als float:left dran ist verschwindet der Fehler logischerweise, deshalb bekommt div#navleft ein top: 100px;. Blick in den Browser und Bingo: Opera zeigt die Navigation im Vordergrund. Hasta la victoria siempre! (Hier ist diese Debugging-Methode beschrieben: http://www.positioniseverything.net/articles/mys-bug.html).
Das float wieder einfügen und der Fehler kehrt zurück. Außerdem ignoriert Opera die top-Angabe. Float und Position scheinen sich nicht zu vertragen. Ich lösche munter weiter, bis das nicht mehr geht, ohne daß der "Fehler" verschwindet. Außerdem sind sich Opera, Mozilla und IE jetzt einig, was ich als Fortschritt werte: Alle zeigen div.inhalt im Vordergrund und der Text floatet um die nicht sichtbare Navigation. Folgendes bleibt übrig:
div#navleft {
float: left;
width: 200px;
background-color: #00f;
}div.inhalt {
position:relative;
background-color: #0f0;
}Die beiden divs werden wie gewünscht angezeigt, wenn:
Man div#navleft relativ positioniert und mittels z-index nach vorne bringt
oder
man div.inhalt nicht positioniert.
Nicht überraschend. Die Browser verhalten sich unterschiedlich, wenn man dem Navigationsdiv position+z-index u n d float zuweist.
Frage an die kenntnisreichen Menschen hier: Richtig gedacht?
Ein Besuch beim W3C enthüllt: Positioning ist ein komplexes Thema, von dem ich vorerst die Finger lasse. Vermutung: Verschiedene Arten der Positionierung kann man alternativ, aber nicht zusammen verwenden. Ich bleibe bei meinen Floats, und dasselbe rate ich Dir, mit Verlaub, auch. Du kannst Dein Layout leicht damit verwirklichen und Dir ein lockeres Leben machen. Dein guter Freund margin hilft Dir dabei (http://www.positioniseverything.net/articles/float-theory.html). Ich habe ehrlich gesagt gar nicht kapiert, wozu Du position-Angaben verwendest; laß sie einfach mal weg (hab´s ausprobiert, funktioniert). Ein schöner Nebeneffekt: Der IE stellt die Links mit dem richtigen Hintergrund dar. Frag mich bitte nicht warum, ich wüsste es selber gern.
Was mir noch aufgefallen ist: Ich glaube in deinen Stylesheets gibt es einige überflüssige Angaben; allerdings habe ich das jetzt nicht im Einzelnen nachvollzogen. Vielleicht ist es nützlich, wenn Du aus den drei Dateien eine machst. Ansonsten bitte das Forum doch mal um
allgemeine Kritik an Deiner Seite. Ich bastele selber an meiner ersten und kann Dir da nicht viel sagen (semantisches Markup, Metaangaben...).Danke für das Lehrstück; ich hoffe ich konnte Dir helfen.
Saludos
ToniP.S.: Ich hab mich nicht gerade kurz gefaßt. Sry dafür.
-
Hallo Toni,
Vielen Dank. Werd ich am Montag gleich mal ausprobieren und Feedback geben.Evtl. wg. den redundanten Angaben: Hab gelesen dass nicht alle Browser die Eigenschaften vererben, und dass es manchmal sinnvoll ist, Styles zu wiederholen. Keine Ahung ob ich das richtig gemacht habe.
Jedenfalls nochmal danke.
Jetzt hab ich zumindest einen Anhaltspunkt.
Saludos, Christoph
-
-
-
-
Hola Cristoph!
»»So wird zwischen Titelbild und Navigationsleiste ein Spalt »»angezeigt.
Escribe lo de esta forma:
<a href="index.html"><img id="kopf_bild" src="pic/titel.png" alt="Spanisch - Kurs 3" /></a><ul
id="kopf_nav">Hola Toni,
Hat geholfen. An das hab ich gar nicht mehr gedacht, obwohl ich es schon mal gelesen habe. Blöder Fehler.
Muchas Gracias y Saludos
Christoph
-