Beiträge von Sempervivum

"Kann es sein, dass sich ein DIV mit absoluter Breite von 100% immer nur der Breite der neugeladenen Seite anpasst?" Eine Breite von 100% würde ich als relativ bezeichnen. Die Prozentangabe bezieht sich auf die Breite des Elternelementes.

"Klick ein User auf einen Navigationspunkt, sollte dieser auf aktiv gesetzt werden (klasse hinzufügen, vielleicht mit jQuery und der Funktion .addClass?)" Ich denke, damit bist Du auf dem richtigen Wege. Was fehlt dir denn für eine Umsetzung?

Wie Du die Texte am besten dynamisch anzeigst, hängt wesentlich davon ab, wie lang sie sind. Sind sie sehr kurz, kannst Du sie alle gleichzeitig auf der Seite unterbringen und den richtigen jeweils sichtbar machen. Sind sie länger, ist es empfehlenswert, sie mit Ajax zu laden, so wie es in den Beispielen gemacht wird, die Du gefunden hast.

Beim Überblenden kannst Du so vorgehen: Den neuen und den alten Text mit absoluter Positionierung übereinander legen und den neuen mit CSS z-index in den Vordergrund bringen. Den neuen jedoch zunächst unsichtbar machen, indem Du die Deckkraft (CSS opacity) auf 0 setzt. Dann die Deckkraft auf 1 animieren.

Wenn Du das nicht selber programmieren möchtest, könntest Du einen vorgefertigten Slider verwenden. Swiper z. B. ist flexibel, bietet Überblenden und ermöglicht es, nachgeladene Inhalte dynamisch hinzu zu fügen.

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.