horizontale Navigation

[Andi]

Hallo Zusammen,
auf der Suche nach einer Lösung zur horizontalen Navigation bin ich auf folg. Tutorial gestoßen: http://www.thestyleworks.de/tut-art/listnav5.shtml

im Firefox funzt alles, nur im IE (7) läufts nicht... (zeigt Listenelemente untereinander, statt nebeneinander an,

hier der Link zur Seite:
http://www.firum.de/selfhtml/htm/

hier der Teil des CSS, den ich verwende:

#nav li { /* floaten der Hauptlistenpunkte */
margin: 0; float: left; display: block; padding-right: 5px; }

#nav li.off ul, #nav li.on ul { /* Verstecken der Untermenus */
display: none; }

#nav li a { /* Fur alle Links in der Liste */
display: block; height: 15px;  border: 0px solid #29497b; padding: 1px; }

#nav li.off ul, #nav li.on ul {
 display: none;
 position: absolute;
 top: 33px;

left: 2px;
 padding-top: 10px;
 width: 509px;
}

#nav li.on a { /* Rahmenfarbe fur aktive Flache andern */
border: 1px solid #f90; }

#nav li.on ul a, #nav li.off ul a { /* Vererbung des Rahmens fur Untermenu des aktiven Themas unterdrucken */
border: 0; }

#nav li.on ul { /* Liste des aktiven Untermenus ausgeben */
display: block; }

#nav li.on ul a, #nav li.off ul a {
float: left; /* IE vererbt den Float nicht */ border: 0; color: #f90; width: auto; margin-right: 15px; }

#nav li.on ul { /* Aktuelle Thema anzeigen */ display: block; }

#nav li.off:hover ul { /* Die anderen Themen anzeigen bei hover uber dem Elternmenu */ display: block; z-index: 6000; }

#nav li.off a:hover, #nav li.off:hover a {
background: white; color: red; }

#nav li.off ul, #nav li.on ul { /* Subnav nach unten verschieben */
top: 100px; *top: 44px; /* Repositionierung fur IE */ }

(Zitat)
Jetzt fügen wir für alle Listenelemente, für die :hover deklariert ist, noch schnell die Klasse over ein. Damit funtioniert die Liste für IE-Nutzer ebenso gut wie für alle anderen.

#nav li.off:hover ul, #nav li.over ul { display: block; z-index: 6000; }
#nav li.off a:hover, #nav li:hover a, #nav li.over a { background: #29497b; color: #f90; }

Den Teil des Quelltextes habe ich o.g Quelle entnommen und adaptiert. trotz dem Einfügen erscheint bei mir im IE7 die Menu-Leiste untereinander...

Ich kann leider keinen Fehler finden :-(

Danke vorab
Andi

[Zeromancer]

Hallo Andi,

schon mal den CSS-Validator befragt?

Mit freundlichen Grüßen,
André

[Wolke]

Hallo,
mal von diesem konkreten Fall abgesehen, wie
wichtig ist eigentlich Validierung?

Ich lese hier immer wieder, wie Leute angemacht werden,
die eben keien Doctypeangabe haben, oder andere unvalidierbare
Quelltexte haben. Mir fällt dabei der einheitliche ernste
Tenor auf.

Was mich dabei wundert ist, dass Firmen denen die besten
Webdesigner, Programmierer, usw. zur Verfügung stehen, dass
eben anscheinend viel weniger "ernst" betrachten.

Wie kommt es zu  dieser  unterschiedlichen Auffassung?
Und (die eigentliche Frage), soll ich unter allen Umständen
oberste Priorität auf Validierung legen?

Beispiel:
googlenews css
* sollte eigentlich ein Link werden, mache wohl irgendwas verkehrt.

google html
*Dieser klappt aber ;-)

Gruss
Wolke

[Dieter Raber]

Hallo Wolke,

Wenn du vor sechs, sieben Jahren Webseiten gemacht hast, war eines der grossen Probleme, dass die beiden grossen Browser seinerzeit, NN4 und IE 5 wirklich voellig unterschiedlich waren, insbesondere, was JS oder CSS anbetrifft. Damals musste man wahnsinnig viel Arbeit doppelt machen, um einen minimalen Kompromiss zu erreichen, das war teuer und oft frustrierend.

Heute hat sich das ja Gottseidank geaendert, der IE hat immer noch seine Zipperlein, aber im grossen und ganzen werden Webseiten in IE und FF sehr aehnlich dargestellt und dank DOM sind auch die Unterschiede in JS ueberschaubar geworden.

Mit anderen Worten, die Browserhersteller sind heute offenbar recht bemueht, sich an Standards zu halten. Das zeigen ja auch die Konsultationen zwischen IE-, FF-, Opera- und Konquerorleuten in letzter Zeit.

Jetzt liegt es an den Web Developern, sich ebenfalls an diese Standards zu halten und nur solche Seiten zu bauen, die valide sind, und die ergo auch in allen Browsern gleich laufen. Klar muss man machmal Kompromisse machen, z. B. bei der <object>-<embed> Kombination fuer Videos, aber ansonsten wird es schwer, Ausreden fuer invaliden Code zu finden. In meinen Augen sind die Leute, die invaliden Code schreiben, die gleichen, bei denen z. B. PHP-Seiten nur mit register_globals = on und error_reporting(0) funktionieren, und die am lautesten schreien, wenn irgendwas nicht funktioniert. Die zahlreichen 'Scheiss-IE-FF-sonstwas-kotzt-mich-an-Postings' hier im Forum demonstrieren diese Haltung ja immer wieder eindrucksvoll.

