Beiträge von Sempervivum

Mache dich mit der Funktion addEventListener vertraut, damit kannst Du realisieren, was Du brauchst.

Die Breite des body ist offenbar gleich der Breite des Viewports. Und weil dein #pagefooter width:100% hat, hat er und damit auch der Hintergrund ebenfalls diese Breite. Beheben kann ich es, wenn ich dem #pagefooter width:auto und display:inline-block gebe.
Verstehen tue ich das Ganze nicht, weil ich bisher immer davon ausgegangen bin, dass sich die Breite des body an seinen Inhalt anpasst. Vielleicht kann jemand mit erweiterten Kenntnissen das aufklären.
PS: Ich sehe, dass ganz rechts immer noch eine Fläche ohne Hintergrund bleibt. Das liegt daran, dass sich die Breite des #pagefooter an den Inhalt anpasst und der ist schmaler als andere Elemente auf der Seite. Wenn Du willst, dass der Hintergrund bis zum rechten Rand geht, musst Du es bei width:100% für #pagefooter belassen und statt dessen dem body ein display:inline-block geben.

Ja, jetzt sehe ich es: Der Text ist noch da, aber der schwarze Hintergrund ist weg. Ich schaue mal rein ...

Auf dem Screenshot sehe ich was Du meinst, aber wenn ich deine Seite aufrufe und die Fensterbreite verkleinere, kann ich nichts dergleichen beobachten: Der Footer ist dann zu breit, verschwindet unter dem rechten Fensterrand und die horizontale Scrollbar wird eingeblendet.

"endet der Footer abrupt auf der rechten Seite" - ich kann nichts dergleichen erkennen (Opera). In welchem Browser tritt das Problem auf?

Ich wollte eine Testseite erstellen, aber mir fehlen die JS-Dateien. Poste doch lieber die URL deiner Seite.

Um das zu beantworten, müsste man den HTML-Text mit dem img-Tag sehen. Oder Du postest die URL deiner Seite.

Selbstverständlich, Du kannst den String mit der URL beliebig kombinieren:

$("#main").load("dein_ordner/" + sucheingabe + ".html", function() {

Versuche dieses:

var sucheingabe = $("input[name=eingabe]").val();$("#main").load(sucheingabe + ".html", function() {

Offensichtlich muss man bei dem Parameter die Maßeinheit % angeben. Dies funktioniert bei mir:

img{                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                transition: 1s all ease-in;
            }

            img:hover{
                filter: grayscale(0%);
                -webkit-filter: grayscale(0%);             }

https://developer.mozilla.org/de/docs/Web/CSS/filter

"Welche Möglichkeiten gibts denn sonst ?" Du kannst zwei Bilder verwenden und das bunte über das schwarzweiße legen. Dann die Deckkraft (opacity) animieren.

Würde ich so machen:

<div id="container"></div>        <button id="newteam">Weiteres Team hinzufügen</button>
        <script>
            var nr = 0;
            var html = '<fieldset>\
              <legend>Team 1</legend>\
              <label for="teamid">Team-ID:</label>\
              <input type="number" maxlength="10">\
              <label for="already_purchased_players">Transferübersicht der letzten 5 Saisons vor dem Zeitraum:</label>\
              <textarea name="already_purchased_players" cols="80" rows="20" id="already_purchased_players"></textarea>\
              <label for="transferuebersicht">Transferübersicht:</label>\
              <textarea name="transferuebersicht" cols="80" rows="20" id="transferuebersicht"></textarea>\
            </fieldset>';
            document.getElementById("newteam").addEventListener("click", function () {
                nr++;
                var chtml = html.replace("<legend>Team 1</legend>", "<legend>Team " + nr + "</legend>")
                document.getElementById("container").innerHTML += chtml;
            });         </script>

"indem ich an die klasse noch input und den
entsprechenden Namen oder den Wert anhänge"
Das verstehe ich nicht. input ist ein HTML-Element.
Dies:

nav.ilToolbar .btn-primary input[value="Test starten"]

würde erfordern, dass es innerhalb des Elementes .btn-primary ein input-Element gibt.

Doch, jetzt, wenn ich das Fenster ganz hoch mache, sehe ich es.
Zitat von Huhu: "gab es da für CSS nicht sowas wie 100vh als Wert für height?" - genau, das müsste die Lösung sein:

min-height: 100vh;

für .mp-pusher

"Sprich, wenn die Kontaktseite kürzer als 100% Bildschirmhöhe ist (bei meinem Display mit 1920x1080 Px), fällt die Höhe des Menus auch kleiner aus, was etwas uncool aussieht"
Ich verstehe nicht genau, was Du meinst. In meinen Augen sieht alles OK aus. Dass das Menü bei großer Fensterhöhe das Fenster nicht ausfüllt, finde ich überhaupt nicht schlimm, weil der blaue Hintergrund ja bis zum unteren Rand geht.

"Was mir eventuell helfen würde, wäre ein div-Element das eine min-height hat, die ( 100% - height(.kontaktformular) ) hat. Aber wie erstellt man sowas in CSS?"
Kennst Du schon CSS-calc? Damit kann man Werte berechnen, z. B. so:

min-height: calc(100% - 400px);

Wie Du siehst, geht das nur mit festen Werten. Wenn Du dynamisch die Höhe des Formalars verwenden möchtest, geht das, AFAIK, nur mit Javascript.

Oh, das ist mir wohl entgangen. Dann werde ich das mal testen. Danke für den Hinweis!

Da sieht man überhaupt nichts. Du solltest so etwas testen, bevor Du es weiter gibst.

Ich habe 7-Zip und kann rar nicht entpacken. Besser ein Fiddle.

Ich steige da nicht durch, weil

• kein Smartphone zu sehen ist
• der Code viel zu kompliziert ist für das, was Du im Text beschreibst

Erstelle eine funktionsfähige Demo, die nur das enthält, was für dein Problem relevant ist.

Danke für diese Hinweise. Ich werde dann wohl erst Mal bei Webmatrix bleiben, denn ich habe mich an die Inline-Validierung gewöhnt und möchte sie nicht mehr missen. Habe mir in der Zwischenzeit auch Xdebug installiert und damit etwas ergänzt, was ich manchmal vermisst habe.
Visual Studio 2015 ist wegen des hohen Preises keine Alternative für einen Hobby-Entwickler.
Inzwischen habe ich auch festgestellt, das PHP-Tools bei VS Code nicht installiert werden kann.