Beiträge von Lupus_III

  • Kontaktformular von Kontaktformular.com

    Zitat von Arne Drews

    Versucht euch selber dran, damit lernt es sich besser und das Formular ist einfacher anpassbar, wenn man es selber erstellt hat, weil man es besser verstanden hat. ;)

    Da es den PHPMailer aktuell nur schwer ohne Composer zu installieren gibt, habe ich den mal hier als fertig erstelltes Composer Paket abgelegt, dürfte noch ziemlich aktuell sein. Einbinden und Testmail ist dort auch kurz beschrieben.

    Hallo Arne, danke für Deinen Hinweis. Ich arbeite mich gerade in dieses Thema ein und probiere alle mir zugänglichen Möglichkeiten aus. Unter anderem habe ich mir auch Dein Tut in PHProcks angesehen und werde das mal nachbauen. Es wäre schön, wenn ich nochmal fragen darf, wenn etwas nicht gleich funktioniert.

  • Hintergrundbild wir nicht in voller Höhe angezeigt

    Hallo zusammen,

    ich möchte bei einer Website ein Hintergrundbild in den header einfügen. Ich hab schon alles mögliche ausprobiert, aber das Foto wird nicht in voller Höhe hinter dem Logo und der Navigation angezeigt. Irgend etwas mache ich falsch. Könnt ihr mir helfen?

  • Eine Frage zum Editor Scriptly

    Ich habe früher auch den Editor Scriptly verwendet und bin nun auf VS Code - https://code.visualstudio.com/ -, wegen der besseren Unterstützung, umgestiegen. Schau dir mal das youtube Video an. Vielleicht regt es dich auch zum Umstieg an.

    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

  • Probleme mit Dropdown-Menü

    Ich stelle Dir mal ein Muster zur Verfügung!

    HTML

    <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Drop down Menu responsive</title> <link rel="stylesheet" href="style.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> <body> <header> <nav id="normal"> <ul> <li><a href="">Startseite</a></li> <li><a href="">Lifestyle</a></li> <li><a href="">Youtube <i class="fas fa-sort-down"></i></a> <ul> <li><a href="">Java</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">Web</a></li> <li><a href="">Kontakt</a></li> <li><a href="">Doku</a></li> </ul> </nav> <nav id="mobile"> <div id=menu>Menü</div> <ul> <li><a href="">Startseite</a></li> <li><a href="">Lifestyle</a></li> <li><a href="">Youtube <i class="fas fa-sort-down"></i></a> <ul> <li><a href="">Java</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">Web</a></li> <li><a href="">Kontakt</a></li> <li><a href="">Doku</a></li> </ul> </nav> </header> </body> </html>

    CSS

    body, html { background: #1c1c22; margin: 0; padding: 0; font-size: 62.5%; } @media screen and (max-width: 600px) { html { font-size: 48%; } } @media screen and (min-width: 600px) { html { font-size: 53%; } } @media screen and (min-width: 800px) { html { font-size: 57%; } } @media screen and (min-width: 1200px) { html { font-size: 70%; } } header { background: #2a2a35; width: 100%; height: 70px; height: 7rem; top: 0; text-align: left; transition: all 200ms; } header nav#normal { color: red; display: inline-block; } @media screen and (max-width: 950px){ header nav#normal{ display: none; } } header nav#normal ul{ margin: 0; padding: 0; transition: all 300ms; display: inline-block; } header nav#normal ul li{ margin: 0; padding: 0; float: left; list-style: none; position: relative; transition: all 300ms; } header nav#normal ul li a { display: inline-block; padding: 2.17rem; float: left; min-width: 12rem; text-align: center; font-size: 2rem; color: #fff; margin: 0 3px 0 0; text-decoration: none; background: #c8354e; font-weight: 300; transition: all 300ms; font-family: 'Roboto', sans-serif; } header nav#normal ul li:hover > a { background: #8c1e31; } header nav#normal ul li ul { overflow: hidden; position: absolute; top: 100%; left: 0; width: 100%; transition: all 300ms; max-height: 0; } header nav#normal ul li:hover > ul { max-height: 700px; } header nav#normal ul li ul li { border-bottom: 1px solid #8c1e31; } header nav#mobile { color: #c8345e; display: none; } @media screen and (max-width: 950px){ header nav#mobile { display: block; } } header nav #menu { padding: 2.17rem 5% 2.17rem 5%; float: left; width: 90%; text-align: center; font-size: 2rem; color: #fff; cursor: pointer; font-weight: 300; transition: 500ms all; font-family: 'Roboto', sans-serif; } header nav#mobile ul { width: 100%; margin: 0; padding: 0; max-height: 0; transition: all 500ms; overflow: hidden; float: left; } header nav#mobile:hover > ul { max-height: 800px; } header nav#mobile ul li { margin: 0; padding: 0; float: left; width: 100%; list-style: none; position: relative; transition: all 500ms; } header nav#mobile ul li a { display: inline-block; padding: 2.17rem 5% 2.17rem 5%; float: left; min-width: 12rem; width: 90%; text-align: center; font-size: 2rem; color: #fff; text-decoration: none; background: #c8354e; font-weight: 300; transition: all 500ms; font-family: 'Roboto', sans-serif; } header nav#mobile ul li:hover > a { background: #8c1e31; } header nav#mobile ul li ul { width: 100%; transition: all 500ms; max-height: 0; overflow: hidden; float: left; } header nav#mobile ul li ul li { display: block; float: left; background: #8c1e31; transition: all 500ms; } header nav#mobile ul li ul li a { background: #8c1e31; } header nav#mobile ul li:hover ul { max-height: 500px; }

  • Console - unerklärliche Hinweise

    Zitat von Arne Drews

    In der appContent.js, Zeile 54 wird versucht, auf eine Eigenschaft eines Objektes zuzugreifen, das nicht existiert.

    Vermutlich ist das Objekt fehlerhaft oder nicht instantiiert.

    Beispiel:

    JavaScript
    var _oObject;    // _oObject is undefined
console.log(_oObject.query );    // cannot read property 'query' of undefined


var _oObject = {
    query : 'i am the query property value'
}
console.log(_oObject.query ); // i am the query property value

    Es wird keine Datei appContent.js verwendet. Kann das an den Eigenschaften von VS Code liegen?

  • Javascript in HTML eingebettet

    Also ich habe das mal ausprobiert und bei mir funktioniert es mit folgendem Code (script ausgelagert in main.js).

    HTML:

    <!DOCTYPE html>
    <html lang="de">
    <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="einundausgabe.css" rel="stylesheet"> <title>Patricia's Umrechner</title>
    </head> <body>

    <h1> Rechne ganz easy Kilometer in Meilen um!</h1>

    <input type="text" id="eingabe">

    <button id="eingabebutton">klick!</button>

    <div id="ausgabe"></div>

    <footer> Viel Spass mit deinem Ergebnis!</footer>

    <script src="main.js"></script>

    </body>

    </html>

    Javascript-Datei (main.js):

    window.onload = function(){

    var button = document.getElementById("eingabebutton");

    var ausg=document.getElementById("ausgabe");

    button.addEventListener("click", function()

    { var betrag = document.getElementById("eingabe").value; if(isNaN(betrag))

    { ausg.innerHTML ="Bitte gebe eine Zahl ein"; return } var ergebnis = 0.621371*betrag; ausg.innerHTML = ergebnis.toFixed(2) + " miles"; })
    }

  • Bilderbox mit Flex

    Zitat von basti1012

    ich glaube das liegt daran das er ein new projekt gemacht hat und kein pen.? Kann das sein ? Ist irgendwie ungewohnt ,

    Aber Lupus_III meinst du das so ? https://codepen.io/basti1012/pen/NVgjrw?editors=1100

    Weil ich schecke deine beschreibung gerade nicht so richtig

    Hallo basti1012, ja so habe ich das gemeint. Danke! Es ist ja nur eine Arbeitsdatei, um Flex zu üben. Mit codepen muss ich mich noch ein Wenig auseinandersetzen, siehe #5. Hast du eine paar Tipps für mich?