Beiträge von Sempervivum

Zitat

Code

1. .bildmitbildunterschrift span {
2. background-color: red;
3. position: absolute;
4. bottom: 0;
5. }

Dann platziert sich mein Text einfach nicht auf dem Bild sondern bleibt konsequent darunter

Das Problem hatte ich auch, als ich versucht habe, es nachzustellen, aber es war eine Täuschung: Die Unterschrift war nicht unter, sondern auf dem Bild, aber weil die Hintergrundfarbe nicht teiltransparent war, hatte es den Anschein, dass sie darunter lag. Macht man die Hintergrundfarbe transparent, funktioniert es:

    <style>
        figure {
            position: relative;
            display: inline-block;
        }

        figcaption {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            background-color: rgba(64,64,64,0.5);
            color: white;
        }
    </style>
    <figure>
        <img src="images/food1.jpg" />
        <figcaption>Food 1</figcaption>
    </figure>

Wie Du siehst, empfehle ich außerdem, die neuen semantischen Tag figure und figcaption zu verwenden.

Du kannst ja auch lokal testen, dann brauchst Du es nicht hochzuladen. Wenn es allerdings um Ajax geht, brauchst Du einen Webserver, aber den kannst Du auch lokal installieren. Oder einen Editor installieren, der ihn mit bringt wie MS Visual Studio.

Ja, das ist der Kern der Sache und das sollte funktionieren. Noch einfacher wird es, wenn du load() verwendest. Wenn Du deine Seite jetzt bei bplaced hast, brauchst Du doch jsfiddle nicht mehr?

Dann poste doch mal den aktuellen Code. Ich erinnere mich, mehrere Varianten entwickelt zu haben und wahrscheinlich hast Du es für deine Zwecke ja auch abgeändert.

Ja, das siehst Du richtig. Und wenn man es richtig macht, funktioniert auch alles. Das Problem bei Greasemonkey war möglicher Weise, dass man mit jQuery ja nur den HTML-Text lädt und nicht die Bilder, CSS- und JS-Dateien. Sind diese relativ verlinkt, funktioniert es nicht. Aber wenn Du es auf deiner eigenen Site machst, ist das kein Problem.

Diese Frage kommt nicht zum ersten Mal. Speichert man die Position und setzt sie auf der neuen Seite bekommt man keinen unterbrechungsfreien Ablauf hin. Die einzige Möglichkeit, die ich kenne, ist, eine Hauptseite mit der Musik zu haben und die Unterseiten mit Javascript/jQuery hinein zu laden. Siehe hier:

https://www.homepage-forum.de/forum/-1-homep…jax-jquery-load

Beispiel:

http://ulrichbangert.de/china/index.php

(Hier wird in den Inhalten navigiert, nicht mit dem horizontalen Menü oben. Das Prinzip ist aber das selbe.)

Zitat

2b.Wie macht man das mit einen topmenü?,wenn ich da ein link ändere,das es auf alle unterseiten im topmenü dann auch geändert wird ,ohne jede seite wieder zu bearbeiten zu müssen.

Dieses Problem erübrigt sich, wenn mand die Unterseiten mit Javascript lädt, weil es die Hauptseite mit dem Menü nur einmal gibt.

Da dieses core.js offenbar von github ist, würde ich es nicht ändern, sondern den Code ganz unten vor dem schließenden </body> auf der HTML-Seite einfügen. Und nicht vergessen, ihn in Script-Tags einzubetten.

Basti war schon auf dem richtigen Wege. Mit jQuery-click kannst du einen Klick auf ein Element simulieren:

https://api.jquery.com/click/

Versuche dies:

        $(document).on("keydown", function (event) {
            console.log(event.which);
            if(event.which == 66) $('.takePic').click();
        });

Das Canvas wird schon an die Größe des Browserfensters angepasst. Oder willst Du es nicht für das ganze Fenster verwenden sondern nur für einen bestimmten Container? Dann müsstest Du das entspr. umändern.

