Navigation (DropDown)mit CSS und HTML

Webdesign & Technik HTML & CSS
1

hallo,

ich versuche mich gerade an einem Drop DOWN Menü, anschauen könnt ihr es hier:
ttc1974.ath.cx/test/test.php

aber irgendwie funktioniert es nicht sooo ganz :p die 4 mal 123 unter Startseite sollen eignetlich erst kommen wennn man auf Startseite drückt und der Rest der unter Startseite kommt soll dann halt nach unten Rutschen, allerdings soll diese Navigation im IE , Opera und FF gehen hat einer eine idee wie das geht?

meine CSS Datei dafür liegt hier: ttc1974.ath.cx/test/style.css

folgendes befindet sich auf der text.html seite

[code]
ul#nav { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li#nav { /* all list items */
float: left;
position: relative;
width: 10em;
}

li#nav ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}

li#nav>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li#nav:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

[/code]

kann mir eigner sagen was ich falsch mache? oder wo der fehler liegt?

mfg ttc1974

2

Ich weiß nicht, ob das das ist, was du willst, aber hier mal ein Vorschlag:

<a onmouseout="javascript:document.getElementById('startseite_links').style.display='none';" onmouseover="javascript:document.getElementById('startseite_links').style.display='block';" href="/">Startseite</a> <ul style="display: none;" id="startseite_links"> <li><a href="/archiv">Archiv</a></li> <li><a href="/download.php">Download</a></li> <li><a href="/seitmap.php">SiteMap</a></li> <li><a href="/partner.php">Partner/Banner</a></li> </ul>

3

Wenn ich mir den XHTML-Quelltext so angucke, so würde ich
erstmal sagen, daß es li#nav gar nicht geben kann, weil es
bereits ein ul#nav gibt.

Außer den Angaben für ul#nav kann da also gar nichts wirken.
Bei Bedarf könnte man den betreffenden li-Elementen einen
Klassennamen geben oder man sagt einfach:
ul#nav li oder ul#nav > li oder welche auch immer damit
gemeint sein mögen, wo man sich eben entscheiden muß,
weil das ja verschachtelte Listen sind.

Inhaltlich ist es nicht logisch, ein inzeiliges Element wie
a auf der gleichen Ebene wie ul zu verwenden, um das a
müßte eigentlich ein Blockelement herum, um eine sinnvolle
Struktur zu bekommen, die ‘dem Geiste’ von XHTML1 strict
entspricht, nur wird das der Validator aufgrund von
Einschränkungen der DTD nicht automatisch bemängeln
können. Aufgrund irgendeines fehlerhaften Zeichens in der
Seite weigert der sich sowieso, sich die Seite näher anzugucken,
sollte man auch noch mal die Kodierung richtig setzen ;o)

Steditor - der Vorschlag ist insofern sehr schlecht, als mit CSS
Inhalt ausgeblendet wird und mit einen Skript/event-handler
wieder ein, der Inhalt wird unzugänglich bei deaktivierter
Skriptinterpretation. Man müßte also beides mit CSS machen
(Pseudoformat :hover) oder beides mit einem Skript
(event-handler onload für das Ausblenden).

4

Das Problem ist, das IE :hover nur bei Links akzeptiert, und daher die Unterlinks von Startseite auch in der HTML Struktur untergeordnet sein müssten.

5

Ich meine, MSIE7 hat den Fehler nicht mehr.

Fehler oder Lücken bei MSIE6 und älter sind natürlich kein
Grund, die Struktur der HTML-Seite zu vergurken oder die Seite
für andere Nutzer unzugänglich zu machen, die solch einen
browser gar nicht nutzen und von dem Problem gar nicht
betroffen sind.
Beim MSIE ist es ja dank ‘conditional comments’ immer
möglich, eine zusätzliche CSS-Datei anzugeben, in der die
Fehler älterer MSIEs so kompensiert werden, daß deren Nutzer
die Seite immer noch lesen können, trotz der Fehler des MSIE,
hier kann man etwa alle Untermenüs sichtbar lassen. Man
kann auch per ‘conditional comment’ nur für die antiken Dinger
ein Element script einfügen, welches eben den dynamischen
Effekt bei denen mittels Skript erreicht. Auch dabei sollte man
darauf achten, daß der Inhalt zugänglich bleibt, wenn jemand
mit einem antiken MSIE und deaktivierter Skriptinterpretation
die Seite anguckt.
Beim MSIE hat man leider immer erhebliche Probleme aufgrund
der vielen Fehler und Lücken. Zudem läßt sich bei dem wohl
zummindest vom Nutzer CSS auch nicht dekativieren, um die
Zugänglichkeit und Lesbarkeit bei zu fehlerhafter Interpretation
zu verbessern.

6

so ich habe jetzt mal das ganze zeugs hier:

[code]
ul#nav { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li#nav { /* all list items */
float: left;
position: relative;
width: 10em;
}

li#nav ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}

li#nav>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li#nav:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

[/code]

raus genommen, dann brauhce ich wohl einen ganz neuen ansatz das es mit IE und mit Opera/FF geht kann mir einer einen Vorschalg dafür geben? wie man das mit CSS umsetzten kann?
ich komm einfach net weiter mit der Navigation -.-

mfg
ttc1974

7

Also, wenn die Kommentare in dem CSS ernst zu nehmen sind,
änderst du das einfach leicht ab.

ul#nav bleibt wie es ist

statt li#nav schreibst du (/* all list items */):
ul#nav li

statt li#nav ul schreibst du ( /* second-level lists */)
ul#nav ul

