Вставка
- Опубліковано 6 вер 2024
- Fragen oder Probleme? Werde Teil der Community! (Kostenlos)
📣 Discord Server: / discord
Unterstütze den Channel:
🧡 Adobe Creative Cloud 65% (Schüler/Student): bit.ly/2PYEorm (Affiliate Link)
🧡 Meine UI Design Tool: bit.ly/UseAdobeXd (Affiliate Link)
🧡 Musik die ich Nutze: bit.ly/MeineHin... (Affiliate Link)
🧡 Mein Geschäftskonto: bit.ly/MeinFree... (Affiliate Link)
🧡 Meine Buchhaltungssoftware: bit.ly/sevDeskU... (Affiliate Link)
🧡 Meine Hardware/Kamerausrüstung: amzn.to/2ccEY0l (Affiliate Link)
🧡 UA-cam Mitgliedschaft: bit.ly/UA-camS... (Affiliate Link)
#WebDesign #UnleashedDesign #Tutorial
Links aus dem Video:
● Live Demo: bit.ly/pureCSSmenu
● Version 1.0: bit.ly/2kxG0pQ
● CSS Maßeinheiten: bit.ly/2lpCxvf
Meine Social Media Seiten:
► Homepage: bit.ly/1y4rvIA
► Facebook: on. 11N25Ve
► UA-cam: bit.ly/1rPBJ9Y
► Twitter: bit.ly/1y4rMeD
► Instagram: bit.ly/1UjBLuD
► Twitch: bit.ly/29VyA7J
► Discord: / discord
Wenn ihr euch für meine Ausrüstung, Software oder Bücher interessiert dann schaut einfach hier mal vorbei und unterstützt mich mit einem Kauf.
► Meine Ausrüstung(Affiliate Link): amzn.to/2ccEY0l
► Software(Affiliate Link): amzn.to/2c0Fc7r
► Bücher(Affiliate Link): amzn.to/2bTCfcU
Copyright by Johannes Schiel / Unleashed Design
![Welche CSS Einheiten gibt es? Welche sollte man nutzen? [Tutorial]](http://i.ytimg.com/vi/VLihdrfk1OM/mqdefault.jpg)
![Welche CSS Einheiten gibt es? Welche sollte man nutzen? [Tutorial]](/img/tr.png)
![Neuer BOOSTER für euere Responsive oder Fluid Layouts mit CSS Clamp() Function! [TUTORIAL]](http://i.ytimg.com/vi/Cte0oYy9kYY/mqdefault.jpg)
![🤯HTML picture? Was ist es und warum sollte man es nutzen! 👍 [TUTORIAL]](/img/n.gif)
Funktioniert leider nicht bei iOS Geräten, hier müsste man mit einem Fallback durch JavaScript gegenwirken!
wie mache ich das als Laie? :)
Ich habe das sowei in meinem Content bei meinem Wordpress System eingebaut. Jedoch reagiert das Menü beim Iphone nicht. Ich weiss es liegt am Safari, aber wie kann ich das mit Javascript beheben. Gibt es vielleicht auch ein Plugin für Wordpress, dass dies automatisch übernimmt?
Lol der name😂
Genau wegen dem Video vor 3 Jahren ab ich dich endlich entdeckt! :D
haha :P das freut mich :)
Bei mir Steht das bei = -header nav--#normal-- ul li a-
inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'
Habe selber in abgewandelter Form eine Navigation geschrieben. Im Untermenü "header nav#normal ul li ul li{
border-bottom: 2px solid #8c1e31;} werden der Rahmen zwar angezeigt, aber nicht unsichtbar.
DANKE! Muss für meinen Trainer ne Website machen und brauchte genau das!
Wäre cool wenn du mal ein Video über *display: flex;* machen würdest, denke damit könntest du vielen helfen.
Wird noch kommen weiß nur noch nicht wann leider :/
ich bin eher ein Neuanfänger in dem Gebiet HTML. Ich hab ein Problem, wenn in dem normalen dropdown die Unterpunkte aufgehen sind sie nicht gleichgroß, wie kann ich das fixen?
Kleine Verbesserung:
- vermeide Floats (floats sind mittlerweile echt uncool)
- vermeide IDs, nutz Klassen (ist nen bisschen flexibler, da du IDs nur einmal pro Seite nutzen kannst)
- Schreib detailliertes CSS (Anstatt background: #fff... schreib background-color: #fff)
- font-size: 62,5% nur für HTML und nicht für Body, der bekommt font-size: 100%;
- em und rem nur für font-sizes
- Höhen für divs (Beispiel: navi) in Pixel und am besten mit scss und einer _variables.scss, die die festen Werte beinhaltet.
- media queries per scss und nem mixin (mega geil)
- Hover spricht man "Hawa" aus
- Kauf dir ein MacBook :P
Ansonsten ganz cool :)
:P Danke für das Feedback ein paar einwende habe ich aber ;)
- floats sind zwar "uncool" nutze auch lieber Flex :P aber das ganze Prinzip von Flex ist finde ich nicht jedem bekannt vor allem unter dem Begriff "Easy" aber generell hast du da recht :) Flex > Float
- würde nicht scss sondern sass nutzen :P deutlich angenehmer syntax dazu weniger zeichen, weniger code bestes beispiel mixins in scss muss man (at)include NAMEMIXIN eingeben in sass einfach nur +NAMEMIXIN :P
- Aussprache zu 100% korrekt xD leider bin ich in Englisch eine niete aus diesem Grund sind die Videos auf Deutsch :D
- MacBook niemals :D finde da keine vorteile habe 7 Monate ein Full Spec MacBook Pro gehabt und muss sagen wer sich etwas mit Windows beschäftigt ist damit 100 mal schneller als jeder Mac User :P zumal mir da die Rechenpower fehlt die ich an meinem Desktop habe :)
Wow, okay jetzt hast du schonmal großen Respekt von mir, weil ich nicht gedacht habe, dass eine Antwort kommt....geschweige denn eine nette :)
Über SASS und SCSS und Flex oder Floats kann man sich ja streiten, aber wieso findet man ein MacBook nicht cool? :O
Es gibt echt so unfassbar geile Tools und Shortcuts, die einem alles erleichtern.
Ne geile Suche mit "Alfred", ein geiles Terminal mit iTerm, zsh und oh my zsh, und und und
Du darfst coden wie du willst, aber an einem Windows-Rechner ist man niemals schneller unterwegs :O
Warum den nicht :P ich antworte eigentlich auf sogut wie alles wenn ich es sehe und ich Zeit habe.
@MacBook: Naja geht ja nicht nur um Coden sind auch so Sachen wie Zeichnen, Zocken, Video & 3D Stuff und das Preis/Leistungsverhältnis wenn ich ein MacBook mit i7 4 Kernen usw will gebe ich locker 2500+ aus :D dafür kann ich mir nen 1500€ Rechner mit 2x soviel Power + ein Ultrabook kaufen :) daher viel meine Wahl so aus. Aber das muss jeder selbst entscheiden denke ich :D kenne viele Entwickler die mit Windows unfassbar schnell sind genauso Apple User die Jahre brauchen und umgekehrt. Denke das hängt mehr von anderen Faktoren ab als das OS. Meine Aussage war mehr auf das "Allgemeine" nutzen bezogen und nicht nur auf coden.
Ja gut, Zocken etc. kannste aufm Mac echt knicken.
Die neuen MacBooks fangen übrigens ab 2,7 an :D
Früher habe ich den "Preis" ja noch verstanden :D aber aktuell ka warum die sich das erlauben können :D wenn mans ich mal das Dell XPS 2017 oder das Razor Blade anguckt finde ich die sogar teilweise schöner und kosten die hälfte xD
aber naja mal sehen was so kommt vill übernimmt auch xiaomi den Markt und wir kaufen alle china stuff :D nobody knows
Ich weiß nicht, ob Johannes hier noch reinschaut gelegentlich, aber kann mir evtl. jemand anderer sagen, wodurch das Dropdown-Menü standardmäßig unsichtbar wird? Ich sehe hier weder display: none noch visibility: hidden? Das Einblenden mit max-height ist "kreativ", aber nachvollziehbar, das Ausblenden verstehe ich aber echt nicht. Ist das wegen height: 0?
Wie kann man unter einen anderen Menüpunkt auch solch ein Dropdown legen? Weil in deinem beispiel geht das jetzt nur bei "You Tube". Wie bekomme ich das hin, dass das auch bei z.B "Startseite" geht?
gibt es den code nicht zum download ?
Die Maßeinheit "em" ist doch die Breite des Buchstaben "m". Diese müsste doch je nach verwendete Schrift eine unterschiedliche Dickte haben (ausgenommen Monospace). Ist es denn dann überhaupt ratsam damit eine Höhe zu definieren? Oder verhält es sich im Browser etwas anders?
Ich würde mich freuen, wenn mehr Videos zu CMS ( bspw. Wordpress, Pagekit, Kirby), dazu dann vielleicht Plugin/ Theme Vorstellungen, Tipps, etc. :D
Naja :P hab sowas schonmal gemacht jedoch haben die meisten sowa snicht so gut gefunden :P
Hammer Tutorial, Danke dir!
Freut mich wenn es dir gefallen hat :)
Geiles Video hast mir sehr geholfen, aber ich habe eine Frage nämlich: Wir würde das denn funktionieren wenn ich jetzt (Anhand deines Beispiels) unter Lifestyle noch 2 Unterpunkte hinterlegen möchte?
Nach 2 Stunden die Enttäuschung - die Mobile-Version funktioniert auf iOS nicht. Es wäre nett gewesen, wenn diesbezüglich ein Hinweis existieren würde... oder eine alternative Lösung.
hmm das tut mir leid, aber gut das du das schreibst! habe jetzt einen Hinweis unter dem VIdeo hinterlegt.0
Danke, hast mir sehr geholfen, denn wir sollen Informatik eine eigene Internetseite zu einem Thema bauen ^^
Und super Erklärung damit mein Lehrer nicht sagen kann das ich das ahnungslos geklaut habe :D
Freut mich wenn die das Video gefallen hat :)
Super Video. 👍 mit welchen Programm schreibst du das ?
Danke freut mich wenn es dir gefällt :)
Hey, erstmal ein sehr gut verständliches und ausführliches Tutorial! Habe die Schritte genauso so ausgeführt, stehe jetzt aber vor einem Problem: Und zwar habe ich ein Menü mit sehr vielen Unterpunkten; wenn der Seiten-Zoom 75%+ ist, kann man nicht alle Menüunterpunkte sehen, weil diese "zu lang" sind. Kann mir jemand helfen?
Schön das die Videos auf deinem Kanal nicht verrotten lässt, super Video ;)
Was muss das muss heißt das Motto :D also muss aus alt auch mal neu werden :P
Coole Erklärung, ich habe das versucht in Contao umzusetzen, dort gibt es aber die ID Navnormal nicht. das ist wohl das Problem warum die links oben rechts dann nicht nebeneinander stehen sondern weiterhin untereinander. Ansonsten habe ich das css eins zu eins von Hand reingeschrieben aber die Links bleiben untereinander :(
Hey, super Tutorial. Sehr hilfreich!
Kleine Frage noch, welche IDE nutzt du?
Ich nutze Atom & Gulp
Sehr informatives Video. Leider musste ich ab 20-21 Minute abbrechen da der Befehl: @media screen ein Fehler in der geschriebenen Zeile zeigte (Expected RPAREN at line...) und somit vom Browser nicht gelesen werden konnte.
Weiss jemand woran es liegen kann?)))
Hi....ich weiß das Video ist schon etwas älter, dennoch es hat mir seeeehr geholfen - ABER: HILFE HILFE: Ich bekomme es partout nicht hin, bei einem zweiten Menüpunkt die Unterpunkte mit in den Button zu bekommen, so wie es bei "youtube" gemacht wurde.
naja ist jetzt nicht die feine art aber hab eigentlich alle gelöscht nur UA-cam kopiert und eingefügt^^
Weiß nicht obs an der Liste liegt oder an irgendeiner css Einstellung - Achja kopiere es von oben nach unten und nicht von unten nach oben^^
Ich hab das Problem, dass sich die 3 Unterpunkte nicht verschwinden und einfach wie zum Beispiel in 15:24 im Header sind. Dazu wird der Oberpunkt, im Video "UA-cam" auch nicht dunkler wenn man über einen Unterpunkt hovert.
Weiss jemand was da schief gelaufen sein könnte?
Am besten direkt auf Discord vorbei schauen :)
Bist du mein Chemielehrer? Seine Stimme klingt identisch xD
Danke für das Tutorial!
:D da kann ich dich beruhigen ich bin kein lehrer und von Chemie verstehe ich nichts außer das was man bis zur 9 Klasse lernt :D haha
Ich habe das Problem, dass meine Seite nicht Scrollbar ist. Z.B. wenn ich zwei Bilder au der Seite habe und dann ranzoome sehe ich irgendwann nur noch eins und ich kann nicht runterscrollen! Kannst du mir da helfen?
Danke fürs Video
Gerne :)
Klasse Videos.
Danke freut mich wenn dir die Videos gefallen :)
Funktioniert das mit :hover denn auch auf Tablets und Smartphones (alle Betriebssysteme). Sorry, habe keine Geräte zum testen und finde dazu nur alte Infos im Netz.
Danke für das super informative und verständliche Video. Daumen hoch!
Hover wirkt bei allen Touch Geräten als "Klick" also das Menü klappt erst wieder zu wenn erneut per Tap eine Interaktion ausgelöst wurde. Ich empfehle aber genau wie ich in dem Video sage Menüs mit JavaScript :) diese sind in dieser Funktion deutlich zuverlässiger.
bei manchen Geräten funktioniert der "einfache" Hover nicht :P daher ist JavaScript besser. Klassische Fallbacks wären onClick void, oder das hinzufügen von :focus aber auch diese funktionieren nicht auf allen Geräten.
bei mir bleibt ein langer farbiger strich hinter dem ul li element
kann mir jemand helfen
Was für ein Langer Farbiger Strich?
hast du auch text-decoration: none; bei a dastehen?
Ich verstehe nicht ganz, warum man "umständlich" mit rem arbeiten sollte, wenn man doch einfach die genaue Pixelgröße angeben kann.
Passt sich rem automatisch an, oder wie ist das?
jain, PX ist ein Maß das nicht immer wirklich passt. Weil wir immer mehr in eine Welt kommen in der die Auflösungen der Endgeräte nicht mehr Pixelbasiert erfassbar sind (siehe Retina usw.) daher sollte man relative größen wie %, vw, vh oder auch rem verwenden um die Maße Global anzupassen.
Hm komisch sobald ich overflow: hidden; eingebe verschwindet das Menu und taucht auch nicht mehr auf:/ woran könnte das legen ?
Bei mir kam es auch erst wieder als ich den Rest eingetippt hatte.
Hey, cooles Video, ich wollte fragen, ob du mal was in Richtung Browser Caching machen könntest ^^
was genau stellst du dir da vor ?
Grundsätzlich die performance einer Seite verbessern
Habe dann diese Website gefunden:
developers.google.com/speed/docs/insights/LeverageBrowserCaching
Ich bin halt leider zu blöd das in meine Seite einzubauen :(
Browser Cache kann am Webserver konfiguriert werden. Beispiel Apache: www.codeblick.de/blog/2015/02/16/30-n%C3%BCtzliche-htaccess-snippets/#expire_headers
Es gibt noch weitere Möglichkeiten statische Daten zu cachen. z.B. AppCache oder die neue Technik Service Worker. Bei beiden Techniken geht es darum, Webseiten offline verfügbar zu machen. Das geht dann in die Richtung "offline first" oder progressive web apps.
Könntest du deine Html-und Css_Datei vielleicht hochladen? Du erklärst alles im Video zwar gut, aber zum nach bauen wäre die Datei einfach praktischer, als 3Stunden im Video zusuchen.
In vielen Videos ist alles in Code Pen verlinkt :)
@@UnleashedDesign ich finds nicht auf deinem codepen
Du machst sehr gute Videos :) Abo und like
Danke :)
Darf ich fragen welches Programm du benutzt? Sieht etwas aus wie Notepadd++.
na klar :P aber es handelt sich dabei nicht um Notepad++ (hasse das Programm) :D sondern um den Editor Atom von GitHub
Hilfe mein Mobile Menü klappt sich nicht aus :/
Bei 17:02 min stehen die Punkte bei mir nicht untereinander :c könnte ich etwas ausschlaggebendes vergessen haben??
hmmm das kann ich so leider nicht sagen, am besten mal den Code auf dem DIscord Server zeigen :)
Welchen Editor hast du in diesem Video verwendet?
Atom :)
bei mir funktioniert alles, bis zu dem "header nav ul li ul", das spricht die Liste irgendwie nicht an. wenn ich der ul eine class gebe kann ich sie ansprechen, aber über "header nav ul li ul" passiert nichts.. woran könnte das liegen? :(
Das weiß ich leider anhand meiner Informationen nicht aber es könnte sein das etwas mit dem Nesting in der CSS nicht stimmt.
Hab's gestern noch rausgefunden: (falls jemand den gleichen Fehler auch macht...)
hatte die li mit der weiteren ul schon nach der li direkt geschlossen, also
bla
bla
bla
Aber jetzt funktioniert alles! :)
Sanke
Meine Menüpunkte sind alle unterschiedlich lang"! die untergeordnete listen sind bei einem langen menüpunkt kleiner und wenn weiter folgen sieht es aus am ende wie eine säge! durch das hidden denke ich! funktioniert anscheint nichtz mit längeren menüs bzw Lieferservice darunter Home ist das fester halb so groß! und geht nicht über die volle länge des eltern elements sieht mega kacke aus
Läuft man nicht Gefahr, dass bei einigen Firmen Java Script ausgeschaltet ist? Ist es nicht besser das alles in CSS zu machen??
Theoretisch ja, jedoch würde sogut wie keine größere Website ohne JavaScript auskommen.
Leider funktioniert dieses Menü nicht mit einem Iphone.
Mit Android, Windows usw. kein Problem.
Beim Iphone öffnet sich einfach das Menü nicht sobald man drauf klickt.
Habe es mit deiner Live Demo Version probiert.
Hast du hierfür eine Lösung?
Leider nein das liegt an Apple und ihrem Safari Browser der diese Funktion schlicht und unterstützt und laut Apple auch nicht unterstützen soll ;) leider kann man dort nur auf JavaScript zurück greifen.
Hast du eigentlich ein 2. Tutorial gemacht, wo du das ganze mit Java Script zeigst? Weil du ja gesagt hast, dass das alte Tut veraltet ist!
Ja, wobei das jetzt auch schon sehr in die Tage gekommen ist :D
Hey, danke für das Video! Bei mir ordnen sich diese drei Punkte aus irgendeinem Grund nicht unter UA-cam sondern setzten sich einfach mit in die Leiste. Weißt du oder jemand anders, wie ich das beheben könnte?
Gibt es vielleicht ein Pastebin, indem du den Quellcode reingelegt hast?
Danke im Voraus, Crow
Edit: Ich habe die Live Demo gefunden. An deinem Video war nichts auszusetzen, hatte mich vertippt und es auch nach langer Suche nicht entdeckt. Einen schönen Tag noch. ^^
Freut mich wenn es noch geklappt hat und wenn dir das Video helfen konnte :)
Hi ich woolte dich fragen ob du auch für andre Leute Webseiten machst?PS feiere deine Videos
Ja mach eich bei Anfragen einfach über meine Website das Kontaktformular ausfüllen. Vielen Dank :)
Ok und was würde das design für eine Webseite ungefähr kosten?
Am besten einfach über E-Mail schreiben um was es gehen würde dann kann ich etwas zum Thema Kosten und Zeit sagen :)
Ein Button zum Überspringen von langen intros, wie bei Netflix. Das wäre eine Innovation.
mein Intro ist doch nur noch paar Sek lang? Oder meinst du die Einleitung?
@@UnleashedDesign Ich glaube, das ist damit gemeint.
Das Video ist auch schon wieder drei Jahre her, Zeit für ein Update?
Das sitmmt :D aber ist sowas noch immer gewünscht?
@@UnleashedDesign Aber holla! Meine CSS-Only-Menüs sehen immer aus wie Murks 😆
Wenn euer Menü klein angezeigt wird liegt es sehr wahrscheinlich daran:
header .menü{
...
...
...
}
ehrlich gesagt war mir sogar zu groß ^^
Ehhm ich weiss nich was los ist aber bei mir funktioniert es überhaupt nicht kann mir jmd helfen..?!
komm am besten auf den Discord Server da kann man dir vermutlich shcnell helfen :)
Unleashed Design okay 👌🏻 mach ich Dankee für den Tipp
klappt das mit notepad ++ und firefox?
sollte klappen :P wobei ich dir emfehle auf notepad++ zu verzichten und Atom zu nutzen :) deutlich schönerer Editor
Hinterlegte Quelltext wären nicht schlecht...
Der ist hinterlegt ;)
WIE HEISST DAS TOOL?
Welches Tool?
Unleashed Design wo ich code und direkt das preview nebenan habe.
@@i_am_a_real_cat1443 Ich glaube, er hat nur die beiden Fenster verkleinert und nebeneinanderschiebt.
Ich checke nur nicht wieso ich "62.5%" statt "10px" schreiben soll, bitte klär mich auf ^^
oder wieso kann man nicht "6.25%" bzw. "1px" nehmen damit man rem gleich wie Pixel nutzen kann?
Ich glaube das ist für den fall, dass du die größen skalieren möchtest, ohne alle größen in der .css erneut umschreiben zu müssen. Wenn rem auf einen root-Wert zurückgreift, muss nur dieser verändert werden und bei größeren Bildschirmen skaliert sich alles richtig hin.
Habe hoffentlich noch was mittgenommen
Könntest du mal ein Video über die neusten CSS3 Eigenschaften machen. Es
gibt so viele relevante CSS Eigenschaften die sehr von nutzen sind,
aber nicht verwendet werden. Das wäre für deine Community sehr
hilfreich.
developer.mozilla.org/de/docs/Web/CSS/CSS_Referenz
:D naja das etwas viel denke ich xD aber mal sehen :)
Es ist eben nicht viel ^^ Viele kennt man. Einige werden nicht von den Browser erkannt und einige wiederum sind veraltet. Dabei gibt es aber viele wie z.B flex: shrink, grid oder basis. Oder das Grid layout was bald kommt. Es gibt einfach so viele Eigenschaften die mit CSS3 machbar sind, wo die meisten JavaScript verwenden. Mach es und du kriegst 10k Abos.
LOL Der Name😂
?? :D
@@UnleashedDesign ja ich heiße Dropdown Gaming 😂
Please make your videos in english...pls!
sry :( my englisch is good enough for read and unterstand movies :D but way to bad to explain this kind of things .... so this will not happend in the near future