traumgaertner
Grünschnabel
Nach Lösungen für folgende (wohl eher kleinere) Probleme habe ich schon in diveren Foren etc gesucht, leider ohne sinnvolles Ergebnis. Nun läuft mir langsam die Zeit davon - ich hoffe also mir kann jemand helfen, bevor ich mit dem Kopf meine Tastatur bearbeite ;-)
Folgende Ausgangssituation:
Aktuell arbeite ich an einem Layout für ein MySpace Profil. Wer sich mit dieser (nutzlosen) Seite auskennt weiß dass sie nur HTML und CSS unterstützt (also leider kein Javascript, was meine Probleme grösstenteils gar keine sein liese). Da ich demnächst in Auftrag für eine Sängerin ein solches Profil erstellen soll bastel und teste ich derzeit an meinem eigenen herum, was mich vor folgende Aufgaben, und somit auch Probleme, stellt.
Das Layout soll
a) ein reines CSS-Layout werden das ausschließlich mit <divs> auskommen muss.
b) alle gängigen MySpace Selectoren überlagern (basierend auf einem Layer mit Hintergrundbild)
c) "dynamisch" sein und so sehr es geht den Eindruck einer Website vermitteln
d) in allen Browsern und Bildschirmauflösungen fix sein.
Da MySpace in seiner Programmierung ein absoluter Fall für sich ist möchte ich jetzt gar nicht auf die Technik dahinter eingehen...würde auch keine Rolle spielen, denn Punkt (b) ist keine Schwierigkeit. Zur Erklärung aber (wer sich nicht damit auskennt): MySpace-Profile sind quasi "statisch" - Inhalte über interne Links anzeigen, wie bei einer Website ist nicht möglich, man muss sich also auf eine einzige Seite beschränken.
Um die Inhalte dennoch dynisch zu halten habe ich auf CSS-Popups zurück gegriffen (im klassischen Sinne eine simple "hover" Funktion) die bei Mauskontakt mit einem Link in einem fest definierten Layer (<div>) den entsprechenden Inhalt anzeigen soll.
Einen Auszug dieser Codes poste ich mal kurz mit:
__________________________________________________________________________
.menueRight, a.menueRight:hover {display:block; background-color:white; opacity:0.5; filter:alpha (opacity=50); position:absolute; left:720px; width:170px; height:20px; z-index:3; font-family:arial narrow; font-color:black; font-weight:normal; font-size:12px; text-decoration:none;}
.thatsme {top:325px;}
.thatsme:hover span {top:-250px;}
a.menueRight span {display:none;}
a.menueRight:hover span {display: block;position: absolute;left: -190px;width: 310px;
height: 190px;z-index: 7;font-size: 12px;font-family:arial narrow;text-decoration:none;
font-color:black;}
<a href="#" class="menueRight thatsme">--->that..s me</div><span>What the popup will say here</span></a>
__________________________________________________________________________
Im Grunde funktioniert alles prächtig, FF und Opera machen weder in der Darstellung noch in der Programmierung Schwierigkeiten. Einzig natürlich (wie sollte es auch anders sein) der IE. Ärgerlich daran ist, dass der IE (ausnahmsweise, aber in diesem Fall nicht sonderlich verwunderlich) zwar tatsächlich alle Angaben zu den Positionen richtig interpretiert, die Funktion <hover> aber natürlich nicht erkennt (was zur Folge hat dass auch kein "popup" mit dem Inhalt angezeigt wird.
Lange Rede, kurzer Sinn:
Gibt es eine allgemein gültige Funktion im CSS die das <hover> Element ersetzt und trotzdem in allen gängigen Browsern erkannt wird?
Ich muss dazu sagen dass ich kein Coder bin sondern Layouter, und dementsprechend mich erst in CSS einarbeiten muss. Dennoch peile ich nicht warum der IE nicht mitspielt, denn sämtliche anderen Pseudoklassen (inklusive :hover in diversen anderen Selektoren der Seite) werden immerhin auch erkannt (nur eben dieser eine nicht).
Sprich: der entsprechende Link verändert bei Mauskontakt, wie gewollt, auch im IE Hintergrundfarbe etc. Warum also nicht auch hier?
Für jeden Lösungsansatz bin ich dankbar.
Desweiteren ergab sich noch das Problem der Darstellung auf anderen Bildschirmauflösungen, was vermutlich durch die Verwendung des Wertes "px" zustande kommen dürfte. Die Seite soll aber auf allen Auflösungen gleich dargestellt werden. Auf welchen Wert ratet Ihr mir dass ich da zurück greifen sollte, damit das funktioniert? Mir wurden "pt" und "em" empfohlen (?), da diese eben fix sind, und sich nicht nach den Pixeln richten, stosse hierbei aber mit meinem Intellekt/Wissen gegen Mauern (zumal ich noch völlig auf HTML eingeschossen bin - böhmische Dörfer also). In welcher Relevanz verhalten sich pt und em denn zu px!? Also - 12px in der Schriftgrösse wären wie viel pt oder em!?
Sorry für den langen Threat, aber mein Latein ist wirklich am Ende, und ich komme so langsam in Zugzwang.
Vielen Dank schon einmal für eventuelle Lösungsvorschläge.
MfG
Traumgaertner
[EDIT]
Wahrscheinliche Fehlerquelle im IE:
Der anzuzeigende Text liegt im <span>...der IE interpretiert den :hover aber offensichtlich nur im Bereich von Links (also <a>)...Lösungsvorschläge!?
Gibt es im CSS evtl. eine ähnliche Funktion wie die get.element by ID im javascript? Dann würde ich die Texte durch JPEG´s austauschen. Danke.
[EDIT ENDE]
Folgende Ausgangssituation:
Aktuell arbeite ich an einem Layout für ein MySpace Profil. Wer sich mit dieser (nutzlosen) Seite auskennt weiß dass sie nur HTML und CSS unterstützt (also leider kein Javascript, was meine Probleme grösstenteils gar keine sein liese). Da ich demnächst in Auftrag für eine Sängerin ein solches Profil erstellen soll bastel und teste ich derzeit an meinem eigenen herum, was mich vor folgende Aufgaben, und somit auch Probleme, stellt.
Das Layout soll
a) ein reines CSS-Layout werden das ausschließlich mit <divs> auskommen muss.
b) alle gängigen MySpace Selectoren überlagern (basierend auf einem Layer mit Hintergrundbild)
c) "dynamisch" sein und so sehr es geht den Eindruck einer Website vermitteln
d) in allen Browsern und Bildschirmauflösungen fix sein.
Da MySpace in seiner Programmierung ein absoluter Fall für sich ist möchte ich jetzt gar nicht auf die Technik dahinter eingehen...würde auch keine Rolle spielen, denn Punkt (b) ist keine Schwierigkeit. Zur Erklärung aber (wer sich nicht damit auskennt): MySpace-Profile sind quasi "statisch" - Inhalte über interne Links anzeigen, wie bei einer Website ist nicht möglich, man muss sich also auf eine einzige Seite beschränken.
Um die Inhalte dennoch dynisch zu halten habe ich auf CSS-Popups zurück gegriffen (im klassischen Sinne eine simple "hover" Funktion) die bei Mauskontakt mit einem Link in einem fest definierten Layer (<div>) den entsprechenden Inhalt anzeigen soll.
Einen Auszug dieser Codes poste ich mal kurz mit:
__________________________________________________________________________
.menueRight, a.menueRight:hover {display:block; background-color:white; opacity:0.5; filter:alpha (opacity=50); position:absolute; left:720px; width:170px; height:20px; z-index:3; font-family:arial narrow; font-color:black; font-weight:normal; font-size:12px; text-decoration:none;}
.thatsme {top:325px;}
.thatsme:hover span {top:-250px;}
a.menueRight span {display:none;}
a.menueRight:hover span {display: block;position: absolute;left: -190px;width: 310px;
height: 190px;z-index: 7;font-size: 12px;font-family:arial narrow;text-decoration:none;
font-color:black;}
<a href="#" class="menueRight thatsme">--->that..s me</div><span>What the popup will say here</span></a>
__________________________________________________________________________
Im Grunde funktioniert alles prächtig, FF und Opera machen weder in der Darstellung noch in der Programmierung Schwierigkeiten. Einzig natürlich (wie sollte es auch anders sein) der IE. Ärgerlich daran ist, dass der IE (ausnahmsweise, aber in diesem Fall nicht sonderlich verwunderlich) zwar tatsächlich alle Angaben zu den Positionen richtig interpretiert, die Funktion <hover> aber natürlich nicht erkennt (was zur Folge hat dass auch kein "popup" mit dem Inhalt angezeigt wird.
Lange Rede, kurzer Sinn:
Gibt es eine allgemein gültige Funktion im CSS die das <hover> Element ersetzt und trotzdem in allen gängigen Browsern erkannt wird?
Ich muss dazu sagen dass ich kein Coder bin sondern Layouter, und dementsprechend mich erst in CSS einarbeiten muss. Dennoch peile ich nicht warum der IE nicht mitspielt, denn sämtliche anderen Pseudoklassen (inklusive :hover in diversen anderen Selektoren der Seite) werden immerhin auch erkannt (nur eben dieser eine nicht).
Sprich: der entsprechende Link verändert bei Mauskontakt, wie gewollt, auch im IE Hintergrundfarbe etc. Warum also nicht auch hier?
Für jeden Lösungsansatz bin ich dankbar.
Desweiteren ergab sich noch das Problem der Darstellung auf anderen Bildschirmauflösungen, was vermutlich durch die Verwendung des Wertes "px" zustande kommen dürfte. Die Seite soll aber auf allen Auflösungen gleich dargestellt werden. Auf welchen Wert ratet Ihr mir dass ich da zurück greifen sollte, damit das funktioniert? Mir wurden "pt" und "em" empfohlen (?), da diese eben fix sind, und sich nicht nach den Pixeln richten, stosse hierbei aber mit meinem Intellekt/Wissen gegen Mauern (zumal ich noch völlig auf HTML eingeschossen bin - böhmische Dörfer also). In welcher Relevanz verhalten sich pt und em denn zu px!? Also - 12px in der Schriftgrösse wären wie viel pt oder em!?
Sorry für den langen Threat, aber mein Latein ist wirklich am Ende, und ich komme so langsam in Zugzwang.
Vielen Dank schon einmal für eventuelle Lösungsvorschläge.
MfG
Traumgaertner
[EDIT]
Wahrscheinliche Fehlerquelle im IE:
Der anzuzeigende Text liegt im <span>...der IE interpretiert den :hover aber offensichtlich nur im Bereich von Links (also <a>)...Lösungsvorschläge!?
Gibt es im CSS evtl. eine ähnliche Funktion wie die get.element by ID im javascript? Dann würde ich die Texte durch JPEG´s austauschen. Danke.
[EDIT ENDE]
Zuletzt bearbeitet:
