PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Probleme mit Menü bei Webkit

Gast
2008-09-04, 16:22:17
Hi

Ich verwende für eine Webseite ein Menü mit Untermenü der Art, wie ihr es in dem HTML-Code seht.
Funktioniert wunderbar in Opera, Mozilla (Gecko 1.7), Firefox (Gecko 1.8) und IE 7. In Webkit, jüngst mit Google Chrome auch unter Windows gescheit nutzbar, spinnt es etwas.
Das Untermenü öffnet sich nur, wenn ich von rechts (da wo nix ist) nach links auf das Icon zukomme, bzw. beim letzten von unten nach oben.

Wäre schön wenn ihr mir dabei helfen könnt.

Gruß,
Gast


<!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" dir="ltr">
<head>
<title>Webkit Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<style type="text/css">
img {
border:none;
}
#navi {
width:142px;
margin:0;
margin-top:3px;
border:none;
text-align:left;
}
#navi ul {
margin:0;
padding:0;
}
#navi ul li {
margin:0;
padding:0;
list-style:none;
clear:both;
position:relative;
min-height:25px; /* fix for Webkit: items with submenu had height 0 */
}
#navi ul li a {
display:block;
padding:5px 0 5px 10px; /*top right bottom left */
margin:2px 0 2px 0;
border:1px solid #000;
color:#666;
text-decoration:none;
width:130px;
background-color:#fff;
}
#navi ul li > a {
min-height:20px;
}
#navi ul li a.hassubm {
width:109px;
float: left;
margin-top:0;
}
#navi ul li a.submlink {
width:10px;
border-left:none;
margin-top:0;
float:right;
}
#navi ul li a:hover {
background-color:#0f0;
color:#333;
}

#navi ul li ul {
width:212px;
display:none;
position:absolute;
left:141px;
top:0px;
background-color:#fff;
}
#navi ul li ul:hover {
display:block;
}
#navi ul li ul li a {
width:200px;
}
#navi ul li a:hover + ul {
display:block;
}

/* ignorieren, dient nur dazu das fremde bildchen zu zentrieren */
#navi ul li img.adjust_ignore {
margin-left:-6px;
margin-top:3px;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li><a href="#1" class="hassubm">Trallala 1</a><a class="submlink" href="#" onclick="return false;"><img src="http://www.forum-3dcenter.org/vbulletin/images/3dc/insanedruid/buttons/lastpost.gif" alt="" class="adjust_ignore" height="12" /></a>
<ul>
<li><a href="#1.1">hull0w 1</a></li>
</ul>
</li>
<li><a href="#2" class="hassubm">Trallala 2</a><a class="submlink" href="#" onclick="return false;"><img src="http://www.forum-3dcenter.org/vbulletin/images/3dc/insanedruid/buttons/lastpost.gif" alt="" class="adjust_ignore" height="12" /></a>
<ul>
<li><a href="#2.1">hull0w 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
RaumKraehe
2008-09-04, 16:24:32
Ich würde abwarten bis Chrome aus dem Beta-Stadium raus ist und erst dann Anfangen die Seiten, wenn nötig, anzupassen.
Gast
2008-09-04, 16:25:32
Ich würde abwarten bis Chrome aus dem Beta-Stadium raus ist und erst dann Anfangen die Seiten, wenn nötig, anzupassen.
Vielleicht kann es ja jemand mit Safari auf'm Mac mal testen, ob es sich dort auch so verhält. Ich glaube nicht an eine Macke von Chrome.
Gast
2008-09-04, 16:42:55
Hi

Ich verwende für eine Webseite ein Menü mit Untermenü der Art, wie ihr es in dem HTML-Code seht.
Funktioniert wunderbar in Opera, Mozilla (Gecko 1.7), Firefox (Gecko 1.8) und IE 7. In Webkit, jüngst mit Google Chrome auch unter Windows gescheit nutzbar, spinnt es etwas.
Das Untermenü öffnet sich nur, wenn ich von rechts (da wo nix ist) nach links auf das Icon zukomme, bzw. beim letzten von unten nach oben.

Wäre schön wenn ihr mir dabei helfen könnt.

Gruß,
Gast
Was ich vergessen hatte zu sagen: das größere Problem daran ist, dass bei einem Unter-Untermenü (3rd level menu) dieses nicht mehr geöffnet werden kann, da das 2nd level menu automatisch wieder verschwindet, wenn man mit der Maus nicht mehr darüber ist.



