Responsives Webdesign lässt Navigationsbox hin und her springen

[hkunslg38]

Responsives Webdesign lässt Navigationsbox hin und her springen
Die linke Navigation- u. Nachrichtenbox springt nach dem Anklicken hin- und her. Mal am linken Rand der Webseite (wo sie auch bleiben soll), aber ein Klick auf einen Link läßt sie nach rechts neben der Webseite springen. Dort läßt sich der Klick-Befehl auch erst realisieren und einen inhalt. Seitenwechsel vollziehen.
Manchmal reicht es auch, mit der Maus an der linken Seite oder oben im Main-Menü einen Link zu berühren und die Box springt nach rechts.
Gegenversuch mit einer Testseite (Fruitcompany v.d. Contao-Seite, unter Seitenstruktur 3 Testseiten), dort das gleiche, obwohl ich da keine sonstigen Veränderungen vorgenommen habe (weder Contao 3 noch Theme Fruitcompany). Die optischen Beispiele habe ich in der Anlage beigefügt.
Host: localhost
Contao 3.1.1
Windows7, IE10
CSS: Basic_K002.css, Form_K002.css, Navigation_K002.css, Screen_K002.css (in beiden Fällen, auf meiner Seite nur Farben u. Abstände angepaßt)
Module: Main_Navigation, Sub_Navigation (aus Fruit-Company2)
Layoutbuilder, Statisches Layout, 960 breit zentriert

Wie kann ich dem Hin- und Herspringen der Left-Navigation ein Ende bereiten?

Helmut

[wulf]

deaktiviere einfach den kompatibilitätsmodus in ie10, dann sollte es klappen (oder benutze gleich einen "vernünftigen" browser)

[ciaobello]

Das Theme welches Du einsetzt ist vor der Responsive Website Ära entstanden. Ich denke es ist nicht optimal mit so einem Theme zu Arbeiten und dann noch die ganze Responsive "Holy Grail" Technik verstehen zu wollen.
Wenn Du Dich da auch noch einarbeiten willst, verwende ein Theme welches schon für Contao 3 erstellt wurde. Eine Möglichkeit wäre auf auch COD zu warten oder eben ein Freies Theme zu nehmen welches schon mit Contao3 und responsive Funktion erstellt wurde.

[hkunslg38]

Hurrah! Endlich! Es funktioniert ! Es war der IE10 der mich soooo (lange) gelinkt hat, sorry für contao (hier lag ich falsch).
Auf den IE10 hätte ich jetzt nicht getippt, aber wie kann der so linken, daß die Navibox immer von links nach rechts springt. Wer die (unvollständigen) Infos über das responsive Webdesign liest, die verschiedenen Positionierungsmöglichkeiten sieht, kann sich nur denken, dass das damit zu tun hat. Und ich habe Tage mit der Suche nach dem Fehler verbracht.
Also vielen herzlichen Dank für diese Info.
Andererseits der Rat verschiedener Leute einen anderen Browser als IE zu nutzen, kann ich immer noch nicht so ganz teilen - ausser zum Vergleichstest (bzw. umgekehrt). Denn der IE wird doch immer noch von den meisten Leuten genutzt und sollte die Seiten richtig darstellen, deshalb muß er auf jeden Fall zum Test eingesetzt werden. Wie aber verhalten sich andere Browser bzgl. des Kompatiblitätsmodus?

Herzliche Grüsse
Helmut

[hkunslg38]

Hallo Ciabello,

