nicht angemeldet
Positionierte DIV-Layer im IE falsch angezeigt
Hallo zusammen,
bitte schaut euch doch einmal die Seite http://www.expression-group.com/ an, und zwar zunächst mit einem "vernünftigen" Browser, z. B. einem Mozilla-basierten (Mozilla Suite, Firefox, Netscape,...), mit Opera, mit dem Konqueror usw. Dort nämlich wird die Seite genau so dargestellt, wie ich es mir vorgestellt habe. Die Seite benutzt auch validiertes XHTML 1.1 und CSS. Selbst ohne CSS, z. B. in Lynx, wird die Seite sehr übersichtlich dargestellt.
Doch wie so oft bekam ich auch bei dieser Seite wieder einen Schrecken, als ich meinen PC dann von Linux nach Windoofs bootete und IE öffnete. Dort wird nun nämlich die horizontale Navigationsleite div#navig_top total falsch angezeigt.
Vorstellen könnte ich mir nun eine Browserweiche, wie in SelfHTML aktuell beschrieben, nur weiß ich halt nicht, was ich für den IE stattdessen in die http://www.expression-group.com/de/styles/default.css schreiben soll, damit es auch klappt. Vielleicht könntet ihr euch die Quellen mal ansehen und findet einen Trick. Dafür wäre ich euch sehr dankbar...
Einen schönen Tag wünsche ich euch noch,
David
PS: Das Design ist natürlich nicht so gut, wie man es von einem professionellen Designer erwartet. Ich bin aber auch erst 13 und habe als einziges Grafikprogramm GIMP zur Verfügung, darüber hinaus versuche ich immer, die Seiten XHTML 1.1-konform zu programmieren, was die ganze Sache auch wieder sehr erschwert. Ich hoffe, es ist dennoch ein wenig ansprechend :-) Sagt mir gerne auch eure Meinung zum Design, ich bin sehr gespannt...
---
-
Moinsen,
hast Du mal versucht das Layout ohne absolute Positionierung hinzubekommen? Ich denke, mit Float und clear sollte das genauso gut gehen.
Der Darstellungs"fehler" im IE könnte behoben werden, wenn Du für das Menu Listen benutzt. Siehe auch hier: http://css.maxdesign.com.au/listamatic
Ich vermute, das die absolute Positionierung das Menu im Span-Tag "verdrängt".
Ansonsten gefällt mir das Erscheinungsbild: Schlicht und übersichtlich. Und für einen 13jährigen: Alle Achtung!
--
cu,
Maz-
Moinsen,
Mittagsen ;-)
hast Du mal versucht das Layout ohne absolute Positionierung hinzubekommen? Ich denke, mit Float und clear sollte das genauso gut gehen.
Ach du liebe Güte, das klingt umständlich bei so vielen DIVs...ok, wenn mir nichts anderes übrig bleibt, werde ich wohl nicht darum herumkommen...
Der Darstellungs"fehler" im IE könnte behoben werden, wenn Du für das Menu Listen benutzt. Siehe auch hier: http://css.maxdesign.com.au/listamatic
Aber die Listen sind ja im Endeffekt auch wieder in einem div, denn ich dann zwangsläufig wieder absolut positionieren muss, also würde, nehme ich mal an, wieder das gleiche herauskommen, oder??? Oder soll ich es dennoch mal ausprobieren? Was meinst du?
Übrigens: Danke für den Link zu der Seite, also einige von den Menüs sicn wirklich genial, die könnte ich z. B. für meine eigene Seite, die auch irgendwann mal erscheinen soll, verwenden. Nur bei der EG-Seite möchte ich eher das schlichte Menü behalten.
Ich vermute, das die absolute Positionierung das Menu im Span-Tag "verdrängt".
Ich probiere einfach mal aus, den span wegzunehmen, und sehe mal, ob es dann passiert. Ich habe den span nämlich daher gemacht, weil die Links unten in der Leiste sein sollten. Nur wenn's nicht so geht, werde ich mir wohl oder übel eine andere Lösung überlegen müssen.
Ansonsten gefällt mir das Erscheinungsbild: Schlicht und übersichtlich. Und für einen 13jährigen: Alle Achtung!
Danke, dann bin ich ja erleichtert :-) Ich meine, der eine wächst halt mit Pokemon auf, der andere mit PCs ;-) Und je früher man mit den Grundlagen anfängt, desto schneller wird man dan halt Fortgeschrittener, und man entwickelt ein gewisses Gefühl für Computer.
Vielen Dank schonmal,
David-
Moinsen,
Moinsen,
Mittagsen ;-)hast Du mal versucht das Layout ohne absolute Positionierung hinzubekommen? Ich denke, mit Float und clear sollte das genauso gut gehen.
Ach du liebe Güte, das klingt umständlich bei so vielen DIVs...ok, wenn mir nichts anderes übrig bleibt, werde ich wohl nicht darum herumkommen...
das ist wirklich nciht schwer. Im Gegenteil: Du hast mit absoluter Positionierung allerlei mehraufwand, wie ich finde. Hier weitere Beschreibungen: http://css-technik.de/css-examples/219_9/
und
http://home.arcor.de/terrikay/tutorials/positionierung.htmlwenn Du schon englisch kannst kann dort auch viel interessantes stehen: http://www.positioniseverything.net/
Aber die Listen sind ja im Endeffekt auch wieder in einem div, denn ich dann zwangsläufig wieder absolut positionieren muss,
nein, keineswegs. Ohne weitere Formatierung sind Listen ja vertikal ausgerichtet. Mit Flaot kannst Du die aber in die Vertikale bringen. Verabschiede Dich von der absoluten Positionierung als "Default-Vorgehen". Es gibt Fälle wo das sinnvoll ist (z.b. für hover-Effekte in Imagemaps), für ein einfaches Anordnen der DIVs für ein Layout sollte aber float (und clear!) absolut ausreichen.
viel Erfolg!
--
cu,
Maz-
Moinsen,
das ist wirklich nciht schwer. Im Gegenteil: Du hast mit absoluter Positionierung allerlei mehraufwand, wie ich finde. Hier weitere Beschreibungen: http://css-technik.de/css-examples/219_9/
und
http://home.arcor.de/terrikay/tutorials/positionierung.htmlwenn Du schon englisch kannst kann dort auch viel interessantes stehen: http://www.positioniseverything.net/
Ich werde mir die Seiten mal unter die Lupe nehmen, danke.
Aber die Listen sind ja im Endeffekt auch wieder in einem div, denn ich dann zwangsläufig wieder absolut positionieren muss,
nein, keineswegs. Ohne weitere Formatierung sind Listen ja vertikal ausgerichtet. Mit Float kannst Du die aber in die Vertikale bringen. Verabschiede Dich von der absoluten Positionierung als "Default-Vorgehen". Es gibt Fälle wo das sinnvoll ist (z.b. für hover-Effekte in Imagemaps), für ein einfaches Anordnen der DIVs für ein Layout sollte aber float (und clear!) absolut ausreichen.
OK, ich werde zu Hause mal sehen. Nur das alles mit VI über PuTTY zu machen, ist halt etwas unkomfortabel. Aber zu Hause wartet ja KDE's "Kate" auf mich :-)
viel Erfolg!
Danke!
David
-
-
Hi,
Ach du liebe Güte, das klingt umständlich bei so vielen DIVs...
ganz genau. Aber das kannst und solltest Du ändern. Du brauchst nämlich die meisten DIVs hier überhaupt nicht.
Aber die Listen sind ja im Endeffekt auch wieder in einem div,
Nein. Eine UL-Liste ist ein Blockelement - da muß i.d.R. kein weiteres drum.
denn ich dann zwangsläufig wieder absolut positionieren muss,
Ebenfalls Nein. Auf Deiner Seite muß nichts absolut Positioniert werden. Es ist hier ähnlich wie bei Frames: Anfänger verfallen dem Irrglauben, eine unkomplizierte und problemlose Technik gefunden zu haben.
Übrigens: Danke für den Link zu der Seite, also einige von den Menüs sicn wirklich genial,
Das stimmt zwar, aber zum Lernen und Verstehen würde ich Dir eher http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal und das Kapitel insgesamt empfehlen.
freundliche Grüße
Ingo
-
-
Hi,
Ich vermute, das die absolute Positionierung das Menu im Span-Tag "verdrängt".
wie ich merke, siehst du die Seite in IE6. Den habe ich zu Hause. Ich bin aber gerade bei meinem Opa, habe hier nur IE5 (und eine analoge Internetverbindung, also könnte der Download von IE6 einige Zeit beanspruchen). Also mit IE5 wird die Seite auch ohne span nach wie vor seltsam angezeigt, aber vielleicht kannst du dir die Seite ja jetzt nochmal mit IE 6 ansehen und mir das Ergebnis berichten.
Wenn es nämlich wenigstens mit IE6 klappen würde, wäre ich zufrieden, auf jede einzelne Version des "leicht" missglückten Browsers möchte ich jetzt nämlich auch nicht eingehen.
Wenn es aber immer noch nicht klappt, werde ich aber, wie vorgeschlagen, auf float und clear umsteigen. Nur scheue ich ehrlich gesagt etwas davon zurück, nochmal das ganze Gerüst umzuprogrammieren, wenn es auch anders geht.
Vielen Dank nochmal,
David-
SORRY, mein Name ist David und nicht "Davi" ;-)
-
Moinsen,
vielleicht kannst du dir die Seite ja jetzt nochmal mit IE 6 ansehen und mir das Ergebnis berichten.
jetzt etwas besser im IE6, aber immer noch buggy. Das Menu wird bis zum "ga" von "Gameserver" angezeigt, dann rutscht das rechtsbündig gedachte Bild über den Rest des Menus. Entsprechend "fehlt" diese Hochhausgrafik rechts in der zweiten Zeile. Dort ist nur ein weisser Bereich.
Nur scheue ich ehrlich gesagt etwas davon zurück, nochmal das ganze Gerüst umzuprogrammieren, wenn es auch anders geht.
Programmieren ja sowieso nicht, HTML und CSS haben keinerlei Befehle ;)
Aber wenn Du alle absoluten Positionierungen in der CSS-Datei gemacht hast, musst Du dort nur Anspassungen machen, nciht im HTML Bereich und schon gar nicht in der Struktur.--
cu,
Maz-
Moinsen,
vielleicht kannst du dir die Seite ja jetzt nochmal mit IE 6 ansehen und mir das Ergebnis berichten.
jetzt etwas besser im IE6, aber immer noch buggy. Das Menu wird bis zum "ga" von "Gameserver" angezeigt, dann rutscht das rechtsbündig gedachte Bild über den Rest des Menus. Entsprechend "fehlt" diese Hochhausgrafik rechts in der zweiten Zeile. Dort ist nur ein weisser Bereich.
Das sollen eigentlich Server sein ;-) Ich habe bei photocase.de leider kein besseres Bild gefunden :-(
Also jetzt wird es so angezeigt wie bei IE5. Offenbar hat IE Probleme, die Breite und die Höhe zu interpretieren und macht alles nur so breit und so hoch wie den Text. Interschrott Explorer halt :-(
Nur scheue ich ehrlich gesagt etwas davon zurück, nochmal das ganze Gerüst umzuprogrammieren, wenn es auch anders geht.
Programmieren ja sowieso nicht, HTML und CSS haben keinerlei Befehle ;)
Aber wenn Du alle absoluten Positionierungen in der CSS-Datei gemacht hast, musst Du dort nur Anspassungen machen, nciht im HTML Bereich und schon gar nicht in der Struktur.Gut, das stimmt.
Danke für deine Unterstützung,
David---
-
-
-
-
Hallo,
...] nur weiß ich halt nicht, was ich für den IE stattdessen in die http://www.expression-group.com/de/styles/default.css schreiben soll, damit es auch klappt. Vielleicht könntet ihr euch die Quellen mal ansehen und findet einen Trick. Dafür wäre ich euch sehr dankbar...
ein schneller Workaround im CSS ist so möglich, inkl. IE-Weiche:
* html div#navig_top {width:100%;margin-left:-210px;position:absolute;z-index:-1}
* html div#navig_top span { padding-left:210px;}Wahrscheinlich gibt es aber noch elegantere Lösungen bei genauerer
Betrachtung der bereits vorgegebenen CSS-Eigenschaften.Grüsse
Cyx23
-
Hallo,
ein schneller Workaround im CSS ist so möglich, inkl. IE-Weiche:
* html div#navig_top {width:100%;margin-left:-210px;position:absolute;z-index:-1}
* html div#navig_top span { padding-left:210px;}Würde dann nicht in der 2. Zeile immer noch ein weißer Bereich bleiben? Also ich werde wahrscheinlich doch alles, wie von Maz vorgeschlagen, auf float und clear umschreiben (um nicht "umprogrammieren" zu sagen ;-) ). Sollte das nicht klappen, werde ich allerdings auf deine Lösung zurückgreifen. Auf jeden Fall ein guter Ansatz!
Vielen Dank dennoch für deine Bemühungen,
David
--
-