nicht angemeldet
Drop Down Menu mit CSS geht nicht!
Hallo,
habe ein kleines Problem mit meinem css Menü.
Ich habe ein Drop Down Menü nur mit css erstellt, leider macht er im Internet Explorer aber bei den Punkten die keine Unterpunkte haben trotzdem einen Rahmen. Im Firefox stellt er es korrekt da.
Nun der Quellcode:
index.html:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TobiasBauhaus.de</title>
<style type="text/css">
<!--
body {
background-color: #006699;
}
-->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/non_ie.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<!-->
</head>
<body>
<div class="hr_line"></div>
<div class="vr_line"></div>
<div class="text_layer"><span class="text">iijghskahr<br />
lmjhflkjhjksd</span></div>
<div class="navi_layer">
<div id="menuebox">
<div id="menue">
<div class="aussen">
<span class="menutag">Home</span>
</div>
<div class="aussen">
<span class="menutag">Projekte</span>
<a class="innen-1" href="#">tobiasbauhaus.de</a>
<a class="innen" href="#">hochzeitstauben-austen.de</a>
</div>
<div class="aussen">
<span class="menutag">Fussball</span>
<a class="innen-1" href="#">D1</a>
<a class="innen" href="#">SV 26 Südkirchen</a>
<a class="innen" href="#">Schalke 04</a>
</div>
<div class="aussen">
<span class="menutag">Basketball</span>
<a class="innen-1" href="#">TV Werne 03</a>
<a class="innen" href="#">NBA</a>
</div>
<div class="aussen">
<span class="menutag">Bildergalerie</span>
<a class="innen-1" href="#">Griechenland</a>
<a class="innen" href="#">Türkei</a>
</div>
<div class="aussen">
<span class="menutag">Zeichnungen</span>
<a class="innen-1" href="#">Zeichnungen</a>
<a class="innen" href="#">Comics</a>
<a class="innen" href="#">Eigene Werke</a>
</div>
<div class="aussen">
<span class="menutag">Forum</span>
</div>
<div class="aussen">
<span class="menutag">Gästebuch</span>
</div>
</div><!-- menue -->
<!-- Der folgende Block bedient nur IEs!
Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->
<!--[if IE]>
<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Home</span>
<table><tr><td>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Projekte</span>
<table><tr><td>
<a class="inn" href="#">tobiasbauhaus.de</a>
<a class="inn" href="#">hochzeitstauben-austen.de</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Fussball</span>
<table><tr><td>
<a class="inn" href="#">D1</a>
<a class="inn" href="#">SV 26 Südkirchen</a>
<a class="inn" href="#">Schalke 04</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Basketball</span>
<table><tr><td>
<a class="inn" href="#">TV Werne 03</a>
<a class="inn" href="#">NBA</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Bildergalerie</span>
<table><tr><td>
<a class="inn" href="#">Griechenland</a>
<a class="inn" href="#">Türkei</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Zeichnungen</span>
<table><tr><td>
<a class="inn" href="#">Zeichnungen</a>
<a class="inn" href="#">Comics</a>
<a class="inn" href="#">Eigene Werke</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Forum</span>
<table><tr><td>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Gästebuch</span>
<table><tr><td>
</td></tr></table>
</a>
</div><!-- stupidie -->
<![endif]-->
</div>
<!-- menuebox -->
</div>
</body>
</html>
ie.css:
/*
Menue-styles fuer IEs
Am besten per Conditional Comment einbinden.
Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
Anpassungen vorgenommen werden (siehe Kommentare).
*/
#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}
a.auss {
float: left;
width: 170px;
height: 16px;
overflow: hidden;
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
font-size:12px;
text-decoration: none;
background-color: #e3fbd2;
color: #000;
margin-top:10px;
}
a:hover.auss {
background-color: #e3fbd2;
color: #000;
overflow:visible;
}
a:hover.auss table {
display: block;
height:-2px;
background-color: #006699;
color: #fff;
border:solid 1px #fff;
border-collapse:collapse;
width:170px;
}
a.inn {
display: block;
width: 158px;
height:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;;
font-weight: normal;
text-align: center;
text-decoration: none;
background-color:#006699;
color: #fff;
padding-bottom:4px;
padding-top:4px;
}
a:visited.inn {
background-color: #006699;
color:#fff;
}
a:hover.inn {
position: relative;
background-color: #006699;
color: #fff;
}
span.menutag {
display: block;
cursor: default;
}
non_ie.css:
/*
Menue-styles fuer non-IEs
Achtung:
Fuer non-IEs gilt das Stylesheet 'dropdown.css'!
Fuer IE gilt das Stylesheet 'fix-ie.css' (per CC)!
*/
#menuebox {
position: relative;
height: 30px;
top: 5px;
left: 0;
z-index: 200;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 170px;
height: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:12px;
text-align: center;
color: #000;
background-color:#E3FBD2;
margin-top:10px;
}
#menue .aussen:hover {
height: auto;
width:168px;
background-color: #e3fbd2;
border: 1px solid #ffffff;
color: #a10000;
}
a.innen-1 {
}
a.innen,
a.innen-1 {
display: block;
width: 170px;
height:auto;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size:11px;
background-color: #006699;
color: #fff;
padding-top:4px;
padding-bottom:4px;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #006699;
color:#fff;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #006699;
color: #fff;
}
span.menutag {
display: block;
cursor: default;
}
Vielleicht findet ja einer den Fehler.
Schon mal danke im voraus!
-
Hallo,
habe ein kleines Problem mit meinem css Menü.
Ich habe ein Drop Down Menü nur mit css erstellt,HTML TABLE-Elemente in A-Elemente zu stecken haben schon vor Dir Leute als IE-CSS-Menü zu verkaufen versucht. Es ist definitiv nicht zukunftssicher. Es funktioniert mit den aktuellen IEs. Hast Du es mal im IE7 probiert?
leider macht er im Internet Explorer aber bei den Punkten die keine Unterpunkte haben trotzdem einen Rahmen.
Warum hast Du denn da auch die leeren Tabellen drin?
Im Firefox stellt er es korrekt da.
Naja, wenn man das Gezappel mag ;-).
Btw. Dein Code ist eine üble DIV/SPAN-Suppe. HTML bietet so viele schöne Elemente. Für Linklisten wie in Navigationsmenüs bieten sich verschachtelte UL/LI-Listen an. Siehe http://de.selfhtml.org/css/layouts/navigationsleisten.htm#ebenen. Wenn Du magst, kannst Du das dann auch zappeln lassen.
viele Grüße
Axel
-
Hoi,
nur kurz was zur Bedienbarkeit. Wenn ich von "Fussball" auf "Basketball" gehen will, dann komme ich erstmal bei Zeichnungen an, weil sich das Menü wieder zusammenklappt. Also ich fände das als Nutzer ziemlich nervig. Außerdem verändert sich die Größe deiner Menü-Divs beim drüberfahren, was sie irgendwie springen läßt. Ich würde denen dann zumindest immer einen Rahmen verpassen und wenn sie nicht gerade überfahren werden, dann soll der Rahmen halt Hintergrundfarbe haben, bzw transparent sein. Dann würde dieses hüpfen wegfallen.
Ahjo und warum ist dein menutag ein span, wenn du es eh gleich mit display:block sozusagen in ein div-Tag umwandelst?
Ansonsten kann ich auch nur Listen anstatt diesen vielen Divs empfehlen, wie schon Axel gemeint hat.
Gruß Ben
-
Hoi,
nur kurz was zur Bedienbarkeit. Wenn ich von "Fussball" auf "Basketball" gehen will, dann komme ich erstmal bei Zeichnungen an, weil sich das Menü wieder zusammenklappt.
Habe noch keine Lösung gefunden außer das Menü horizontal zu machen, was aber auf Grund von platz Mangel nicht geht.
Also ich fände das als Nutzer ziemlich nervig. Außerdem verändert sich die Größe deiner Menü-Divs beim drüberfahren, was sie irgendwie springen läßt. Ich würde denen dann zumindest immer einen Rahmen verpassen und wenn sie nicht gerade überfahren werden, dann soll der Rahmen halt Hintergrundfarbe haben, bzw transparent sein. Dann würde dieses hüpfen wegfallen.
Das springen lag daran das ich noch leere Tabellen bei den Punkten ohne Unterpunkten hatte.
Ahjo und warum ist dein menutag ein span, wenn du es eh gleich mit display:block sozusagen in ein div-Tag umwandelst?
Keine Ahnung war wohl nen Tipp Fehler, habs entfernt :-).
Ansonsten kann ich auch nur Listen anstatt diesen vielen Divs empfehlen, wie schon Axel gemeint hat.
Gruß Ben
Gruß Tobias
-
Hoi,
nur kurz was zur Bedienbarkeit. Wenn ich von "Fussball" auf "Basketball" gehen will, dann komme ich erstmal bei Zeichnungen an, weil sich das Menü wieder zusammenklappt.
Habe noch keine Lösung gefunden außer das Menü horizontal zu machen, was aber auf Grund von platz Mangel nicht geht.
Schau dir mal die Seite von Stu Nicholls an, der hat ne ganze Menge zu Menüs gemacht. Insbesondere das Menü Nr. 2 auf dieser Seite ist für dich bestimmt interessant. Du hast links ein Hauptmenü und die Unterpunkte klappen rechts daneben auf, ein bisschen versetzt.
Das springen lag daran das ich noch leere Tabellen bei den Punkten ohne Unterpunkten hatte.
Also bei mir springen die Boxen immer noch, was an
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 170px;
height: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:12px;
text-align: center;
color: #000;
background-color:#E3FBD2;
margin-top:10px;}
#menue .aussen:hover {
height: auto;
width:168px;
background-color: #e3fbd2;
border: 1px solid #ffffff;
color: #a10000;
}liegt. Mit dem :hover verpasst du der Box einen Rahmen, den sie vorher nicht hatte, also wird die Box an allen Seiten um 1 Pixel vergrößert und sobald das :hover wieder weg ist, wieder verkleinert. Gib also von Anfang an deiner Box einen Rahmen in der Hintergrundfarbe der Box mit und beim :hover änder die Farbe des Rahmens einfach in die gewünschte Farbe ab. Dann sollte auch das Hüpfen verschwinden.
Gruß Ben
-
Also bei mir springen die Boxen immer noch, was an
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 170px;
height: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:12px;
text-align: center;
color: #000;
background-color:#E3FBD2;
margin-top:10px;}
#menue .aussen:hover {
height: auto;
width:168px;
background-color: #e3fbd2;
border: 1px solid #ffffff;
color: #a10000;
}liegt. Mit dem :hover verpasst du der Box einen Rahmen, den sie vorher nicht hatte, also wird die Box an allen Seiten um 1 Pixel vergrößert und sobald das :hover wieder weg ist, wieder verkleinert. Gib also von Anfang an deiner Box einen Rahmen in der Hintergrundfarbe der Box mit und beim :hover änder die Farbe des Rahmens einfach in die gewünschte Farbe ab. Dann sollte auch das Hüpfen verschwinden.
Gruß Ben
Danke für den Link, werde mir die Seite mal in den nächsten tagen ansehen und gucken ob mir das weiterhilft.
Das springen ist abgestellt, zumindest im ie, für firefox bin ich noch nicht dazu gekommen.Gruß Tobias
-
-
-