• Pulldownmenü mit CSS - Editor: Kompozer

    von
    super-nova
    Veröffentlicht: 20.10.10 07:37  Seitenaufrufe: 6868  
    12 Kommentare Kommentare
    In diesem kleinen Video Tutorial möchte ich zeigen, wie man nur mit CSS ein zugegeben sehr einfaches Pulldownmenü realisieren kann. Dabei wird kein JavaScript oder sonstiges benötigt, sondern einfach nur HTML und CSS.
    Als Editor für das CSS verwende ich, wie schon in anderen Videos vorgestellt, den WYSIWYG-CSS-Editor Kompozer.

    javaDeveloper2011 und gsu bedanken sich. 

    1. Kategorien:
    2. Tutorials,
    3. HTML-Tutorials,
    4. CSS-Tutorials
     
    Kommentare 12 Kommentare
    1. Avatar von genodeftest
      genodeftest - 20.10.10, 22:07
      Hi super-nova
      Danke für das Tutorial.
      Mal sehen ob das auch mit Listen (statt div containern) funktioniert…
    1. Avatar von super-nova
      super-nova - 20.10.10, 23:13
      es funktioniert ganz sicher problemlos mit Listen.
      Das ist ja für diese Art der Verwendung von div und span ganz unerheblich,
      das geht genauso mit ul und li

      ist aber sicher ein guter Tipp....
    1. Avatar von sight011
      sight011 - 20.10.10, 23:32
      Suuuuuper Danke für das spitzen Klotorial
    1. Avatar von sight011
      sight011 - 20.10.10, 23:35
      Noch ne Frage dieses Programm "KompoZer" gibt es da irgendwelche Nachteile?

      Zum Beispiel habe ichschon häufig gehört das Leute Dreamweaver nicht mögen, weil das den Quelltext "verhunzen" soll. Muss ich da bedenken bei KompoZer haben?

      Weil das war jetzt ja super schnell von dir, wie Du das ganze gebaut hast!
    1. Avatar von super-nova
      super-nova - 21.10.10, 00:01
      ich weiß zwar nicht, was ein Klotorial ist... aber was solls....

      Kompozer liefert einen astreinen Quellcode, also genau so, als hätte man ihn mit einem Texteditor eingegeben. Einfach mal den Kompozer runterladen und ein Style eingeben, dann siehst du das auch sofort.

      Nachteile:
      es sind nicht alle CSS-Spezifikationen aufgeführt, z.B fehle im graphischen Frontend eine Angabe für das Letterspacing, um nur mal eine Sache zu nennen.

      Man kann sich dabei aber auch behelfen und den Code z.B. für letterspacing direkt in den Kompozer eingeben. Wie das geht, siehst du auch in den anderen Tutorials, die ich über den Kompozer gemacht haben.
      Ein anderer Nachteil ist, das man keine CSS-Kommentare hinzufügen kann.
      Es könnte aber möglich sein, dass bei einer Weiterentwicklung diese Nachteile
      ein entscheidender Vorteil gegenüber Dreamweaver von Adobe, den du ja schon angesprochen hast, und auch dem Stylizer von der kanadischen Firma skybound ist, dass der Kompozer kostenlos ist.
    1. Avatar von sight011
      sight011 - 21.10.10, 00:11
      Du versprichst dich am Ende klingt wie Klotorial
    1. Avatar von sight011
      sight011 - 21.10.10, 00:13
      Also bitte nicht falsch verstehen

      Echt SPITZE, Erste Sahne, 1A bin echt begeistert ... weiß noch wie ich mir einen mit dem Drop-Down abgebrochen habe und Dumachst das hier mal eben in lockerer Rekordzeit


      *Thumbs-Up*
    1. Avatar von super-nova
      super-nova - 21.10.10, 00:37
      @Du versprichst dich am Ende klingt wie Klotorial

      oh, das habe ich gar nicht bemerkt...
      ich werde auf meine Aussprache achten

      ich hatte schon angenommen, es sollte eine Kombination von Kompozer und Tutorial sein...
    1. Avatar von kalterjava
      kalterjava - 22.10.10, 08:19
      Hallo und Danke für das Tutorial. Ich habe es noch nicht angeschaut, aber werde dies nachholen. Dreamweaver "verhunzte" in den früheren Versionen den Code, das ist richtig. Jedenfalls kann ich sagen, dass DW jetzt bzw. seitdem ich mit CS4 arbeite den Quellcode ausgibt, den man auch eingibt und es eine große Hilfe ist, weil es Funktionen von Firebug etc. in sich vereint. Da ich auch ein großer Fan von OpenSource bin, schau ich mir aber Kompozer gerne mal an.
    1. Avatar von kalterjava
      kalterjava - 05.11.10, 15:57
      Kompozer ist ganz nett, ist meiner Meinung nach bzgl. der Pulldownmenüs und der Definition von ids und classes etwas umständlich. Für Anfänger ist das Programm jedoch sehr hilfreich.

      Zum Tutorial: Wirklich klasse und schön erklärt. Habs auf IE 7+8 und FF 3 und Netscape9 und Opera getestet und es funktioniert. Doch leider nicht für den IE6. Hast du dafür schon eine Lösung gefunden? Wär super, denn diesen Browser sollte/muss man noch berücksichtigen, da ihn unverständlicherweise noch relativ viele im Einsatz haben.

      VG und Danke! vom kaltenjava
    1. Avatar von Dreamer2405
      Dreamer2405 - 21.12.10, 13:25
      Danke!
      Klasse erklärt!
    1. Avatar von sight011
      sight011 - 01.03.11, 18:25
      Es scheint mir so als würde diese Art von Pull-Down menü nicht auf dem iphone funktionieren!

      http://foto-reinhardt.de/sport.html


      Das Pull-Down-Menü ist unter dem Punkt "Portfolio" zu finden

      Hat jemand eine Lösung?