Vielleicht solltest du die Probleme auch mal beschreiben? Dass die Navigation verschoben ist, liegt vermutlich einfach nur daran, dass du das margin-left aus dem IE-internen Stylesheet nicht beachtest bzw. neu definierst. Das padding-left in modernen Browsern setzt du ja dagegen auf 0. Das kann man sicherlich auch schnell mit der Developer Toolbar für den IE herausfinden.

rs-hax0r

1.
IE7.jpg
So sieht es im IE7 unter Vista aus.

2. Hab da etwas gefunden, was ich vielleicht auch gerne umsetzen würde.
http://www.deezer.com/
Wie erzeugt man diesen animierten Mouseovereffekt, wie z.B. ganz oben unter "Home", "Music",.. oder wie bei dem Sign-in Button?
Danke

cs-banane

Meinst du den Player einzubinden auf den Dropdownmenue, dass wenn man mit der Maus ueber den Button kommt, der Player erscheint?

Das gleiche Problem habe ich auch grade in meinem neuen Thread beschreiben.

Vielleicht sollte man nicht alles durcheinander bringen und sich diesbezueglich in dem Thread drauf konzentrieren.

Du kannst da ja auch oefters vorbeischauen.

aNtiCHrist

Wie es im IE 7 aussieht weiß ich selbst. Ich habe nur keine Lust, den angeblich vorhandenen zweiten Fehler zu finden ...

Die Spielerei bei Deezer ist mit Flash realisiert. Mit JS bekommt man soetwas allerdings auch hin und hat dabei dann nicht den Nachteil, dass es keine normalen Links sind, wodurch dann z. B. das Öffnen in einem neuen Tab oder das Kopieren des URIs unmöglich wird. Zudem musst du dann die Links nicht doppelt (in Flash und als Fallback für Nutzer ohne Flash oder Suchmaschinen) realisieren, sondern kannst die normalen Links um die Effekte erweitern.

Mit script.aculo.us lässt sich das z. B. ohne große Kenntnisse realisieren.
Einblenden von bunten Buttons: http://wiki.script.aculo.us/scriptac...Effect.Opacity
padding-bottom erhöhen: http://wiki.script.aculo.us/scriptac...w/Effect.Morph

monoblock

Also den Anspruch das ganze valid zu gestalten finde ich ja gut, aber rein Usability-technisch ist das bis jetzt unter aller Sau.

mfg
mono

rs-hax0r

Zitat:

Zitat von cs-banane

Meinst du den Player einzubinden auf den Dropdownmenue, dass wenn man mit der Maus ueber den Button kommt, der Player erscheint?

Das gleiche Problem habe ich auch grade in meinem neuen Thread beschreiben.

Vielleicht sollte man nicht alles durcheinander bringen und sich diesbezueglich in dem Thread drauf konzentrieren.

Du kannst da ja auch oefters vorbeischauen.

Was schreibst du denn da für einen Mist?!
Ich habe doch gar nichts mit Player gesagt, und Werbung für deinen Thread kannst du auch woanders machen.. oO

Zitat:

Zitat von aNtiCHrist

Wie es im IE 7 aussieht weiß ich selbst. Ich habe nur keine Lust, den angeblich vorhandenen zweiten Fehler zu finden ...

Wieso angeblich? Meinst du es liegt an mir, also das ich einen Fehler gemacht habe?
Wäre mir eigentlich schon wichtig, dass die Seite auch in anderen Browsern korrekt angezeigt wird. Nicht jeder nutzt ja den Firefox.
Meinst du es wäre "sinnvoll" den Entwickler, also Stu Nicholls anzuschreiben?
Auf seiner Seite bittet er immerhin darum, sich bei Problemen an ihn zu wenden.

Zitat:

Zitat von monoblock

Also den Anspruch das ganze valid zu gestalten finde ich ja gut, aber rein Usability-technisch ist das bis jetzt unter aller Sau.

mfg
mono

Ist die Navi denn so unpraktisch?!

aNtiCHrist

