Eigene Navigation funktioniert nicht

[darkjumper]

Hallo alle zusammen,

ich habe beim Styleeditor von Contendio versucht, meine selbstgeschiebene Navigation (Css-Datei) einzufügen (alles andere funktionierte wunderbar...)

Der Code sieht folgendermaßen aus:

Code: Alles auswählen

/*--Setzt alle Abstände auf "Null"--*/ 
* { 
margin: 0; 
padding: 0; 
}


/*--formatiert die Menüleiste--*/ 
#menu { 
width: 100%; 
padding: 0 20px; 
background: #003366; 
font-family: Verdana; 
font-size: 1em; 
line-height: 1.5; 
float: left; 
}


/*--formatiert die Themenblöcke--*/ 
#menu ul { 
float: left; 
width: 140px; 
list-style-type: none; 
}


/*--definiert die Blocküberschriften--*/ 
#menu h3 { 
font-size: 1em; 
text-align: center; 
color: #000; 
border: 1px solid #003366; /*--erforderlich für IE 7--*/ 
background: #ff8000; 
} 

/*--definiert die "Drop-Down-Links" im Normalzustand--*/ 
#menu a { 
text-decoration: none; 
display: block; 
border: 1px solid #ccc; 
text-align: center; 
background: #ff9224; 
color: #003366; 
} 

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/ 
#menu a:hover { 
color: #ff9224; 
background: #003366; 
}



/* 
*verhindert im Zusammenhang mit position absolute bei ul ul 
*eine Höhenvergrößerung von #menu beim Hovern-- 
*/ 

#menu li { 
position: relative; 
} 

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/ 
#menu ul ul { 
position: absolute; 
z-index: 2; 
display: none; 
}



/*--lässt die Dropdown-Links beim Hovern erscheinen--*/ 
#menu ul li:hover ul { 
display: block; 
}




/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/ 

* html #menu ul li { 
float: left; 
width: 100%; 
} 

/*--nur für IE 7 erkennbar--*/ 

*+ html #menu ul li { 
float: left; 
width: 100%; 
}


/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/ 
*html body { 
behavior: url(csshover3-source.htc); 
font-size: 100%; 
} 

*html #menu ul li a { 
height: 1%; 
}




/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/ 

#menu a.direkt:link { 
font-size: 1em; 
font-weight: bold; 
text-align: center; 
color: #000; 
border: 1px solid #003366; 
background: #ff8000; 
} 

/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/ 

#menu a.direkt:hover { 
color: #ff9224; 
background: #003366; 
border: 1px solid #ccc; 
}

<div id="menu"><!-- öffnet die Navigationsleiste--> 

   <ul><!-- öffnet den ersten Themenblock --> 

      <li><!-- öffnet die Listeneinträge von Thema 1 --> 

         <h3>Thema 1</h3> 

            <ul><!-- öffnet die Klappnavi von Thema 1 --> 

               <li><a href="#">Thema 1.1</a></li> 

               <li><a href="#">Thema 1.2</a></li> 

               <li><a href="#">Thema 1.3</a></li> 

            </ul><!-- schließt die Klappnavi von Thema 1 --> 

         </li><!-- schließt die Listeneinträge von Thema 1 --> 

   </ul><!--schließt den ersten Themenblock--> 

</div><!-- schließt die Menüleiste #menu --> 

<ul><!-- öffnet den ersten Themenblock --> 

      <li><!-- öffnet die Listeneinträge von Thema 1 --> 

         <h3>Thema 2</h3> 

            <ul><!-- öffnet die Klappnavi von Thema 1 --> 

               <li><a href="#">Thema 2.1</a></li> 

               <li><a href="#">Thema 2.2</a></li> 

               <li><a href="#">Thema 2.3</a></li> 

            </ul><!-- schließt die Klappnavi von Thema 1 --> 

         </li><!-- schließt die Listeneinträge von Thema 1 --> 

   </ul><!--schließt den ersten Themenblock--> 

</div><!-- schließt die Menüleiste #menu --> 


<ul><!-- öffnet den dritten Themenblock --> 

<li><a class="direkt" href="#">Thema 3</a></li> 

</ul><!--schließt den dritten Themenblock--> 

</div><!-- schließt die Menüleiste #menu -->

<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste--> 

.

Doch leider kommt nichts dabei heraus.


DAHER MEINE FRAGE: Habe ich da totalen "mist" geschrieben? Oder woran kann das liegen?

Über Verbesserungsvorschläge würde ich mich sehr freuen

[Spider IT]

Hallo darkjumper,

1. kannst du im Stylesheet keine Navigation schreiben, sondern nur eine vorhandene optisch formatieren
Dann sind tatsächlich ein paar Fehler drin, die von den meisten Browsern zwar ignoriert werden, aber z.B. im Internet Explodierer für Probleme sorgen können:

• Zeile 15: line-height: 1.5; - Ja sicher, 1.5 was? 1.5 Fahrspuren vielleicht? Du meinst wohl 1.5px, oder?
• Zeile 12, 34, ...: background: #...; - Richtig geraten handelt es sich um die Angabe background-color, dann schreib das auch. Die Angabe background ist eine kombinierte Angabe, die mehrere Parameter erwartet.

Weiter habe ich jetzt nicht geschaut, aber das macht auch keinen Sinn ohne das Ergebnis zu sehen.
Eine gute Hilfestellung findest du hier

Gruß
René

[Dodger77]

@René

Bei Angaben ("line-height" ohne Einheit und die "background"-Angabe) sind so völlig in Ordnung und sollen auch bei älteren IE-Versionen keine Probleme machen.

@darkjumper:

Funktioniert das mit dem CSS für das Menü denn bei lokalen Tests? Und auch wenn die Frage vielleicht überflüssig ist: in der CSS-Datei hast du aber den HTML-Code nicht drin, oder?

[darkjumper]

@Doger77

den HTML code hab ich da nicht drin^^

Was ich allerdings vergessen habe ist ein Befehl zu schließen... Wahrscheinlich liegt das daran.
Ich teste es die Woche nochmal und gebe euch bescheid.

Vielen Dank für eure Antworten