nicht angemeldet
CSS Pop ups
Hallo,
ich habe folgendes Problem:
Ich will nach eric meyer (http://www.meyerweb.com/eric/css/edge/menus/demo.html) ein Pop Up Menü entwerfen, will es aber nicht untereinander, also mit <ul>, sondern nebeneinander machen. Nun habe ich schon das Problem gefixt, das der IE 5.5. und 6 mit den Styledefinitionen hat. Mein Problem ist nun nur, dass nun gar nichts mehr angezeigt wird bzw. nur wenig, jedenfalls in IE und Mozilla, Opera hingegen hat da kaum Probleme.
Nun frage ich mich weshalb beide Browser Probleme mit den Definitionen haben. Desweiteren soll direkt neben dem ersten Menüpunkt noch ein zweiter, der sich bei aktueller Lage, während des Hover-Effekts nach unten verschiebt und nicht an seiner Stelle bleibt, was vermutlich an dem "relative" liegt.
Weiß da jemand einen Rat, wie ich das hinbekommen kann, oder habe ich nur Müll geschrieben in meiner Styledefinition?
Die Datei zum angucken liegt hier: http://www.pps-cologne.de/laeuft.html
Hier mal der Quelltext
das CSS Stylesheet:
span.file a {
background: #FFFFCC;
border-bottom: none;
border-left: solid 2px #FFFFCC;
border-top: solid 2px #FFFFCC;
border-right: solid 2px #FFFFCC;
padding: 5px;
margin: 0px;
top: 0px;
left: 0px;
position: static;
}
span.file a:hover {
background-color: #EEE8AA;
border-bottom: none;
border-left: solid 2px #000000;
border-top: solid 2px #000000;
border-right: solid 2px #000000;
}
span.file a span {
display: none;
border-bottom: solid 2px #000000;
border-left: solid 2px #000000;
border-top: none;
border-right: solid 2px #000000;
width: 150px;
position: relative;
}
span.file a:hover span {
display: block;
}
span.file a span a{
display: none;
border: none;
padding: 3px;
width: 143px;
position: relative;
}
span.file a span a:hover{
background-color: Yellow;
border: none;
position: relative;
}
span.file a:hover span a {
display: block;
}
span.test a {
background: #FFFFCC;
border-bottom: none;
border-left: solid 2px #FFFFCC;
border-top: solid 2px #FFFFCC;
border-right: solid 2px #FFFFCC;
padding: 5px;
margin: 0px;
top: 0px;
left: 0px;
position: relative;
}
span.test a:hover {
background-color: #EEE8AA;
border-bottom: none;
border-left: solid 2px #000000;
border-top: solid 2px #000000;
border-right: solid 2px #000000;
}
span.test a span {
display: none;
border-bottom: solid 2px #000000;
border-left: solid 2px #000000;
border-top: none;
border-right: solid 2px #000000;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
width: 150px;
position: relative;
}
span.test a:hover span {
display: block;
}
span.test a span a{
display: none;
border: none;
padding: 3px;
margin: 0px;
top: 0px;
left: 0px;
width: 143px;
position: relative;
}
span.test a span a:hover{
background-color: Yellow;
border: none;
position: relative;
}
span.test a:hover span a {
display: block;
}
Und hier die Html Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="testen.css" />
</head>
<body>
<span class="file">
<a href="#id">Hallo
<span><a href="#hier">vielleicht</a>
<a href="#test">oder doch?</a></span></a>
</span>
<span class="test">
<a href="#id">Tach
<span><a href="#hier">möglich</a>
<a href="#test">sollte doch?</a></span></a>
</span>
</body>
</html>
-
Hi,
Ich will nach eric meyer (http://www.meyerweb.com/eric/css/edge/menus/demo.html) ein Pop Up Menü entwerfen
solche Menüs funktionieren aber nicht im IE.
Nun habe ich schon das Problem gefixt, das der IE 5.5. und 6 mit den Styledefinitionen hat.
nö, hast Du nicht, was auch der Grund ist,
dass nun gar nichts mehr angezeigt wird bzw. nur wenig, jedenfalls in IE und Mozilla
Das Grundproblem ist hier:
<a href="#id">Tach
<span><a href="#hier">nämlich daß das Verschachteln von <a> nicht zulässig ist.
freundliche Grüße
Ingo-
nö, hast Du nicht, was auch der Grund ist,
http://www.xs4all.nl/~ppk/css2tests/ie6/purecsspopups.html
Sobald ich meinen Code darauf ausrichte, dass auch IE es anzeigen soll klappt es. :)dass nun gar nichts mehr angezeigt wird bzw. nur wenig, jedenfalls in IE und Mozilla
Das Grundproblem ist hier:
<a href="#id">Tach
<span><a href="#hier">nämlich daß das Verschachteln von <a> nicht zulässig ist.
freundliche Grüße
IngoDas wird wohl das Problem sein, werd mich da mal dran machen. Danke für die Hilfe!
-
Hi,
http://www.xs4all.nl/~ppk/css2tests/ie6/purecsspopups.html
Sobald ich meinen Code darauf ausrichte, dass auch IE es anzeigen soll klappt es. :)sorry, aber diese Methode arbeitet mit div a:hover span und da der IE :hover nur für a unterstützt, dieses aber nicht verschachtelt werden darf, _kann_ sowas leider noch nicht browserübergreifend funktionieren.
Wenn Du nun über invaliden Code etwas bastelst, was vom IE so umgesetzt wird, wie Du es willst, dann begibst Du Dich auf sehr dünnes Eis. Denn zum einen sollte es bei standardkonformen Browsern Probleme bereiten und zum anderen könnte eine nächste Version vom IE sich ja auch mal etwas mehr an den Standard halten.freundliche Grüße
Ingo-
Hmm, ist mir auch aufgefallen bei meinen weiteren Versuchen. Naja da bleibt wieder nur den IE zu verachten und mich bei dir für das Augenöffnen bedanken. :)
Muss ich die Sache also doch über Javascript machen und dabei wollte ich doch kein JS benutzen.-
Hi,
Muss ich die Sache also doch über Javascript machen und dabei wollte ich doch kein JS benutzen.
nunja, wenn Du unbedingt sowas brauchst, könntest Du das auch mit CSS umsetzen und dem IE zusätzlich - über einen conditional comment eingebunden - ein Javascript liefern (vieleicht schonmal zukunftshoffend mit lte 7;-)
freundliche Grüße
Ingo
-
-
-
-