Zitat:

Wieso angeblich?

Weil du den Fehler bisher trotz Nachfrage nicht benannt hast.

Zitat:

Meinst du es liegt an mir, also das ich einen Fehler gemacht habe?

Wenn es um die Verschiebung der Navigation nach rechts geht, dann ja. Bei dem anderen Problem wäre es möglich. Ich kann das aber nicht beurteilen, weil ich eben nicht mal weiß, wo dieses Problem liegt.

Zitat:

Wäre mir eigentlich schon wichtig, dass die Seite auch in anderen Browsern korrekt angezeigt wird. Nicht jeder nutzt ja den Firefox.

Wird sie doch schon in Opera, SeaMonkey, Konqueror und Safari. Das sind praktisch alle Browser, die man als Alternative zu Firefox nutzen wollen wird. Wenn du unbedingt kosmetische Probleme im IE beheben willst, solltest du diese endlich mal benennen.

Zitat:

Meinst du es wäre "sinnvoll" den Entwickler, also Stu Nicholls anzuschreiben?

Wenn sein Code tatsächlich vermeidbare Probleme hervorruft, dann auf jeden Fall. Bisher gibt es jedoch keinerlei Anzeichen, dass dies so wäre und ich bezweifle auch stark, dass dies der Fall ist.

Zitat:

Ist die Navi denn so unpraktisch?!

Ja, es ist ziemlich verwirrend, dass die ganzen Menüpunkte fröhlich hin und herspringen.

rs-hax0r

Zitat:

Zitat von aNtiCHrist

Weil du den Fehler bisher trotz Nachfrage nicht benannt hast.

Aber sicher:

Zitat:

Zitat von rs-hax0r

1.
Anhang 31166
So sieht es im IE7 unter Vista aus.

Zitat:

Zitat von aNtiCHrist

Ja, es ist ziemlich verwirrend, dass die ganzen Menüpunkte fröhlich hin und herspringen.

Eigentlich hast du ja Recht

Meinst du, ich kann dem irgendwie entgegenwirken, ohne die ganze Navigation zu verwerfen?

Die Sache mit script.aculo.us habe ich leider auch noch nicht so wirklich realisieren können.
Ich werde die tage wohl noch ein wenig probieren müssen.

aNtiCHrist

Das ist lediglich ein Screenshot, der angeblich zwei Fehler enthält. Soll das ein Suchbild sein? Ich mache bei der Suche zumindest nicht mit.

Zitat:

Meinst du, ich kann dem irgendwie entgegenwirken, ohne die ganze Navigation zu verwerfen?

Ja, natürlich. Z. B. indem du die Unterpunkte seitlich anzeigen lässt, ohne die anderen Punkte zu verschieben.

rs-hax0r

Zitat:

Zitat von aNtiCHrist

Das ist lediglich ein Screenshot, der angeblich zwei Fehler enthält. Soll das ein Suchbild sein? Ich mache bei der Suche zumindest nicht mit.

Tut mir Leid, ich weiß nur nicht genau wie ich euch das beschreiben soll.
1. Der Text ist zuweit rechts.
2. Der Text hat eine falsche Farbe, auch beim hovern.
3. Beim überfahren mit der Maus eines Menüpunktes erscheint kein Rahmen.
4. Beim überfahren eines Unterpuntkes verschwindet dieser.

Zitat:

Zitat von aNtiCHrist

Ja, natürlich. Z. B. indem du die Unterpunkte seitlich anzeigen lässt, ohne die anderen Punkte zu verschieben.

Was hast du dir denn gedacht, wie man das machen sollte?
Habe gerade als erstes folgendes versucht:

Code:

ul.menu1 li:hover ul, 
ul.menu1 li a:hover ul {position:relative; right:20px;display:block; height:auto; width:12em; margin-top:-1px; background:none; border:1px dashed grey;}

Jedoch verschieben sich dann die einzelnen Listenpunkte ja dennoch.

aNtiCHrist

Zitat:

Der Text ist zuweit rechts.