<!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" dir="ltr">
<head>
<title>Webkit Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<style type="text/css">
img {
border:none;
}
#navi {
width:142px;
margin:0;
margin-top:3px;
border:none;
text-align:left;
}
#navi ul {
margin:0;
padding:0;
}
#navi ul li {
margin:0;
padding:0;
list-style:none;
clear:both;
position:relative;
min-height:25px; /* fix for Webkit: items with submenu had height 0 */
}
#navi ul li a {
display:block;
padding:5px 0 5px 10px; /*top right bottom left */
margin:2px 0 2px 0;
border:1px solid #000;
color:#666;
text-decoration:none;
width:130px;
background-color:#fff;
}
#navi ul li > a {
min-height:20px;
}
#navi ul li a.hassubm {
width:109px;
float: left;
margin-top:0;
}
#navi ul li a.submlink {
width:10px;
border-left:none;
margin-top:0;
float:right;
}
#navi ul li a:hover {
background-color:#0f0;
color:#333;
}

#navi ul li ul {
width:212px;
display:none;
position:absolute;
left:141px;
top:0px;
background-color:#fff;
}
#navi ul li ul li ul {
left:211px;
}
#navi ul li ul:hover {
display:block;
}
#navi ul li ul li a {
width:200px;
}
#navi ul li a:hover + ul {
display:block;
}

/* ignorieren, dient nur dazu das fremde bildchen zu zentrieren */
#navi ul li img.adjust_ignore {
margin-left:-6px;
margin-top:3px;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li><a href="#1" class="hassubm">Trallala 1</a><a class="submlink" href="#" onclick="return false;"><img src="http://www.forum-3dcenter.org/vbulletin/images/3dc/insanedruid/buttons/lastpost.gif" alt="" class="adjust_ignore" height="12" /></a>
<ul>
<li><a href="#1.1" class="hassubm" style="width:179px" >hull0w 1</a><a class="submlink" href="#" onclick="return false;"><img src="http://www.forum-3dcenter.org/vbulletin/images/3dc/insanedruid/buttons/lastpost.gif" alt="" class="adjust_ignore" height="12" /></a>
<ul>
<li><a href="#1.1.1">hull0w 1.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#2" class="hassubm">Trallala 2</a><a class="submlink" href="#" onclick="return false;"><img src="http://www.forum-3dcenter.org/vbulletin/images/3dc/insanedruid/buttons/lastpost.gif" alt="" class="adjust_ignore" height="12" /></a>
<ul>
<li><a href="#2.1" class="hassubm" style="width:179px" >hull0w 2</a><a class="submlink" href="#" onclick="return false;"><img src="http://www.forum-3dcenter.org/vbulletin/images/3dc/insanedruid/buttons/lastpost.gif" alt="" class="adjust_ignore" height="12" /></a>
<ul>
<li><a href="#2.1.1">hull0w 2.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Gast
2008-09-09, 13:34:05
Mit Safari 3.1.2 (525.21) das gleiche. Weiß dazu niemand was? :<
Dann muss ich wohl den JavaScript-Code, den ich für den IE6 nutze, auf WebKit erweitern. :mad:
Sephiroth
2008-09-09, 21:01:16
Ich hab dein Code mal mit Safari und den Nightlies von Webkit (http://nightly.webkit.org/) getestet: Es ging dann wie es sollte, aber sobald ich mit dem Cursor aus 2. Untermenü gekommen bin stürzte mir Safari immer ab.
Mit einer neueren Version Chrome und Safari, die auch ein neueres Webkit verwenden, sollte es also dann gehen.
TheGamer
2008-09-10, 09:27:05
Mit Safari oeffnet es sich aus allen Richtungen ausser von Links
Gast
2008-09-10, 13:40:24
was man muss jetz seiten auch für chrome anpassen OMG
Gast
2008-09-11, 14:22:53
Mit Safari oeffnet es sich aus allen Richtungen ausser von Links
Mac, gelle?
Ich glaub ich warte lieber darauf, dass auch unter Windows die neuere Webkit Version zum Einsatz kommt (bei Safari und Chrome).
TheGamer
2008-09-11, 23:15:05
Mac, gelle?
Ich glaub ich warte lieber darauf, dass auch unter Windows die neuere Webkit Version zum Einsatz kommt (bei Safari und Chrome).

Ja mac. ist beim Windows Safari nicht die gleiche Webkit Version?

Das bei der Chrome Beta noch eine aeltere verwendet wird weiss ich aber beim Safari dachte ich schon das es diesselbe ist.
Gast
2009-07-01, 12:44:13
Nun stürzt Safari 4 (Webkit 530.17) ab und Chrome (2.0.172.33) zeigt nur die blöde Meldung "oh nein", wenn man mit dem Mauszeiger auf das Untermenü kommt ("hull0w 1" bzw. "hull0w 2").

Alles Affen! :mad: