HTML Ankerlinks funktionieren nicht?

Hallo zusammen, ich habe ein sehr nerviges Problem mit meiner WordPress Seite.
Bei manchen Ankerlinks springt die Seite beim laden erst an den richtigen Punkt, dann aber ganz nach unten auf die Seite. Kann mir jemand sagen was das Problem ist?
https://xn--reiterhof-hofsttten-uwb.at/#rv

Danke!

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

JanaL161

25.10.2024, 12:53

Ich denke, das liegt einfach daran, dass die Seite etwas braucht, um korrekt zu laden. Jeder moderne Browser kann Profiling:

Bild zum Beitrag

Das meiste davon (gelb) ist Javascript. Lila zeigt "Layout", also neu-Ausrichten der Seite. Darunter in Transparent-Blau sind die Netzwerk-Anfragen zu sehen, welche ebenfalls etwas brauchen.

Wenn der Browser nicht weiß, wo was hinkommt, kann er natürlich nicht die Position für den Link halten.

Dagegen etwas zu tun, ist etwas komplizierter. Es hilft, so vielen Elementen wie möglich eine explizite Größe zu geben oder zumindest das Layout so zu gestalten, dass es früh feststeht. So kann der Rest dann laden, ohne alles zu verschieben.

Zur Not können auch Elemente zunächst versteckt sein und dann durch JS nach dem Laden gezeigt werden, sodass es nicht ständig flackert (css display).

Ebenfalls ist es mit Javascript möglich, den Anker abzufangen und erst wieder zu setzen, wenn die Seite geladen ist (https://developer.mozilla.org/en-US/docs/Web/API/Location/hash)

BadgerSlayer

Beitragsersteller

25.10.2024, 13:12

Danke! Das war es tatsächlich :) Ich habe das ganze jetzt per code in head tag (danke an ChatGPT :D) gelöst:

<script> window.onload = function() { if (window.location.hash) { setTimeout(function() { const target = document.querySelector(window.location.hash); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }, 500); } }; </script>

Danke für die Hilfe!

Ähnliche Beiträge

Quelltext Multiple Choice antworten?

Hallo liebe Informatiker,

es gibt ja solche online tests >>

https://www.indiabix.com/online-test/aptitude-test/

Ist ja easy, den Quelltext nach den richtigen antworten zu untersuchen.

dann gibt es diese softwarelösung:

https://www.onlineexambuilder.com/de/funktionen/item10065

ist das Prinzip dahinter dasselbe? Kann man dort ebenfalls die richtigen Antworten im Quelltext finden? gibt es eine Möglichkeit die richtigen Antworten zu verbergen?
Wie funktioniert so etwas genau? die Antwort muss ja von meinem Pc zu hause dorthin zum Server kommuniziert werden.

https://www.youtube.com/watch?v=cKvzOs9foCM&t=320s

laut diesem Video sind die Lösungen oftmals im Quelltext enthalten. funktionieren alle multiple choice tests so und sind die Lösungen im quelltext vorhanden?

Beste Grüße!

...zum Beitrag

WordPress Post Request umleiten?

Moin,

angenommen ich spreche an;

https://www.example.com/API?UserId=1234&Request=1

Die Website example.com ist eine WordPress-Page. Die /API leitet auf meinen Server um mit dem API Call und gibt dann auch die Antwort zurück.

Gibt's ein Plugin oder PHP/HTML Lösung?

Danke und LG!

...zum Beitrag

Fahrradkette springt ab einem bestimmten Gang?

Meine Fahrradkette springt ab dem 4ten Gang. Die Schaltung wurde heute von Fachmännern eingestellt, jedoch springt sie noch immer herum.

Das Fahrrad : https://www.intersport.at/genesis-impact-4.8-mountainbike-29-fahrrader-und-bikezubehor-grau-iat.genesis.4034942.017.html

Ich bitte und Nennung des Problems oder Lösungs Ansätze.

Danke im Voraus.

...zum Beitrag

Wie kann ich eine WordPress-Kommentar-Sektion zu meinem individuellen Theme hinzufügen?

Ich habe eine individuelle Website mit Webflow erstellt und dann den HTML- und CSS-Code kopiert, um ihn als Grundlage für mein individuelles WordPress-Theme zu verwenden. Das Theme unterstützt jedoch keine Kommentar-Plugins wie WP Disquz oder das grundlegende WP-Kommentarformular. Was sollte ich tun, um eine Kommentar-Sektion auf meiner Website zu aktivieren?

Sollte ich den Kommentar-Sektions-Code direkt in die HTML- und CSS-Dateien meines individuellen Themes einfügen oder gibt es einen anderen Code, den ich zu den Theme-Ordnern hinzufügen kann, um Kommentar-Plugins und das WP-Kommentarformular zu unterstützen?

ihr könnt euch auch gerne den code der website anschauen

https://germanpoems.org/

...zum Beitrag

WordPress - Logo direkt neben die Navigation einsetzen...?

Hallo zusammen,

ich würde gerne in WordPress mein Logo direkt neben die Navigation setzen. Nicht darüber oder darunter. Leider verzieht es das immer in der Ansicht. Ich habe auch schon versucht, das Logo zu verkleinern aber das klappt natürlich auch nicht. Ich kann leider den Bereich dafür im Code nicht finden, da ich nicht so der Experte in html und CSS bin.

Kann jmd. helfen und sagen wo genau das Bild eingefügt werden muss bzw. was ich zusätzlich noch im CSS abändern muss damit Bild und Navigation zusammen auf eine Höhe passen? Ich habe Online auch schon was gefunden, hilft mir aber auch nicht wirklich: https://wordpress.org/support/topic/to-make-menu-toggle-align-with-homepage-logo

Hat jmd. eine Idee??

Vielen Dank.

Theme Header (header.php)

div id="page" class="hfeed site"> <?php _e( 'Skip to content', 'argent' ); ?>

<header id="masthead" class="site-header" role="banner">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <img src = "http://138.201.91.49/wordpress/wp-content/uploads/2016/05/Logo-KopieV.1.2-2.png"/>
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php _e( 'Menu', 'argent' ); ?></button>

        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    <div class="site-branding">
        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    </div><!-- .site-branding -->

...zum Beitrag

HTML/CSS: Schriftfarbe im Kontaktformular ändern?

Bin Anfänger. Ich betreibe eine Website mit WordPress und nutze das Plugin "Contact Form 7". Das Forumular was ich erstellt habe besitzt mehrere Container. Einer davon ist ein Drop-Down Menü. Sieh so aus:

Ihr seht: Schriftfarbe und Background Color sind beide weiß. Ich möchte, dass die Schriftfarbe schwarz wird.

<div class="column one">[select* Der-Grund include_blank "Ein Problem melden" "Frage" "Feedback" "Sonstiges"]</div>

Was muss ich nun machen? Wo kann ich das Attribut font-color korrekt hinzufügen? Ich verstehe ehrlich gesagt noch nicht, was genau [select usw jetzt ist. Ist das HTML?

Hier ist eine Hilfeseite, wo das Wort "color" aber nicht auftaucht:

https://contactform7.com/checkboxes-radio-buttons-and-menus/#select

...zum Beitrag

HTML <div> in Wordpress wird nicht (richtig) angezeigt?

Moin,

ich würde gerne in meine WordPress Seite eine Sektion mit Tabs einfügen. jquery läuft und die Styles (CSS) kann ich auch einfügen. Nun ist mein Problem, dass entweder die Tabs nicht horizontal sondern vertikal zerstückelt angezeigt werden, wenn ich den Code direkt in Wordpress einfüge, oder garnichts angezeigt wird, wenn ich das ganze im Child Theme als Template anlege. Das Template wird auf die Seite angewendet, aber es ändert sich nichts.

Hat jemand eine Idee oder Erfahrung mit Child Themes?

Theme: ARK
Code Snippet der hinzugefügt werden soll: https://codepen.io/pagefreak/pen/oNbEdVB

Aktuelles Resultat: http://cv.webdesign-jh.de/test/

...zum Beitrag

WordPress lokale Seite hosten?

Hallo!

Ich muss für die Schule eine Website bauen, die soll für ein Hotel sein wo man Zimmer buchen kann usw.

Ich habe die Website jetzt lokal mit WordPress gebaut weil ich ein kostenloses WordPress Theme benutzt habe und man das online auf WordPress ohne business plan nicht kann

Dazu habe ich ein Tutorial befolgt und mit Bitnami WordPress lokal installiert und darauf gearbeitet

Jetzt muss diese seite aber irgendwie benotet werden und ich habe keine ahnung wie ich sie für meinen Lehrer sichtbar machen soll ohne jetzt extra einen wordpress plan zu kaufen und die seite mit dem all-in-one plugin auf die online wordpress version lade, eine domain und hosting dazu kaufe

Was für Alternativen habe ich wenn es überhaupt welche gibt diese lokale wordpress seite für kein riesen geld irgendwie zu hosten?

Soll ich doch lieber einfach ein HTML CSS Template benutzen und dieses dann auf GitHub hochladen? Habe das mal mit einem Portfolio so in der Art gemacht aber ich weiß nicht ob das in diesem Fall auch gehen würde?

Bin irgendwie gerade ziemlich planlos und würde mich über Ratschläge freuen

...zum Beitrag

Wie kann man einen HTML Div Container nach unten verschieben?

Hallo,

ich würde gerne den markierten Container unter das Posten Feld setzen. Wie genau kann das funktionieren?

Sorry für die blöde Frage, bin noch etwas neu / unerfahren beim coden :)