Das hatte ich ja schon selbst bemerkt und dir den mutmaßlichen Grund auch genannt. Eine Rückmeldung blieb bisher aus.

Die anderen Probleme kann ich bestätigen, nachdem endlich der Hinweis darauf kam, im Screenshot die letzten beiden Probleme ja nicht mal zu sehen. Mir ist der Code zum Debuggen kompliziert, im IE entsteht ja ein anderer und zudem ungültig aufgebauter Elementbaum und die Selektoren für den korrekten Dokumentbaum sind mit denen für den IE vermischt.

Ich erschlage solche Mängel im IE lieber mit http://htmldog.com/articles/suckerfish/dropdowns/, das ist deutlich übersichtlicher. Dort findet sich auch ein sehr viel besseres Beispiel für ein vertikales Menü: http://htmldog.com/articles/suckerfi.../vertical.html

rs-hax0r

Habe hier einmal das Suckerfish Dropdown genutzt:
index2.html
Wie verschiebe es weiter nach rechts, um es danach nach links ausklappen zu können? (Und wie lasse ich es nach links ausklappen?)
- Der dazugehörige css Teil

aNtiCHrist

Die Idee ist zwar etwas ungewöhnlich aber schon mal sehr viel besser als das vorige Menü. Ich finde, dass

Code:

#nav li ul { /* second-level lists */
  margin-left : 11.05em;
}

zur Positionierung der Untermenüs recht interessant aussieht. Die Positionierung des Hauptmenüs macht man auch ganz normal mit margin/padding.

Dein XHTML und dein Stylesheet enthalten übrigens wieder diverse Fehler. Wie oft soll ich dich noch auf die Validatoren hinweisen?

rs-hax0r

Ich habe das Menü von Suckerfish so übernommen, daher auch die Styles.

aNtiCHrist

Das ist aber keine Begründung für die Fehler. Zum einen sind sie in dem verlinkten Beispiel nicht drin, zum anderen wäre es selbst dann keine Entschuldigung, denn du hättest deinen Code (der dir ja offenbar Probleme macht) routinemäßig vor der Verlinkung hier prüfen sollen. Dabei hätten dir die Fehler auffallen müssen und selbst wenn du sie nicht korrigieren könntest, hättest du zumindest darauf hinweisen und um Hilfe bei der Korrektur bitten sollen.

Du strapazierst mittlerweile meine Geduld bis an ihre Grenzen. Warum?

rs-hax0r

Anstatt mich zu entschudligen, was sicherlich eh nicht ernst rüber kommen würde, habe ich mich endlich einmal ans Werk gemacht:

Zitat:

Zitat von Validome

Das Dokument ist valides XHTML 1.0 Transitional

Zitat:

Zitat von W3C Validation Service

Gratuliere! Keine Fehler gefunden.

edit:
Es ging um die Frage:
Wie verschiebe ich das Menü etwas weiter nach rechts? -> Wie lasse ich das Menü nach links ausklappen?

aNtiCHrist

Warum habe ich bei dir immer das Gefühl, dass du mich verarschen willst? Ich brauche deine neue Seite nicht mal erneut zu validieren, die Fehler sind so offensichtlich. Das Stylesheet enthält auch weiterhin massig Fehler. Ich frage mich, wie es bei dir zu diesen Meldungen gekommen sein soll. Da drängt sich mir einfach der Verdacht auf, dass du die URIs überhaupt nicht validiert hast. Ich bitte um eine Erklärung.

Zitat:

Es ging um die Frage:
Wie verschiebe ich das Menü etwas weiter nach rechts? -> Wie lasse ich das Menü nach links ausklappen?

Das war und ist mir durchaus bewusst. Aber offenbar sollte ich dich mal daran erinnern, dass ich neben der noch nicht umgesetzten Bitte um die Korrektur der Fehler dir bereits die mutmaßlich zu ändernden Stellen genannt habe und von dir dazu schon wieder keine Rückmeldung erhalte.

rs-hax0r