ich habe meine seitherige Webseite von 2.11.11 in ein Contao 3.1.1 konvertiert und dann ein freies 3.x Theme ueber meine Seite drueber gestuelpt und meine Seite entsprechend angepasst. Nun habe ich aus diesem 3.x Theme auch die Navigationsmenues uebernommen und auch angepasst - funktioniert nun alles bestens !! - Das einzige Problem war das hin- und herspringen der linken Navibox - aber das lag nun am IE10 - im speziellen stand drin, Kompatiblitaet auf Localhost (mein Test betrifft auch hier nur den Localhost ! ) anpassen (weiss nicht, wann das passiert ist, online-Seiten waren wohl nicht beruehrt (so die Einstellungen im IE).
Also nun ist alles wieder paletti - so habe ich demnaechst vielleicht auch wieder etwas Zeit fuer den Contao2go.
Danke auch fuer Deine Antwort.

Viele Gruesse
Helmut

[Marion]

Ich möchte das Thema nochmals aufs Tapet bringen.

Ich habe dasselbe Problem, dass IE 10 das Navigationsmenü springen lässt. Das ist unbefriedigend, denn alle privaten IE-Nutzer mit automatischem Update sind jetzt auf dieser Version, also eine ganze Menge. Ausserdem besteht das Problem nicht nur im IE, sondern auch im Safari und im Google Chrome. Weiss jemand welche Tags im CSS die kritischen sind, die das verursachen?

[wulf]

@marion: Theme oder Eigenbau ? Evtl. ein Link zum nachprüfen

[Marion]

@marion: Theme oder Eigenbau ? Evtl. ein Link zum nachprüfen

Mix: Eigenbau auf Basis Music Academy.

Link: http://server16.hostpoint.ch/~labyri...atz.ch/contao/

[pmmueller]

Das CSS-Framework von Contao 3 basiert auf dem HolyGrail-Prinzip. Im Klartext: Du darfst #container, #main, #left und #right horizontal kein padding, border oder margin geben. Dann passt das nicht mehr.

Mehr dazu in meinem Blog: http://pmueller.de/blog/tag/Contao.html

Dort findest du von der Contao-Konferenz zwei Slideshows und vom Contao-Nordtag ein PDf zum Download.

[Marion]

OK, dann bau ich das mal so um - der Link ist ab sofort "under construction".

[Marion]

Danke pmmueller!

Deine Links waren wirklich sehr hilfreich, ich hab jetzt begriffen wie ich das Layout grundsätzlich aufbauen muss, vorher hab ich mich nach der Methode Trial & Error vorgetastet. Es hat auch einen Fortschritt gebracht punkto springender Navigation: Die Navigation springt jetzt auch im Firefox.

So hab ich jetzt jedenfalls ein browserunabhängiges Problem in meinem Layout, also suche ich da jetzt erst mal weiter. Ich schreib dann wieder, wenn ich das Problem eingekreist habe bzw. wenn ich beim Suchen völlig verzweifelt bin.

[pmmueller]

Nach ein paar Klicks sehe ich keinen "Sprung". Nur seitwärts, wenn eine kurze Seite ohne Rollbalken von einer längeren Seite mit Rollbalken gefolgt wird (oder andersrum). Abhilfe schafft im CSS

html { overflow-y: scroll; }

Dann wird auch auf kurzen Seiten ein (inaktiver) Scrollbalken angezeigt.

[ciaobello]

Es hat auch einen Fortschritt gebracht punkto springender Navigation: Die Navigation springt jetzt auch im Firefox.

Ich sehe einfach ein hin und her zucken bei deiner Seite, aber dass kommt davon, weil auf der Startseite nicht viel Content vorhanden ist und dann auch keine Scrollbar angezeigt wird. Beim Wechsel blendet es die Scrollbar ein und die Seite verschiebt sich leicht.

Lösung: p.mueller war schneller

[Marion]

Ihr zwei seid suuuuper! Eine kleine, feine, einfache Lösung, aber selber wär ich nie drauf gekommen!

[pmmueller]

Ihr zwei seid suuuuper!

Coproduktion aus NL und BRA. Contao international

Eine kleine, feine, einfache Lösung, aber selber wär ich nie drauf gekommen!

»Websites erstellen mit Contao 3«, Seite 174. Vielleicht lohnt sich ja das doch für dich...

[Marion]

»Websites erstellen mit Contao 3«, Seite 174. Vielleicht lohnt sich ja das doch für dich...

Überzeugt - es ist bestellt!

[pmmueller]

Ich denke, du wirst es nicht bereuen.

Be sure to check out die Buch-Website, insbesondere http://bit.ly/contao3-errata, wenn du das Buch hast. Und viel Spaß damit.

[Marion]

Noch ein Nachtrag: Wenn ich den Holy Grail implementiere, wird die Seite auf dem iPhone zerschossen. Wenn ich nur ein Design für alle Medien möchte, fahre ich besser mit fixen Breitenangaben. Das ist nicht so schön, aber zumindest wird auf jedem Medium alles angezeigt. Da ich meine Websites als "mit mobilen Geräten lesbar, aber nicht speziell darauf angepasst" bezeichne, möchte ich schon wegen dem Aufwand kein spezielles Mobil-Design haben. Die höhere Kunst, das zu erreichen, wäre das Grid, wenn ich das richtig verstanden habe. Damit warte ich aber noch zu, bis ich das schlaue Buch bekomme.

[pmmueller]

Was heißt "auf dem iPhone" zerschossen?

Sofern du nichts geänderst hast, sollten #main, #left und #right bei einem Viewport > 768px hübsch fein untereinander stehen. Tun sie das? Meinst du das mit zerschossen? Das ist Absicht.

Das Grid hat damit übrigens rein gar nichts zu tun, aber das ist ein ziemlich weit verbreitetes Gerücht

[Marion]

Mit zerschossen meine ich, dass sich der Hauptbereich über die Linke Navigation legt. Mit fixen Breiten kommen die Bereiche untereinander zu liegen und das Menü ist bedienbar.

OK, dann brauch ich das mit dem Grid ja nicht zu lernen...