...zum Beitrag

Ist es heutzutage noch angebracht mit html Webseiten für andere (z.B. kleine Firmen oder kleine Dienstleister) zu erstellen?

Hallo, nehmen wir an, ein Künstler würde gerne eine Webseite/Portfolio haben zu seiner Biografie. Wäre es in Ordnung, dies in HTML zu tun oder verlangt wirklich jeder heutzutage eine Webseite mit WordPress?

...zum Beitrag

http zu https redirect-Fehler auf Wordpress-Seite?

Ich habe eine Wordpress-Website, nennen wir sie example.com, die von IONOS gehostet wird. Es handelt sich um eine HTTPS-Website mit einem funktionierenden SSL-Zertifikat, sodass alle HTTP-Anfragen auf die angeforderte Seite umgeleitet werden sollten, aber dabei das HTTP durch HTTPS ersetzt wird.

Beispiel: http://example.com sollte auf https://example.com umgeleitet werden (das funktioniert). http://example.com/subpage sollte auf https://example.com/subpage umgeleitet werden (das funktioniert jedoch nicht!). Stattdessen passiert Folgendes: http://example.com/subpage leitet auf https://example.com/ um.

Das Hauptproblem dabei ist, dass die Google Search Console fälschlicherweise einen Umleitungsfehler für jede Unterseite erkennt, die sie zu indexieren versucht, obwohl die Indexanfrage speziell für die HTTPS-Seite (https://example.com/subpage) gesendet wurde.

Ich verwende die neueste Version von Wordpress. Die derzeit installierten Plugins sind:

Advanced Import
Duplicate Page
Elementor Pro
IONOS Assistant (deaktiviert)
IONOS Help (deaktiviert)
IONOS Journey (deaktiviert)
IONOS Login
IONOS Loop (deaktiviert)
IONOS Navigation
IONOS Performance
IONOS Security
Music Player for Elementor
Title Remover
WPvivid Backup Plugin
Yoast SEO Premium

Diese Teile meiner .htaccess-Datei könnten für das Problem verantwortlich sein:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{SERVER_PORT} 80
    RewriteRule ^(/(.*))?$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>

und/oder:

<IfModule mod_rewrite.c>
    # ENGINE ON
    RewriteEngine on

    # set hostname directory
    RewriteCond %{HTTPS} on
    RewriteRule .* - [E=IONOS_PERFORMANCE_HOST:https-%{HTTP_HOST}]

    RewriteCond %{HTTPS} off
    RewriteRule .* - [E=IONOS_PERFORMANCE_HOST:%{HTTP_HOST}]

    # set subdirectory
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_METHOD} GET
    RewriteCond %{REQUEST_URI} !(.*)/$
    RewriteCond %{REQUEST_FILENAME} !.(gif|jpg|png|jpeg|css|xml|txt|js|php|scss|webp|mp3|avi|wav|mp4|mov)$ [NC]
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:%{REQUEST_URI}/]

    RewriteCond %{REQUEST_URI} /$
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:%{REQUEST_URI}]

    RewriteCond %{REQUEST_URI} ^$
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:/]

    # gzip
    RewriteRule .* - [E=IONOS_PERFORMANCE_SUFFIX:]
    <IfModule mod_mime.c>
        RewriteCond %{HTTP:Accept-Encoding} gzip
        RewriteRule .* - [E=IONOS_PERFORMANCE_SUFFIX:.gz]
        AddType text/html .gz
        AddEncoding gzip .gz
    </IfModule>

    # Main Rules
    RewriteCond %{HTTP_ACCEPT} .*text/html.*
    RewriteCond %{ENV:INITIAL_REQUEST_METHOD} ^$
    RewriteCond %{ENV:REDIRECT_INITIAL_REQUEST_METHOD} ^$
    RewriteCond %{QUERY_STRING} ^$
    RewriteCond %{REQUEST_URI} !^/(wp-admin|wp-content/cache)/.*
    RewriteCond %{HTTP_COOKIE} !(wp-postpass|wordpress_logged_in|comment_author)_
    RewriteCond /homepages/9/d4297862886/htdocs/./wordpress/wp-content/cache/ionos-performance/%{ENV:IONOS_PERFORMANCE_HOST}%{ENV:IONOS_PERFORMANCE_DIR}index.html%{ENV:IONOS_PERFORMANCE_SUFFIX} -f
    RewriteRule ^(.*) /wp-content/cache/ionos-performance/%{ENV:IONOS_PERFORMANCE_HOST}%{ENV:IONOS_PERFORMANCE_DIR}index.html%{ENV:IONOS_PERFORMANCE_SUFFIX} [L]