Ich werde sterben.. *wallbash*
Ich habe die Dateien (html / css) nur per File-Upload validieren lassen, demnach offline.
Diese wurden danach natürlich, wie sollte es anders sein, nicht von mir hochgeladen.
Da verstehe ich es echt, wenn du dir total dämlich vor kommst.. *wallbash*

Habe es nun auch hinbekommen, das Menü nach rechts zu verschieben, sowie das Ausklappen nach links.

- Wie verkürze ich die einzelnen Listenpunkte?
width.jpg
Ich dachte mir durch width-Angaben, jedoch habe ich es so nicht hinbekommen.

rs-hax0r

1. So, habe es nun "etwas" hinbekommen:
list.jpg
Im unteren Abschnitt des Bildes sieht, man dass der Listenpunkt an sich schon kürzer geworden ist.
Jedoch ist beim hovern, der graue Balken deutlich zu lang.
Wie formatiere ich diesen?

2.
Galerie
(Bitte nicht auf die Bildgröße achten, ich werde diese noch komprimieren.)

Frage: Ist es irgendwie möglich, dass die Bilder wieder kleiner werden wenn man die Maustaste loslässt, auch, wenn man die Maus leicht zur Seite bewegt?

- Funktionsweise:
Man fährt über einen Bildausschnitt und klickt dieses an.
Bei gedrückter linker Maustaste erscheint das Bild in voller Größe.
Wird die Maustaste losgelassen, wird das Bild wieder kleiner.
Bewegt man nun aber, während die Maustaste gedrückt ist, die Maus leicht zur Seite und lässt diese dann los, verschwindet das Bild nicht.
- Kann man dem irgendwie entgegenwirken?

Danke

aNtiCHrist

Zitat:

Jedoch ist beim hovern, der graue Balken deutlich zu lang.
Wie formatiere ich diesen?

Teilweise frage ich mich, wie du überhaupt so weit gekommen bist. Den DOM-Inspector empfehle ich dir ja sicherlich nicht zum ersten mal, oder? Dort kann man nämlich (wenn man rechts CSS Style Rules auswählt sehr schnell den Grund finden. Ansonsten kommt man aber auch durch einfaches Nachdenken darauf. So viele CSS-Eigenschaften mit Einfluss auf die Elementbreite gibt es ja nun nicht.

rs-hax0r

Die Füllung an sich habe ich ja bereits kürzer hinbekommen.
Jedoch taucht dann immer, ein mir unerklärliches Problem auf:

Wenn man über beispielsweise Punkt1 hovert, fangen die Unterpunkte an zu flackern, sobald man bei Punkt1 zu weit nach links fährt.
Jedoch finde ich nicht heraus, wieso.

aNtiCHrist

Weil du für die :hover-Pseudoklasse eine andere, schmalere Breite definiert hast. Kann man auch im DOM-Inspector herausfinden: Linke Ansicht -> Dom Nodes -> gewünschten Knoten rechtsklicken -> Pseudo-Klassen setzen -> [x] :hover

Generell solltest du für die :hover-Pseudoklassen immer nur so viel neu definieren wie nötig, das erspart dir solche Probleme.

rs-hax0r

Wo ist denn diese schmalere Breite in der .css vermerkt?
Habe schon diverse Größen ausprobiert, jedoch kam nichts dabei heraus.. :/

aNtiCHrist

Du sollst ja auch nicht ziellos rumprobieren, sondern die überschüssige Definition für die :hover-Pseudoklasse aufspüren und entfernen. Ist meine Anleitung so unverständlich? Dann sag das bitte. Es hilft ja nichts, wenn ich dir demnächst zum dritten mal den DOM-Inspector empfehle und du wieder nicht damit umgehen kannst und somit deine Probleme nicht oder nur sehr viel schwerer selbst lösen kannst.

Selbst wenn du meiner Anleitung nicht folgen konntest, so übermäßig viele Selektoren mit :hover gibt es doch gar nicht. Ich zähle gerade mal drei Stück ...

Anzeige