statt li#nav>ul schreibst du dann wohl
ul#nav > li > ul

und statt li#nav:hover ul, li.over ul schreibst du
ul#nav > li:hover ul

Nehmen wir jetzt an, du hast im Quelltext sowas:

<ul id="nav">
<li><h2>Überschrift</h2>
      <ul><li>...</li></ul>
</li>
</ul>

So funktioniert das Aufklappen der untergeordneten Liste
recht einfach:

ul#nav > li > ul { display: none }
ul#nav > li:hover > ul { display: block }

Dabei kann es jetzt bei komplett CSS-fähigen browsern das
Problem geben, daß man nicht will, daß sich der Text darunter
beim Aufklappen verschiebt, das kann man sinngemäß so
verhindern:

ul#nav > li {min-width: 10em; position: relative; top: 1px}
ul#nav > li > ul { display: none; position: absolute; top:0; left:8em}
ul#nav > li:hover > ul { display: block }

Nun gibt es antike browser wie den MSIE6, die können damit
verschiedene Probleme haben, die zumindest für den MSIE6
hier wohl schon kompensiert sein sollten - der wird immer alles
anzeigen und nichts aufklappen, weil er den Selektor ‘>’ nicht
interpretiert. Genauso wird es anderen browsern gehen, die den
nicht interpretieren. Solche, die das können, können in der Regel
auch li:hover interpretieren. Sollte man einen finden, der das
nicht kann, aber ‘>’ interpretiert, müßte man da
browser-abhängig weitertricksen ;o)

Wenn du da jetzt auch noch für den MSIE6 was zum ‘Klappen’
bringen willst, bastelst du das entsprechende Skript in
’conditional comments’ rein oder du installierst das Skript von
Dean Edward: dean.edwards.name/IE7/
Mit dem kann ein MSIE obiges CSS einigermaßen interpretieren,
wenn Skriptinterpretation aktiviert ist. Ist sie es nicht, sind alle
Untermenüs aufgeklappt und zumindest zugänglich und
funktionsfähig.

8

Ein Versuch von mir:
Dein Menü sieht so aus:

<div id="menus"> <!-- der Block um den ganzen Menükasten -->
 <h1>Men&uuml; 1</h1> <!-- Überschrift des Menüs -->
 <div> <!-- Block um Untermenü 1 -->
  <a href="/">Untermen&uuml; 1</a> <!-- Überschrift des Untermenüs -->
  <ul> <!-- Die Links -->
   <li><a href="/eins">Link1</a></li>
   <li><a href="/zwei">Link2</a></li>
   <li><a href="/drei">Link3</a></li>
   <li><a href="/vier">Link4</a></li>
  </ul>
 </div>
 <div> <!-- Block um Untermenü 2 -->
  <a href="/">Untermen&uuml; 2</a> <!-- Überschrift des Untermenüs -->
  <ul> <!-- Die Links -->
   <li><a href="/eins">Link1</a></li>
   <li><a href="/zwei">Link2</a></li>
   <li><a href="/drei">Link3</a></li>
   <li><a href="/vier">Link4</a></li>
  </ul>
 </div>
 <!-- weitere Untermenüs -->
 <h1>Men&uuml; 2</h1> <!-- Überschrift des Menüs -->
 <div> <!-- Block um Untermenü 1 -->
  <a href="/">Untermen&uuml; 1</a> <!-- Überschrift des Untermenüs -->
  <ul> <!-- Die Links -->
   <li><a href="/eins">Link1</a></li>
   <li><a href="/zwei">Link2</a></li>
   <li><a href="/drei">Link3</a></li>
   <li><a href="/vier">Link4</a></li>
  </ul>
 </div>
 <!-- Und so weiter -->
</div>

Das Style dazu:

<style type="text/css">
<!--
div#menus h1{
background-color:#555555;
color:#FFFFFF;
font-weight:bold;
margin:7px 0pt 5px;
padding:3px 3px 3px 5px;
}
div#menus a{
	color:#555555;
	display:block;
	padding:3px 3px 3px 5px;
	text-decoration:none;
}
div#menus a:hover{
	color: #000000;
	background-color: #FFD700;
}
div#menus li{
	list-style: none;
}
div#menus div ul{
	display: none;
}
div#menus div:hover ul{
	display: block;
}
-->
</style>

Anschauen kannst du das hier:
steditor.bplaced.net/scripts/menue.html

9

hoi

also ich habe Steditor aufbau genommen und für den IE einfach das hier:

[code]<!–[if lt IE 8]>

<![endif]–>[/code]

genommen und siehe da alles geht

dankeleute

nice team :stuck_out_tongue:

mfg paul

10

Das ist schön. Ich habe gerade geguckt, der Code ist aber ziemlich lang. Wahrscheinlich verzögert er die Ladezeiten um einiges.

Wenn es ohne Code im IE7 klappt reicht es, wenn du ihn nur für den IE6 damit einbindest:

Wenn ich mir deinen Code zu angucke, dürfte aber auch die Lösung von Selfhtml passen. de.selfhtml.org/css/layouts/navi … htm#modern . Du müsstest aber noch Klassen umschreiben oder ergänzen. Der Javascript-Code dort ist auch zielgerichteter und schlanker.

Du kannst dir auch auf meiner Opera-Seite angucken, wie man es umbasteln kann, das Menü basiert auch auf dem Selfhtml-Teil.

Ich hoffe, ich warn bissl hilfreich und habe nicht deine Arbeit kaputtgemacht :slight_smile: