XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Springen des Headers vermeiden (http://xhtmlforum.de/showthread.php?t=73000)

runner 24.09.2016 14:17

Springen des Headers vermeiden
 
Guten Tag!

Wie kann ich es verhindern, dass der Header/Slider beim Klick auf eine neue Seite jedesmal springt?
Die Responisivität sollte jedoch erhalten bleiben!

http://www.f1.cgs.onlinebusiness.cc/

Vielen Dank

MrMurphy 24.09.2016 14:59

Hallo

Große Buchstaben benötigen mehr Breite als kleine.

Also entweder einen anderen Hover-Effekt wählen (das würde ich machen) oder den li-Elementen eine feste Breite zuweisen.

Gruss

MrMurphy

runner 24.09.2016 20:16

Danke!

Es geht mir aber nicht ums Menü, sondern um den Slider / Bildwechsel darüber. Dieser springt (geht ganz klein auf und wird dann erst wieder groß), sobald eine neue Unterseite geöffnet wird.

MrMurphy 25.09.2016 10:57

Hallo

Ich habe den Slider nicht gesehen da bei mir zur Abwehr von unerwünschter Werbung JavaScript blockiert ist.

Das Verhalten habe ich jetzt erkannt und kann es nachvollziehen.

Allerdings sehe ich keine Lösung. Die Website enthält so ziemlich jede bekannte Geschwindigkeitsbremse. Da bleibt eigentlich nur abreißen und mit aktuellem HTML / CSS neu erstellen.

Eine einfache Korrekturmöglichkeit sehe ich nicht. Vielleicht findet ja ein anderer User eine.

Zu den Geschwindigkeitsbremsen beim Aufruf der einzelnen Webseiten:

1. Typo3

Die Website basiert wohl auf Typo3, einem Content Management System (CMS) beruhend auf einer Datenbank. Die einzelnen Webseiten werden bei solchen CMS bei jedem Aufruf zunächst auf dem Server zusammengestellt. Deshalb sollte der genügend Power / Ressourcen haben um die dafür notwendigen Berechnungen ohne Zeitverzögerung durchzuführen.

2. HTML-Fehler

Die Webseiten enthalten HTML-Fehler. Die zu korrigieren kostet die Browser unnötige Rechenzeit. Deshalb sollte die für jede Webseite korrigiert werden, siehe zum Beispiel

https://validator.w3.org/check?verbo....cc%2Fstart%2F

3. XHTML

XHTML ist bereits vor 8 Jahren offiziell begragen worden und sollte seitdem nicht mehr verwendet werden. Responsive Design gab es damals noch nicht, dafür ist es deshalb denkbar ungeeignet. Wenn XHTML verwendet wird sollte der Quelltext auch nach den Regeln von XHTML erstellt werden. Aktuelle HTML5-Elemente oder Tags aus anderen HTML-Versionen sind Fehler und kosten Rechenzeit.

4. Verschachtelungen

Unnötige Verschachtelungen kosten Rechenzeit und sind vom Webseitenersteller kaum zu pflegen.

Code:

  <div id="wrapwrap">
      <div id="slide_space">
        <div id="slides">
            <div id="c2" class="csc-default">
              <div class="tx-ws-flexslider">
                  <div id="flexslider-2" class="flexslider ">
                    <ul class="slides">
                        <li>
                          <div class="slidercontent wsflexslider-style1">
                              <img src="../fileadmin/user_upload/slide1.png" width="800" height="201" alt="" />
                              <div class="caption-wrapper caption-align-left">
...

5. Slider

Bei der Auswahl des Sliders sollte auf die Ausführungsgeschwindigkeit (und nebenbei auf ein Fallback) geachtet werden.

6. Grafiken

Die Grafiken sollten wegen der Ladezeit für Websites optimiert werden. Da gibt es bei dir noch Luft.

7. JavaScript

JavaScript-Berechnungen kosten immer Rechenzeit. JavaScript ist für sich eine Geschwindkeitsbremse. Deshalb sollte nur das absolut notwendige JavaScript verwendet werden.

Falls möglich sollten Lösungen mit CSS bevorzugt werden. Die sind "Pi mal Daumen" um den Faktor 10 schneller als gleichwertige JavaScript Lösungen.

8. Externe Links

Alle Menülinks sind als externe Links aufgeführt. Dadurch werden die Webseiten von den meisten Browsern bei jedem Aufruf komplett neu geladen. Mögliche Cache-Funktionen werden so ausgehebelt und lahmgelegt.

Weitere Informationen

Um das unerwünschte Springen zumindest zu lindern kann häufig einem den Slider umgebenden Container eine feste Höhe vorgegeben werden. Das bekomme ich auf deiner Website leider nicht hin. Ich habe das Gefühl dass die Slidercontainer erst zum Schluß des Seitenaufrufs erstellt werden und CSS-Angaben dazu erst dann funktionieren.

Mit freundlichem Gruss

MrMurphy

protonenbeschleuniger 25.09.2016 11:08

Zitat:

Zitat von MrMurphy (Beitrag 549895)
Ich habe den Slider nicht gesehen da bei mir zur Abwehr von unerwünschter Werbung JavaScript blockiert ist.

Ging mir genauso und ich bin erstaunt, dass eine Webseite fast 50% des verfügbaren Platz für Dekoration braucht.

Ohne JS wirkt die Seite aufgeräumt und man kann die Inhalte angenehm lesen. wird JS aktiviert sind die Inhalte nur noch über scrollen erreichbar und beim lesen wird man durch die Animation abelenkt.

etux 25.09.2016 11:29

Zitat:

Zitat von MrMurphy (Beitrag 549895)
Um das unerwünschte Springen zumindest zu lindern kann häufig einem den Slider umgebenden Container eine feste Höhe vorgegeben werden.

#slides hat eine Höhe - „height: 24%“. Sie wird vom Browser allerdings als „height: auto“ interpretiert und löst so das Problem mit dem Slider nicht ;)

.

runner 25.09.2016 20:01

Guten Abend Zusammen!

Vielen Dank für eure zahlreichen Feedbacks und Hilfen!

Wie müsste ich den die Links aufbauen, dass diese als interne Links interpretiert werden und dann ggf. auch Clientseitig gecached werden?

Danke!

etux 26.09.2016 07:10

Zitat:

Zitat von runner (Beitrag 549899)
Wie müsste ich den die Links aufbauen, dass diese als interne Links interpretiert werden und dann ggf. auch Clientseitig gecached werden?

Was MrMurphy da gesehen haben mag, weiß ich nicht. ;)
Du hast keine absolute Links in Deinem Quellcode. Und selbst wenn, wäre das völlig in Ordnung und eher vom Vorteil. Die relative Links kannst Du also so lassen – das meta-Element „base“ hast Du ja schon.
TYPO3 CMS hatte schon immer ein gutes Caching-System. Es wurde vor etwa 1-2 Jahren generell überholt. Das Neue ist m.E. mit das Beste, was es zur Zeit überhaupt gibt.
Auch wenn ich glaube, dass die schlechte Ladezeiten Deiner Site, weniger von den vielen JavaScript- und CSS-Dateien beeinflusst werden, sondern vom Server selbst (Test-Server der domain-factory), solltest Du spätestens beim produktiven Einsatz der Website alles optimiert haben – die Dateien aktualisieren (z.B. jQuery), reduzieren, zusammen fassen.
Die zwei Letzteren kann TYPO3 für Dich erledigen. Auch die aktuelle jQuery kannst Du aus dem Vendor-Verzeichnis der typo3_src einbinden – sofern Du eine aktuelle TYPO3 Installation hast.
Das Quellcode wurde ja schon angesprochen. Aus meiner Sicht sind es nur ein Paar Zeilen in Deiner "config" und / oder "setup", die korrigiert, entfernt oder ergänzt werden müssen.

TYPO3 ist nicht einfach zu erlernen. Mit TYPO3 würde ich aber erst anfangen, wenn ich solide Kenntnisse zumindest in HTML und CSS habe. Und JavaScript zumindest verstehe.
Dank TypoScript (und Fluid !?) muss man nicht unbedingt PHP können, würde aber nicht schaden. Will man mehr eigene (oder Kunden-) Ideen umsetzen, sind gute Kenntnisse im PHP vom Vorteil.

Du weiß es aber am Besten, ob Dein aktueller Projekt Dir eine längere Lern- und Einarbeiten-Phase erlaubt oder nicht.

Mit TYPO3 lässt sich alles umsetzen. Unter Anderem können automatisch Bild-Kopien für jede gewünschte Browser-Auflösung erstellt werden. Und nach Wunsch eingebunden werden – Quellcode, Fluid Templating Engine. Und ExtBase gäbe es ja auch noch.
Und wenn man es kann, macht es auch mächtig Spaß :D

.


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:09 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023