[...] die besten Webdesigner, Programmierer [...] weniger "ernst" betrachten.

Klar, hier im Forum gibt es bei vielen eine gewissen Fanatismus in Bezug auf die reine Lehre, was sicher auch damit zusammenhaengt, dass viele hier Webentwicklung eher als Hobby betreiben. Im wahren Leben muss man mit seiner Arbeit halt Geld verdienen und auch mal ein Auge zudruecken koennen. Ich meine, man muss als Developer beides koennen, wissen, wie es richtig gemacht wird und mit Blick auf das Firmenkonto auch einmal ein paar weniger valide Bytes uebersehen koennen.

Developer, die hingegen heute noch wie vor fuenf Jahren schreiben, muessen sich fragen lassen, ob sie den richtigen Job haben.

Gruß,

Dieter

[Detlef G.]

Hallo Wolke

mal von diesem konkreten Fall abgesehen, wie
wichtig ist eigentlich Validierung?

Um so wichtiger, je weniger Erfahrungen der Seitenschreiber hat.

Ich lese hier immer wieder, wie Leute angemacht werden,
die eben keien Doctypeangabe haben, oder andere unvalidierbare
Quelltexte haben. Mir fällt dabei der einheitliche ernste
Tenor auf.

Wenn keine DTD vorhanden ist, oder Fehler im Quelltext vorliegen, gehen die Browser in den "ich rate mal, wie es wohl gemeint sein könnte"-Modus. Damit erfordert es viel Erfahrung einschätzen zu können, wie sich welcher Browser genau verhalten wird.
Häufig kommt die Aussage: "Ich bin ja noch nicht fertig, die DTD kommt zum Schluss. Dann beseitige ich auch die noch vorhandenen Fehler. Aber jetzt will ich erstmal das Darstellungsproblem gelöst haben!"
Oft (nicht immer) sind genau die Fehler oder die fehlende DTD für genau dieses Darstellungsproblem verantwortlich, oder das Aussehen wird sich durch das Einfügen der DTD sowieso wieder ändern.

Ich halte es deshalb für wesentlich effektiver, den Fragesteller darauf hinzuweisen, sein Dokument zu validieren, statt jeden Fehler einzeln manuell zu suchen und zu analysieren, ob dieser Einfluss auf die fehlerhalte Darstellung hat, um dann nach Einfügen der DTD oder/und Beseitigung alter oder Einbau neuer Fehler wieder von vorn anzufangen.

Auf Wiederlesen
Detlef

[Andi]

so, da bin ich wieder...

ich muss leider sagen... css ist (jetzt) komplett richtig (validiert)
waren ein paar kleinigkeiten, muss dennoch öfter daran denken, die Validierung zu nutzen (*danke für den Tipp)

Das Problem besteht noch immer...
im FF funzt es, im IE leider nicht (Version 7)

ich schreibe mal den Autoren an... dennoch danke bis hierher

Gruß Andi

ps. habe leider keinen IE 6 mehr, ist dort der Fehler auch, das die Navigationsleiste dort vertikal dargestellt wird?
Danke!

hier nochmal der link: http://www.firum.de/selfhtml/htm/

[Detlef G.]

Hallo Andi

ps. habe leider keinen IE 6 mehr, ist dort der Fehler auch, das die Navigationsleiste dort vertikal dargestellt wird?

Auch in meinem 6er IE wird die Navigationsleiste vertikal dargestellt.
Der IE dehnt #nav li a auf die gesamte Breite aus, dadurch werden #nav li dann auch so breit, dass keine nebeneinanderpassen.

Wenn du #nav li a auch ein float mitgibst, dann dürfte es funktionieren.

Warum steht das Javascript eigentlich im body statt im head?

Auf Wiederlesen
Detlef

[Andi]

Hallo Andi

Servus ;-)

ps. habe leider keinen IE 6 mehr, ist dort der Fehler auch, das die Navigationsleiste dort vertikal dargestellt wird?

Auch in meinem 6er IE wird die Navigationsleiste vertikal dargestellt.

.> habe den 7er deinstaliert...

Der IE dehnt #nav li a auf die gesamte Breite aus, dadurch werden #nav li dann auch so breit, dass keine nebeneinanderpassen.

Wenn du #nav li a auch ein float mitgibst, dann dürfte es funktionieren.

-> juhuu, das klappt super!

Warum steht das Javascript eigentlich im body statt im head?

;-) danke, habe ich geändert

sag mal, hast du gesehen, das sich im Navigationsbereich unter Fotografie Name1 Name1 Name1 erscheint? (wie im FF)
im 7er hats geklappt, da habe ich es gesehen, jetzt im 6er IE bekomme ich es trotz workaround nicht zu laufen...

vielleicht habe ich noch nen credit ;-)
Danke!

Auf Wiederlesen

-> würd mich freuen
Andi

Detlef

[Detlef G.]

Hallo Andi

sag mal, hast du gesehen, das sich im Navigationsbereich unter Fotografie Name1 Name1 Name1 erscheint? (wie im FF)

Gestern hat erschien diese Zeile im IE erstmal nicht. Das Javascript sah so aus:
<!--startList = function() ...

Nachdem ich das Javascript ein wenig entwirrt hatte gab es keine Probleme mehr.

im 7er hats geklappt, da habe ich es gesehen, jetzt im 6er IE bekomme ich es trotz workaround nicht zu laufen...

Was sagt dir die Javascript-Konsole des Firefox?
In diesem Fall ist sogar die Javascript-Fehlermeldung des IE hilfreich.

Auf Wiederlesen
Detlef