Bei Deiner Antwort viel mit der Witz ein, als sich zwei in einem Fesselballon verflogen haben und aus zehn Meter Höhe einem Bauer zuriefen "Wo sind wir?! und zur Antwort bekamen " in einem Fesselballon"!
Beiträge von Lupus_III
-
-
Ich hätte lieber gleich bei youtube anfragen sollen. Dann wäre mir dieser Umweg erspart geblieben. Lesson to learn.
-
Das war jetzt mal wieder eine Antwort mit der niemand was anfangen kann. Vielleicht war meine Frage auch zu weit gefasst. Also nochmal, wenn ich aus dem Fontawesome Paket 3 Icons für meine Webseite brauche. Zum Beispiel Facebook, Instagram und fa-chevron-up, welche Dateien soll/ kann ich dann auf den Webspace übertragen?
-
Hallo zusammen,
seit der Diskussion über die Abmahnungen für die Verwendung von Google-Fonts verwende und speichere ich auch die Datei fontawesome-free-6.2.1-web local auf dem Webserver und verknüpfe meine HTML-Dateien mit dieser Datei mit dem Link <link rel="stylesheet" href="fontawesome-free-6.2.1-web/css/all.min.css">.
Die Datei fontawesome-free-6.2.1-web ist ca. 26MB groß. Frage: ist es erforderlich, das ganze Paket auf den Webserver zu laden, oder kann man da auch selektiv vorgehen? Wie macht Ihr das in der Praxis?
-
Ich bin auch wieder dabei und freue mich, dass das Forum wieder weiterlebt. Auf interessante Beiträge bin ich gespannt. Danke an alle, die das ermöglicht haben.
Gruß Erich
-
Hallo Leute,
in der folgenden Webseite gibt es im Headerbereich (Navigation) und in der Webseite abgeschrägte Container. Kann man diese Funktionalität mit CSS steuern und wenn ja wie?
Hier der Link => https://phc-muenchen.de/
-
-
Vielleicht hilft dir dieser Link weiter => https://www.w3schools.com/php/php_includes.asp
Schau Dir mal Example 2 an.
-
Seit kurzem wird mir die Aktualisierung meines Betriebssystem Win 10 auf Win 11 als Systemnachricht angeboten. Hat jemand damit schon Erfahrung gemacht? Ist es sinnvoll schon jetzt umzusteigen oder angesichts von Bugs bei früheren Versionen noch etwas zu warten?
-
Hallo zusammen,
ich bin die Tage auf eine Anleitung für ein Accordion gestoßen, für das man nur CSS Code braucht. Vielleicht ist jemand auch auf der Suche nach so einer (einfachen) Möglichkeit.
HTML
Alles anzeigenHTML <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Accordion ohne JS</title> </head> <body> <div class="list"> <div class="accordion"> <input type="checkbox" id="accordion-1"> <label for="accordion-1"> 1. Thema- Lesen -Sie weiter ... <img src="arrow.svg"> </label> <div class="content"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> <div class="accordion"> <input type="checkbox" id="accordion-2"> <label for="accordion-2"> 2. Thema- Lesen -Sie weiter ... <img src="arrow.svg"> </label> <div class="content"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> <div class="accordion"> <input type="checkbox" id="accordion-3"> <label for="accordion-3"> 3. Thema- Lesen -Sie weiter ... <img src="arrow.svg"> </label> <div class="content"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> </div> </body> </html>
Code
Alles anzeigenCSS @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap'); body, html { align-items: center; background-color: lightgoldenrodyellow; display: flex; font-family: 'Roboto'; font-size: 10px; height: 100%; justify-content: center; align-items: flex-start; margin: 5rem 0 0 0; padding: 0; width: 100%; } * { box-sizing: border-box; } .list { width: 100%; max-width: 40rem; } .accordion { width: 100%; display: flex; flex-direction: column; margin: 0 0 2rem 0; } input { position: absolut; z-index: -1; opacity: 0; } /* Wenn .accordion = checked, gibt es im DOM auf der Siblingsebene ein Label? Wenn ja, hat dieses Label ein img? Wenn ja, dann dreh diese img um 180 Grad */ .accordion input:checked ~ label img{ transform: translate(0, -50%) rotate(180deg); } /* Wenn .accordion = checked, gibt es im DOM auf der Siblingsebene ein .content? Wenn ja, dann zeige ihn mit den folgenden Befhelen an */ .accordion input:checked ~ .content{ height: auto; opacity: 1; transform: translate(0, 0); } label { width: 100%; background-color: skyblue; font-size: 2rem; padding: 2rem; border-radius: 1rem; cursor: pointer; transition: all 150ms; position: relative; z-index: 2; } label:hover { transform: scale(1.02); } img { width: 1.5rem; position: absolute; top: 50%; right: 2rem; transform: translate(0, -50%); transition: 350ms all; } .content { color: #000; width: 100%; background-color: rgba(255, 255, 255, 1); border-radius: 0 0 1rem 1rem; font-size: 1.6rem; position: relative; z-index: 1; transform: translate(0, -20%); height: 0; opacity: 0; transition: 350ms all; overflow: hidden; } p { padding: 2rem; margin: 0; }
Die arrow.svg müßt Ihr Euch unter dem folgenden Link downloaden => https://www.flaticon.com/free-icons/arrow
-
Ich frage mich ob man das nicht auch mit media queries über CSS steuern kann. Bei kleinen Bildschirmen Video display none? Bei großen Bildschirmen Foto display none?
-
Vielleicht hilft Dir das weiter - https://xuad.net/artikel/xampp…will-wieder-nicht-starten
-
m.scatello: Ich habe keine tiefen JS-Kenntnisse. Trotzdem habe ich es mit deiner Hilfe und ein Bisschen probieren hinbekommen. Danke!
-
Hallo kann mir jemand weiterhelfen. Ich möchte, dass die Weiterleitung https://www.google.de/search auf einen neuen Tab erfolgt. Also wie bei HTML target="_blank". Ich habe keine Idee wie man das macht.
Danke!
-
Hallo zusammen,
zur Zeit, so meine ich, sind die Fonts Roboto und Poppins für Webseiten gerade in Mode. Welche Fonts benutzt Ihr?
Ich bin gespannt.
-
Sorry, wenn ich so deutlich werde, aber mich kotzen viele Websites einfach nur noch an. Da werden sämtliche Möglichkeiten, angefangen bei der Grafik über PHP und JS, reingepackt. Alles ist in Bewegung, ständig ein Popup und die Navigation ist nur noch rudimentär vorhanden. Wann kommen wir wieder zurück zu einfacheren Seiten mit schnell erreichbarem Inhalt über eine leicht zu bedienenden Navigation. Weniger ist oft mehr.
-
Warum machst du zum Lernen nicht einfach diesen kostenlosen Kurs? -> https://www.html-seminar.de/
und dann schau da mal rein -> https://www.w3schools.com/howt…nsive_navbar_dropdown.asp -
Oh Mann!!!
Danke Basti, das war es.
-
Ich weiß nicht, warum das script nicht wie gewünscht funktioniert und der Text im Kreis um das Bild läuft. Kann jemand helfen
HTML
Alles anzeigenHTML <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="circle"> <div class="logo"></div> <div class="text"> <p>LUPUS-Media - Erich Wolf - Creative Web-Design</p> </div> </div> <script> const text = document.querySelector('.text p'); text.innerHTML = text.innerText.split("").map( (char, i) => <span style="transform:rotate(${i * 8.2}deg)">${char}</span> ).join(""); </script> </body> </html>
Code
Alles anzeigenCSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: consolas; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; } .circle { position: relative; width: 200px; height: 200px; border-radius: 50%; /*background-color: #ccc;*/ display: flex; justify-content: center; align-items: center; } .logo { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: url(img.jpg); background-size: cover; filter: brightness(1.5) contrast(1); } .text { position: absolute; width: 100%; height: 100%; animation: rotateText 10s linear infinite; } @keyframes rotateText { 0%{ transform: rotate(360deg); } 100%{ transform: rotate(0deg); } } .text span { position: absolute; left: 50%; font-size: 1.2em; transform-origin: 0 100px; }
-
Auf den ersten Blick sieht es aus, wie wenn der Container für die Subnavigation nicht genügend Breite hat. Aber ohne Code kann man keine genauere Aussage machen.