Beiträge von Sempervivum

Versuche folgendes: Beim ul der zweiten Stufe das margin-top löschen und statt dessen top: 100%; setzen:

html-seminar.de/woltlab/attachment/2252/

Mit den weiteren Problemen in den anderen Browsern sehen wir dann weiter, wenn dies funktioniert.

Zitat

Gibt es eigentlich extra Befehle, die nur für den Internetexplorer bestimmt sind und die alle anderen Browser ignorieren?

Der Internetexplorer war schon immer der Schrecken der Webentwickler. Es ist weniger das Problem, dass es spezielle Befehle für ihn gibt, sondern mehr, dass er bestimmte Befehle gar nicht unterstützt oder darauf anders reagiert. Konkret trifft das z. B. auf position: sticky; zu, es wird vom IE nicht unterstützt.

Die Untermenüs konnte ich mit folgenden Änderungen im CSS sichtbar machen:

overflow: auto; auf overflow: visible; geändert für .nav-list in navi.css ab Zeile 91

position: relative; hinzugefügt für .navlist ul li in navi.css Zeile ab Zeile 88

Zitat

mit der Positionierung rechts funktionierts nicht so recht beim Resizen

Hast Du mit right und bottom positioniert wie in deinem ursprünglichen CSS? Dann müsste es eigentlich in der rechten unteren Ecke kleben.

Zitat

Ändere ich max-height: 400px auf height: 400px ist das Foto ok, aber es ist nicht mehr responsive.

Das ist der Nachteil von Hintergrundbildern: Der Container passt sich nicht an das Bild an und es ist schwer reponsiv zu machen und Abschneiden oder verzerren zu vermeiden.

Es gibt im wesentlichen zwei Varianten, um über ein Bild etwas darüber zu legen, die ich hier zusammen gestellt habe:

https://jsfiddle.net/Sempervivum/k84scz1a/24/

Statt Text ist es in deinem Fall ein weiteres Bild.

Mit obsoluter Positionierung des Herzens solltest Du eigentlich zum Ziel kommen. In deinem ersten Code finde ich diese jedoch nicht, sondern nur relative Pos. für das Herz. Du musst dem Container das position: relative; geben und dem Herz ein position: absolute;.

#Inhalt {
    background-color: orange;
    padding-bottom: 2em;
    
    .zeiger_zoom-in {
        cursor:zoom-in;
    }
}

So kannst Du CSS nicht verschachteln. Wenn Du es so umstellst, sollte es funktionieren:

#Inhalt {
    background-color: orange;
    padding-bottom: 2em;
}
.zeiger_zoom-in {
    cursor:zoom-in;
}

Oder, falls es dir darauf ankommt, dass das .zeiger_zoom-in innerhalb von #Inhalt liegt, so:

#Inhalt .zeiger_zoom-in {
    cursor:zoom-in;
}

Nicht ganz simpel aber auch nicht übermäßig kompliziert und ohne jQuery:

https://www.dev-tips-and-tricks.com/animate-elemen…view-vanilla-js

... und das, was ich in Posting #7 vorgeschlagen habe, ist hier genauer beschrieben und ist kein Ajax sondern eine Alternative dazu, die viel einfacher ist:

https://www.php-einfach.de/php-tutorial/php-include/

Oh Entschuldigung, in Posting #9 habe ich den Link vergessen. Hier findest Du den Code für das Umfärben der Nav:

https://codepen.io/jhiam/pen/woZaKZ

Zitat

wie entsteht der effekt oben beim scrollen von transparent zu black?

Hier findest Du den Code für so etwas.

Zitat

war grad auf der ajax seite.. das überfordert mich, das war früher mit den frames und targets doch viel schönen

Lies mein Posting #7, auf die Weise ist es viel einfacher.

Zitat

ich kenne noch das framelayout, wo man oben die buttons hat und clickbar darunten den main-frame schön mit inhalten austauscht.....

wie macht man das mittlerweile

Eine andere Möglichkeit als Ajax ist, dass Du die Inhalte, die auf allen Seiten gleich sind, wie die Buttons und Clickbar, von denen Du schreibst, in eine Datei schreibst und diese auf den einzelnen Seiten mit PHP-include einbindest. Dann hast Du weiterhin den Vorteil, dass die Sachen, die gleich sind nur einmal vorhanden sind und nur in einer Datei geändert werden müssen.

Versuche, ob dieses CSS funktioniert:

table#DataTables_Table_5 {
    width: 100% !important;
}

Nicht so richtig sauber, weil bei den anderen Tabellen anscheinend die Breite pixelgenau berechnet wird.

Ja, das ist möglich. Zunächst Mal durch die Funktion eval(), aber nicht zu empfehlen, man sagt "eval is evil".

Besser ist es, die Daten so aufzubauen:

const description = {
    knights: [
        'neraxis',
        'loman',
        'aselica',
        'clause',
        // usw.
    ],
    warriors: [
        // hier die Elemente von warriors
    ]
};

Dann kannst Du so zugreifen:

var a = description[name][i];

wobei die Variable name 'knights' oder 'warriors' oder ... enthält.

Was ist denn genau mit "verschieben" gemeint? Einrücken vielleicht?

Selfhtml ist immer eine gute Quelle. Hier ist es beschrieben:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/Rahmen

So ist es wesentlich besser!

Bei dem CSS fällt auf, dass die abschließenden Semikolons fehlen. In dem Screenshot in Posting #4 ist es richtig.

Das ist kein I sondern ein Schrägstrich in spitzen Klammern:

html-seminar.de/woltlab/attachment/2244/

Zitat

Das ganze sieht bei mir dann so aus :

Da hast Du wohl vergessen, etwas einzufügen.

Und beachte bitte meinen Hinweis oben:

Zitat

BTW: Code besser als Text kopieren und einfügen mit Codetags, das </> in der Werkzeugleiste oben. Dann hat man es leichter, ebenfalls mit Copy&Paste zu arbeiten.

So ist es auch viel einfacher und schneller als mit Screenshots.

PS: Und das <link ... im head-Bereich muss mit einer spitzen Klammer abgeschlossen werden.

Da sehe ich drei Fehler:

<html> lang="de">

muss so aussehen:

<html lang="de">

Und hier gehört das Gänsefüßchen nicht hin und die Überschrift h1 auch nicht:

"<title><h1>CSS zum TESTEN</h1></title>

Statt dessen gehört das h1 in den Body-Bereich, zwischen <body> und </body>.

BTW: Code besser als Text kopieren und einfügen mit Codetags, das </> in der Werkzeugleiste oben. Dann hat man es leichter, ebenfalls mit Copy&Paste zu arbeiten.

Das kannst Du relativ leicht erreichen, indem Du nach dem Erzeugen der neuen Bilderreihe einen Klick auf das erste Bild simulierst durch Aufruf der Funktion click():

            function createHeroes(heroes, heroeslist, name) {  // Create, chain Img

                const htmlFragment = document.createDocumentFragment();
                x = 0;
                y = 0;

                for (let i = 0; i < heroes; i++) {
                    const image = document.createElement('section');
                    image.classList.add('hero_img', 'class_' + name);
                    image.id = heroeslist[i];
                    htmlFragment.appendChild(image);
                    image.style.backgroundPosition = x + '% ' + y + '%';
                    statusAvatar(image, x, y, name);
                    console.log(image);
                    moveAxis(x, y);
                }
                htmlFragment.querySelector('.hero_img').click();
                bgHeroes.appendChild(htmlFragment);
            }

BTW: Als ich den Code in meinen Editor übertragen habe, hat dieser beanstandet, dass am Ende des HTML zwei schließende </div> fehlen.