</IfModule>

und/oder:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Meine Permalink-Einstellung in Wordpress ist wie folgt:

https://example.com/%category/%postname%/

...zum Beitrag

Ist es zulässig bei einer Deutschklausur bei Umlauten statt zwei Punkte ein kleines "e" hinzumachen?

Laut der Seite ist es "heute egal (...) ob man Umlaute mit Punkten oder Strichen schreibt." Doch wie steht es um die Vorgänger-Version der Vorgängerversion?

https://kinder.wdr.de/tv/wissen-macht-ah/bibliothek/kuriosah/sprache/bibliothek-warum-haben-manche-vokale-striche-oder-100.html

...zum Beitrag

An was kann es liegen, dass meine WordPress Themes nicht geladen und angezeigt werden?

Hallo, Ich habe folgendes Problem. Ich habe soeben WordPress installiert und schon bei der Installation ist mir aufgefallen, dass die Seiten ohne Design waren, rein Strukturiert. Mein Dashboard wird zwar ganz normal angezeigt, aber wenn ich auf "Themes" gehe und meine installierten themes anschauen will kommt das Typische Symbol dafür, dass er das Bild nicht "lesen" kann. (Symbol: Foto das an der unteren Ecke abgerissen ist) Lade ich ein Theme, auch wenn es die vorinstallierten sind, wird mir die Seite wieder rein Strukturell angezeigt ohne Design, wie eine alte HTML Seite. Auf dem Bild kann man erkennen was ich meine,auch wenn es nur ein Screenshot vom Handy ist. Kann mir jemand weiterhelfen? Ich bedanke mich schonmal im Voraus! PS: habe die themes auch schon deinstalliert und neu hoch geladen über den FTP-Server, gleiches Problem.

...zum Beitrag

CSS möchte nicht laden?

Hallo,

es geht darum, dass ich ein Projekt habe in dem Java, Spring boot, ReactJS, CSS, JS und RestAPI mit inbegriffen sind. Mein Problem liegt lediglich darin, dass die html beim laden der Seite: localhost:8080/login.html den inhalt der html datei anzeigt aber die css datei garnicht übernimmt. Die Pfade zu den einzelnen Dateien stimmen ebenfalls, da sie verlinkt sind, doch das stylen über css funktioniert nicht

login.html: https://codefile.io/f/uD0jP33Wef
style.css: https://codefile.io/f/AGN6ENmt6t
script.js: https://codefile.io/f/unKOx5NUi6

Wäre echt top, wenn mir jemand dabei behilflich sein könnte.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen