DIV, Footer, Header Problematik

[BOBO]

@maass:
Ich hoffe, ich habe das richtig verstanden ...

Mit "position: absolut" kann der Footer (und Header) jederzeit aus den Konstrukt Wrapper herausgelöst werden und kann dann - wie ich verstanden habe - auch als superbreiter Footer/ Header eingesetzt werden, (sollte aber standardmäßig erst einmal da innerhalb des Wrappers liegen!)
Das macht aber nur Sinn, wenn dieser am odersten/ untersten Viewport liegt. Problem ist dann nur der Main~ und Naviblock mit variabler Höhe incl. overflow: auto und den body mit overflow:hidden. Das bekommt man aber in Griff und wenn man noch mit einem "Hack" arbeitet :

Code: Alles auswählen

height: expression((document.body.clientHeight-"HöheMainr") + "px"

geht die ganze Sache auch mit dem IE super über die Bühne.
Dann kann man mit position: absolut den Header und Footer fest an der Viewportrand kleben, den Mainblock variable in der Höhe halten. Dabei sind natürlich die Anzahl der Kategorien links begrenzt, weil sonst Scrollbalken entstehen würden. Also links alles bis auf die kategorien leerräumen und mit einer ordentlichen Struktur alles aufschlüsseln. Dann erhält nur noch der Main-Bereich einen (gewollten) Scrollbalken. Die Website steht wie eine Eins, oben ist immer ein Header zu sehen, unten immer ein Footer.

Beipsiel siehe hier, eine noch in der Entwicklung stehende Website, einfach mal F11 drücken und die Reaktion beobachten.

[mmaass]

Mal davon abgesehen, dass Hacks sehr schnell mit neuen Versionen nicht mehr gehen könnten und generell nie saubere Lösungen sind, ging es ja in erster Linie nicht um das Problem, dass man es machen kann. Dein Ansatz ist natürlich auch eine Lösung.

Der Unterschied ist, in beiden Fällen, ob ich nun den Footer zentrieren will oder komplett ausdehnen, beides ist in sehr wenigen Handgriffen gemacht, in der CSS Struktur, wie sie jetzt ist und der Footer wächst wie im Web kaum anders zu sehen ist mit.

Hingegen nach Deiner Struktur ist es nicht möglich, ohne dass der Footer fest steht und ohne, dass man einen grösseren Aufwand hat.

Daher ist in unserer Struktur schon eine sehr hohe Flexibilität gegeben.

[mmaass]

Hallo Bobo,

kann ich davon ausgehen, dass da Du ja schon wieder fleissig gepostet hast aber nicht mehr hier drauf eingegangen bist, dass die Lösung doch nicht so unglücklich ist?

[BOBO]

Gegenüber der Version 1.4 gibt es in der gefixten auch im Bereich index.tpl ein paar Änderungen, die ich mir heute angeschaut habe. Ich sitze daran und habe bereits überflüssige CSS-Zeilen entfernt, den CMS-Footer und eShop-Footer angeglichen. Der Footer liegt in der V. 1.4a jetzt im #wrapper, demnach entfallen einige Angaben ... ich habe im Augenblick 4 Aufträge zu betreuen und wenig Zeit, außer in der S-Bahn hin und zurück, da kann man einigen erledigen

[mmaass]

Bobo, was ich eigentlich erwartet habe, sind Fakten und nicht schon wieder weitere Mutmassungen über überflüssiges.

[BOBO]

Fakten ... oder besser Ergebnisse kommen dann, wenn ich damit fertig bin. Auch ich habe nur zwei Hände und teile meine Zeit nach Verdienst und Gewinn ein, das hier ist erst einmal eine interessante "Nebenbei"arbeit, die step by step gemacht wird, so lange wie nicht ein dringender Auftrag dranhängt. Ich melde mich dann schon.

[mmaass]

Wenn Du nicht fertig bist, dann werfe bitte nicht einfach was in den Raum! Ich habe mir auch die Zeit genommen, um meine Argumente und Darstellungen zu bringen.

[BOBO]

Wenn Du nicht fertig bist, dann werfe bitte nicht einfach was in den Raum! Ich habe mir auch die Zeit genommen, um meine Argumente und Darstellungen zu bringen.

Ich habe nichts in den Raum geworfen! Meine Zeit ist kostbar wie bei jedem hier und ich habe Prioritäten. Ich verdiene mein Geld nicht mit Threads in einem Forum.Ich habe nur zwei Hände - drängeln macht die Sache nur langwieriger!

Der Test-eShop mit der Problemlösung - fixer Header oben, fixer Footer unten, variabler Maincontent mit automatischer Anpasung an den Viewport - ist fertig und funktioniert unter IE6 , IE7, FF2/3, Opera 9.6x, Safari. Minimale Viewportgröße: 1024x768

Die Problematik ist, der eShop mußte angepaßt werden - die index.tpl wurde umfrisiert, so daß links nur noch Kategorien und Angebote stehen. (letztere kann mann auch noch anders unterbringen). Am besten sieht man die Reaktion, wenn man auf AGBs klickt, die länger sind als der normale Viewport.
Vorteil: Header und Footer sind immer zu sehen, man weiß wo man ist und mit wem man es zu tun hat.

Die CSS-Dateine wurden umfangreich bearbeitet( aber noch nicht optimiert ! ). Die kann man sich aber mit Sachkenntnis (Firebug) anschauen und garantiert lassen sich noch weitere Zeilen auskommetieren! --> siehe unten!
CMS-Menüpukt blieb noch unberücksichtigt!
Noch nicht ganz 100% berechnet ist der Platz zwischen Content und Scrollbalken, ist aber piddelpaddel

[EDIT]

ist nun auch geklärt: wieder eine Zeile zuviel in div.artikelBox: einfach auskommetieren und schon ist der Querscrollbalken auch verschwunden - /*width: 100%;*/

[EDIT]

Hier ist der Testshop zu sehen!

@mmaass:

Mal davon abgesehen, dass Hacks sehr schnell mit neuen Versionen nicht mehr gehen könnten und generell nie saubere Lösungen sind, ...

Dieser Hack ist nichts weiter ein ein JavaScript, ohne das dieses Projekt gar nicht 100% funktioniert. Ergo ... dieser "Hack" funktioniert immer und solange es den IE noch gibt, wird diese Einstellung u.U. notwendig, um sicher zu gehen, dass die CSS-Anweisungen genauso funktionieren wie in ALLEN anderen relevanten Browsern!

[KerstinK]

Sorry Bobo,

aber von Verbesserung kann da gar keine Rede sein.

Es sieht halt so aus wie es ist: ein zusammengebastelter Shop von einem Laien. Scrollbalken von oben nach unten bei langen Texten und sogar noch von rechts nach links sind bei Web2.0 Design völlig daneben.

Das Design lebt von den offenen Seiten etc. Abgesehen davon hast du die Intention des Footers wie randshop es gemacht hat immer noch nicht verstanden. Es geht auch darum, das man z.B. wie in der Kopfzeile den Balken von linken Bildschirmrand nach rechts fortführen kann, ohne großen Aufwand.

Ich für mein Teil bin der Meinung, dass du besser bei DEINEM BERUFSZWEIG bleiben solltest, den du bestimmt bis ins letzte beherrscht, aber laß die Programmierung andere machen und verwirr hier die Leute nicht mit angelesenen oder rauskopierten Statements.

Wer meine Beiträge hier verfolgt, weiß, dass ich gerne helfe etc und vieles auch beantwortet - aber deine Basteleien und Skripte etc nerven durch Ihre Laienhaftigkeit! Mach es für deinen Shop (der ein neues Layout auch mal dringend notwendig hätte) und lass die anderen randshop-Nutzer damit in Ruhe, die suchen nämlich nach ganz anderen Lösungen. Und wenn du dir mal verschiedene Shops von den anderen ansiehst, sind dort ein paar ganz tolle SHops bei!

Auch bis du nicht der einzige, der viele Artikel in seinem SHop führt.

Du kannst jetzt gerne noch auf dieses Posting antworten, erwarte aber keine weitere Antwort von mir.

genervte Grüße
Kerstin

[BOBO]

@Kerstin:

Tue ich mir auch nicht an, jedem sein Himmelreich.
Die Reaktion von Usern auf meine letzte überarbeitete CSS-Datei für V 1.3.2 reicht mir als Bestätigung. Deine Meinung sei Dir gegönnt, ich habe meine Meinung - und behalte Sie für mich oder gehe über PN- was es hier nicht gibt. Ich habe zwar keine Ahnung was der Lösungsansatz mit vielen Artikeln zu tun hat ... ist auch erst einmal unwichtig.
Frage: Was hat CSS etwas mit Programmierung zu tun?

Für alle Interessierten, denen ein ruhig stehende eShop-Website bei mindestens 1024x768 pixel lieber ist, als eine ewig zu scrollende Seite kann sich von dem TESTSHOP die CSS-Dateinen und die index.tpl runterladen.
Zugegeben, es ist eine "Religionsfrage" und man muß ein gute Ballance zwischen Artikelmenge und Kategorieanzahl finden. Aber diese Freiheit hat jeder, der diesen eShop einsetzt.
Anbei noch eine Animation für unsichere User, die vielleicht nicht verstanden haben worum es geht:
- Der Randscrollbalken ist weg und befindet sich jetzt im Contentbereich rechts - die Animation wechselt zu Beginn von 1450x835 auf 1024er Viewport!
Wiederholung der Animation STRG+F5

[mmaass]

1. Leider muss ich feststellen, dass immer wieder ausgewichen und das Thema gewechselt wird.
Immernoch gibt es keine Argumentation, warum unsere Variante unglücklich sein sollte.

2. Deine aktuelle Lösung ist ein Ansatz aber entspricht nicht der Web 2.0 Philosophie. Dazu gibt es enorm viel Infos im Netz. Hast du Dir die Seite auch mal mit einer kleinen Auflösung angeschaut oder sogar mit einem IPhone oder ähnlichem? Letzteres zeigt nur den Header und Footer an und nicht den Content. Sprich, niemand könnte einkaufen. Auf diese Klientel zu verzichten, wäre nicht zu empfehlen.

Da wir generell scheinbar nicht zum Ausgangspunkt sachlich eine Antwort bekommen können, wird der Thread hier geschlossen.