Zitat

muss ich jetzt alles andere auf der hp höhere z-index werte geben als diese sterne??

Ein z-index kann auch negativ sein, wenn Du dem Canvas einen negativen Wert gibst, brauchst Du nicht allen anderen Elementen einen z-index zu geben.

Meinst Du die Links im Footer? Die a-Tags dort enthalten nur Bilder, color beeinflusst jedoch die Textfarbe, daher ist keine Änderung sichtbar.

Zitat

aber bei mir opera werden alle bilder nebeneinander angezeigt ,mit den zähler.

Vielleicht eine alte Version im Cache? Sieh dir die Struktur mal im HTML-Inspektor der Entwicklertools an.

Zitat

das soll unter den anderen bildern in der mitte.wie bei fiddle.

Bei mir im Opera ist es das. Meinst Du den Effekt, dass er nach unten über die laufenden Bilder hinaus ragt? Das kannst Du verhindern, indem Du beim footer die feste Höhe heraus nimmst.

Was meinst Du denn, ist falsch? Dass das Bild verpixelt ist?

Im FF wird er bei mir gar nicht angezeigt:

Zitat

TypeError: document.getElementById(...) is null

[Weitere Informationen]

counter_js.php:2:1

<anonym>

https://www.gratis-besucherzaehler.net/counter_js.php:2:1

Du musst die Datei auch entsprechend mit UTF-8 abspeichern. Was benutzt Du für einen Editor? Normaler Weise findet man es unter "Speichern unter" oder in den Einstellungen.

Ich empfehle zunächst, die semantischen Tags wie <header> und <nav> zu verwenden.

https://wiki.selfhtml.org/wiki/HTML/Tuto…nstrukturierung

Zitat

Bei mir lässt sich der text nicht auf dieselbe Höhe wie das Bild oder umgekehrt machen obwohl sie doch im selben div stehen?

Informiere dich über Flexlayout:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Mit flex-direction und align-items lässt sich die Anordnung und Ausrichtung der Elemente dann ganz nach Wunsch einstellen.

Das brauchst Du nicht von Hand umzuschreiben. Wie ich schon schrieb, kannst Du dir in Codepen die compilierte Version anzeigen lassen und wenn Du die kopierst und in deine Homepage einfügst, sollte es funktionieren.

Habe ich auch schon gesehen. Scheint Code für einen Preprocessor zu sein. Wie bei SCSS etc. "View compiled PUG" auswählen, dann bekommst Du das kompilierte HTML:

Ich schlage dies vor:

<style>
        .angebotskasten {
            width: 100%;
            height:400px;
            background-color: blue;
        }
        .angebotskasten.large {
            height: 600px;
        }
            .angebotskasten span.smaller {
                display: none;
            }
            .angebotskasten span.larger {
                display: inline;
            }
            .angebotskasten.large span.smaller {
                display: inline;
            }
            .angebotskasten.large span.larger {
                display: none;
            }
    </style>
    <div class="angebotskasten">
        <button type='button' class='togglebtn'>
            <span class="larger">Angebotskasten vergrößern</span>
            <span class="smaller">Angebotskasten verkleinern</span>
        </button>
    </div>
    <div class="angebotskasten">
        <button type='button' class='togglebtn'>
            <span class="larger">Angebotskasten vergrößern</span>
            <span class="smaller">Angebotskasten verkleinern</span>
        </button>
    </div>
    <script>
        $(".togglebtn").on("click", function () {
            $(this).closest(".angebotskasten").toggleClass("large");
        });
    </script>

Der Code benutzt jQuery, vergiss nicht, es einzubinden.

Du musst das Javascript einbinden, nachdem die HTML-Elemente definiert wurden, d. h. am Ende des body, vor dem schließenden </body>.

Geht doch voran! Damit die Seite sofort angezeigt wird, musst Du die HTML-Datei in index.html umbenennen.