CSS 3 Tutorial #11 - Navigation bar to code with

Поділитися
Вставка
  • Опубліковано 19 лис 2024

КОМЕНТАРІ • 57

  • @renezirkel1613
    @renezirkel1613 2 роки тому +1

    Wirklich sehr gute Beschreibung. Nach langem Suchen ENDLICH eine Beschreibung gefunden, die mir richtig hilft.

  • @jobcentertycoon
    @jobcentertycoon 5 років тому +1

    Danke das du dein Wissen hier allen zur verfügung stellst.

  • @niemandjemand
    @niemandjemand 2 роки тому +1

    So ein geiles Tutorial! Genau so hab ich mir eine Navigationsleiste für meine Website vorgestellt!

  • @simonwalker4358
    @simonwalker4358 7 років тому +7

    super ,wie immer klasse erklärt!!

  • @nvrmnd.88
    @nvrmnd.88 6 років тому +1

    Deine Videos sind echt super. Schaue mir auch gerade deine JS Serie an. Super Erklärung. Gibst dir echt viel Mühe es verständlich rüberzubringen. Weiter so! Nicht vergessen, das Links immer einen title benötigen! ;-) Screenreaderkompatibilität und Validität wird Google auch immer wichtiger!

  • @yasyasmarangoz3577
    @yasyasmarangoz3577 4 роки тому +1

    Perfekt!
    Zufällig war width genau das was ich gerade gebraucht habe.

  • @DornheimSegmenter
    @DornheimSegmenter 5 років тому

    Wenn du Befehle eingibst um dinge zu vermeiden von denen du weißt das sie hinterher blöd aussehen ist das denke ich nicht so lehrreich als erstmal zu zeigen wie es ohne den befehl aussieht, ich meine zum Beispiel den Margin befehl. Aber ansonsten finde ich deine Tutorials super und bin echt begeistert das ich hier zu allem was finde. Klasse kanal

  • @k0omodosavesta241
    @k0omodosavesta241 3 роки тому

    Ich habe meine Navigationsleisten sonst immer mit Tabellen erstellt. hat auch sehr gut funktioniert

  • @Eh_814
    @Eh_814 2 роки тому

    Super Beispiel!

  • @KarelPuhli
    @KarelPuhli 4 роки тому +1

    Perfekt erklärt! Eine Frage habe ich. Falls der Text in einer li in der Navigation zu lang ist, gibt es eine Möglichkeit, diesen von Größe, Abstand usw. immer an den zur Verfügung stehenden Platz anzupassen?

  • @lucius5455
    @lucius5455 8 років тому +2

    Wie immer ein super Video ! Danke , dass du das alles hier machst . Ich habe nur eine Frage : Wenn ich mehrere Elemente (zum beispiel Bilder , text , Tabellen ) habe muss ich dann jedes Element einzeln um zb 20% nach rechts verschieben , damit die Nav-Leiste nichts überdeckt , oder gibt es einen Befehl der alles verschiebt außer die Leiste ?

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  8 років тому +2

      Danke :)
      Im Normalfall solltest du die anderen Elemente in einen Container (div) packen und den dann verschieben.

    • @lucius5455
      @lucius5455 8 років тому +1

      Danke dir :-)

  • @mariusweidenbach3585
    @mariusweidenbach3585 3 роки тому +1

    Kann man das so machne das bis zu einer bestimmten Pixeogrösse das %ual skalirt wird und ab zb 250px es so bleibt?

  • @VanDeliar
    @VanDeliar 7 років тому +1

    Tolles Video weiter so !
    Könntest du eventuell die Css3 Reihe noch mit "Top Down Menus, Multiple Classes und den !important befehl" ergänzen ?
    Wäre eine coole sache.
    Vorallem habe ich noch ein wenig Schwierigkeiten damit, die Divs im Css anzusteuern. Da viele Elemente ihr eigenes Margin und Padding haben. ^^'
    Btw..benutzt man bei Html5 noch die nav, header und footer tags ?

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  7 років тому +1

      Danke :)
      Du kannst mehrere Klassen einfach in HTML als class="eins zwei drei" einfügen und hast dann für das Element die Klassen eins, zwei und drei zur Verfügung.
      Ich werd hier bei Gelegenheit noch was zur Browserkonsole machen, die hilft evtl beim Debuggen.
      Top Down Menü meinst du so wie unser Menü nur links? Ist einfach eine Liste aus Links..

    • @VanDeliar
      @VanDeliar 7 років тому

      The Morpheus Tutorials danke für die schnelle Antwort.
      Dass mit den Klassen hab ich nun verstanden danke.
      Ja so eine art Sub Menus, die reagiert, wenn man mit der Maus zB auf Neuigkeiten hovert, dass noch weitere Menübalken einblenden und wie man die einzelnen Menus dann mit css ansteuert ^^.
      Ein Video darüber wäre cool ansonsten würde ich gerne noch etwas über den !important befehl lernen bei css.
      Für was man den brauch etc. ^^

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  7 років тому +1

      Mit !important setzt du die Kaskade außer Gefecht, d.h.
      color = blue;
      color = red !important;
      color = green;
      setzt es einfach auf rot, auch wenns eigentlich auf grün wäre, weil das als letztes da steht.
      Ist schlechter Stil, daher hab ich das hier nicht gemacht. Und kann in vielen Fällen alles kaputt machen..
      Für die Hover Effekte würde ich dir mal die jQuery-Playlist empfehlen :)

    • @VanDeliar
      @VanDeliar 7 років тому

      The Morpheus Tutorials Danke dir für die Antwort.
      Zu letzteres wegen Html5 mit den nav, header, footer und article tags..werden diese eigentlich noch benutzt ?

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  7 років тому +1

      ah sorry.
      also ich weiß nicht, wies andere machen, ich verwende sie aber eigentlich nicht

  • @Kunait.
    @Kunait. 8 років тому

    Sehr schön geworden. Schon ziemlich traurig, dass ich die meisten Sachen davon nicht wusste, obwohl wir CSS schon hatten....

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  8 років тому +2

      +RocketlauncherLP danke =) ist wie im echten Leben, mit hat auch keine Sau beigebracht ne Steuererklärung zu machen.. Dafür kann ich eine Gedichtinterpretation schreiben. In 4 Sprachen. Eine davon tot. Yey.

    • @Kunait.
      @Kunait. 8 років тому

      +The Morpheus Tutorials Da kann wohl jemand Latein wie ich ;)

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  8 років тому

      +RocketlauncherLP uuuh ein Lateiner! Selten geworden :D Hilft scheinbar fürs logische Denken ;) Mach's weiter, es war die Sprache, die mir am meisten Spaß gemacht hat :D

    • @Kunait.
      @Kunait. 8 років тому +1

      +The Morpheus Tutorials Ich will jetzt nicht eingebildet klingen, aber ich fühl mich in Latein unterfordert....
      Mein Arm ist die ganze Zeit oben und außer mir machen nur 2-3 Leute mit im Unterricht. Von Vokabeln hab ich keinen Plan bekomm aber IMMER ne Eins :D

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  8 років тому +1

      +RocketlauncherLP läuft bei dir! Es ist auch nicht so schwer, wenn man den Dreh raus hat ;)

  • @gutemusic1235
    @gutemusic1235 5 років тому +1

    Wie binde ich die Leiste automatisch in jede Seite ein?
    Ist dafür ein JavaScript oder ein Iframe notwendig?

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  5 років тому

      Javascript, oder php include sind alles Optionen 😊

    • @gutemusic1235
      @gutemusic1235 5 років тому

      @@TheMorpheusTutorials Danke, PHP muss ich mir noch ansehen.
      Also ich mache es erstmal mit einem , das funktioniert auch wenn Javascript deaktiviert ist. :)
      Aber PHP kommt noch, soll ja super dafür geeignet Sein.

  • @Finn_Zrenner
    @Finn_Zrenner 3 роки тому

    Hallo ein sehr gutes Video. Nur eine Frage: Bei mir funktioniert der Code ,,text-decoration: none; ,, nicht und ich weiß nicht warum. Könnte mir vielleicht jemand helfen? (ich benutze notepad++)

  • @wilsitonful
    @wilsitonful 2 роки тому

    Wie kann man die Navigation auf der rechten Seite setzen?

  • @Aziz-ry5sy
    @Aziz-ry5sy 6 років тому +1

    kannst du nochmal zeigen wie man eine drop-down navigation macht?

  • @KazekageWilli
    @KazekageWilli 5 років тому

    Ich hab alles abgeschrieben (bis 9:30), allerdings ist es bei mir unsichtbar. Ich hab mithilfe von Kommentaren alle Zeilen ausgeblendet und geschaut ab wann es anfängt. Sobald ich position: fixed; habe verschwindet es. Mit position: static; z.B. bleibt es aber da. Weißt du warum?

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  5 років тому

      Es könnte sein, dass es sich außerhalb des sichtbaren Bereichs schiebt..

  • @nanonatronaviation6007
    @nanonatronaviation6007 4 роки тому

    wie kann ich den alles auser die navigationsliste bearbeiten... ich hab meine id mit der id nav betitelt und hab dan also: body:not(.nav) usw.

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  4 роки тому

      Jap, genau so. Aber Achtung mit id und Klassen. Die werden unterschiedlich angesprochen

  • @andrewapplephobie1309
    @andrewapplephobie1309 4 роки тому

    tolles Video! Kannst Du bitte ein Video erstellen in dem Du einen Menü-Button mir Dropdown-Menü erklärst? Das wäre super :-)

    • @philipp4043
      @philipp4043 3 роки тому

      machs vielleicht mit einer visible methode. auf hover wird das dropdown menü sichtbar und sonst ist es standardmäßig unsichtbar. mit transitions kannst du dann noch animationen einbauen

  • @MarsMasterLP
    @MarsMasterLP 8 років тому

    Wirst du dann demnächst mit JS anfangen?

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  8 років тому

      +MarsMasterLP wenn die CSS Reihe zu Ende ist geht's damit weiter. ;) Sind 18 Stück insgesamt.

    • @MarsMasterLP
      @MarsMasterLP 8 років тому

      Okay guut :)

  • @christianschmidt6976
    @christianschmidt6976 8 років тому

    bin grad am rumbrobiiern mit css und mach ne tabelle aber ein problem ist:
    ich will in die erste zeile nur ein element, das aber so groß ist wie die ganze tabelle, aber wenn ich die größe mit padding ändere dann werden die unteren ersten zellen jeder zeile auch größer
    ;(

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  8 років тому

      Nun du könntest etwas tricksen, indem du die letzte Zeile per ID ansprichst, die Border zwischendrin verschwinden lässt und den overflow richtig setzt

    • @christianschmidt6976
      @christianschmidt6976 8 років тому

      meinst du das letzte element einer zeile oder das unteste der tabelle und warum gerade die weil das element das groß sein soll in der ersten zeile ist

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  8 років тому

      oh ja :D ups sorry, dann die oberste natürlich :D

    • @christianschmidt6976
      @christianschmidt6976 8 років тому

      :D ich dachte mir schon aber wer weiß programmiersprachen habin ihre eigene logik :)

    • @TheMorpheusTutorials
      @TheMorpheusTutorials  8 років тому

      :D ja vor allem CSS