zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Springen des Headers vermeiden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.09.2016, 13:17
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2007
Beiträge: 128
runner befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.09.2016, 13:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.065
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.09.2016, 19:16
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2007
Beiträge: 128
runner befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 25.09.2016, 09:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.065
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 25.09.2016, 10:08
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.906
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
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.
Mit Zitat antworten
  #6 (permalink)  
Alt 25.09.2016, 10:29
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
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

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #7 (permalink)  
Alt 25.09.2016, 19:01
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2007
Beiträge: 128
runner befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #8 (permalink)  
Alt 26.09.2016, 06:10
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von runner Beitrag anzeigen
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ß

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Automatisch zum Ende des Scrollfensters springen Dexter1997 Javascript & Ajax 5 20.09.2016 15:46
Width an width des Kinder-Elements ausrichten pouncerwashere CSS 0 07.12.2008 20:08
Verschiebung des HG-img durch innenliegendes float mariane CSS 3 23.09.2008 10:31
Ratschläge bei Publizierung eines fertigen Layouts gesucht Black Fladder CSS 55 05.09.2004 14:30
Overflow - Darstellung des Scrollbalkens im IE falsch?? stollev CSS 6 05.07.2004 15:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:44 Uhr.