Komplette Seite vertikal zentrieren / Lücke zwischen Header und Container / etc...

[simonsensz]

Hallo, ich bin neu hier und brauch dringent eure Hilfe bei ein paar kleinen Problemen im Layout.
es geht um die Seite www.kieler-nachtschicht.de

1. Wie kann ich die komplette Seite vertikal zentrieren, dass der Header nicht mehr am oberen Rand klebt. (Wichtig für Ansicht auf großen Monitoren)

2. Ich benutze eine Lytebox um Videos im "Popup" dazustellen. Um die Größe der Box zu definieren gibt es eine Erweiterung im HTML code, die Contao automatisch rauslöscht. (Im folgenden Beispiel unterstrichen)
<a href="http://www.youtube.com/embed/ajNC3W-Dlqk" rel="lyteframe" data-lyte-options="width:560 height:349">YouTube</a>
Wie kann ich "data-lyte-options" in contao erlauben?

3. Zwischen Header und Container befindet sich eine mir unerklärliche Lücke von ca. 4px. Ich habe Sie dadurch vertuscht, dass ich via css den header nach unten verschoben habe. Für Firefox, Opera und IE hat das wunderbar geklappt, nur Google Chrome zeigt diese Lücke immernoch an.
Wie kommt die Lücke zustande, und wie kann ich sie beheben?

4. Die Seite ist ziehmlich langsam. Leider habe ich den Webspace bei Strato gemietet, bevor ich mich hier informiert habe
Und ja, ich habe auch viele Grafiken auf der Seite. Habt ihr vllt dennoch ein paar Ideen wie man ein bisschen bessere Performence herzaubern kann?

5. Wenn euch noch was auffällt, sagt mir doch gerne bescheid.

Ich danke euch für eure Hilfe!
LG Simon

[inyono]

zu 1: vielleicht hilft Dir der Link weiter: http://www.manuel-bieh.de/blog/verti...seiten-mit-css

zu 2: ich behaupte mal, dass Contao das rauslöscht, weil ein data-lyte-options Attribut eigentlich nichts in einem Link verloren hat ^^ Wenn die Videos immer die selbe Größe haben, würde ich stattdessen lieber die Standardwerte in der plugins/lytebox_v4.0/lytebox.js abändern oder das iwie über CSS regeln. Ein data-lyte-options Attribut ist nämlich nicht gerade standardkonform.

zu 3: die Deaktivierung von "display: inline-block" führt dazu, dass der Abstand weg ist. Auch im Firefox wurde bei mir ein 1px Abstand angezeigt, der fällt dadurch auch weg. Der Sinn von einem inline-block-Element an dieser Steller erschließt sich mir eh nicht, ein block-Element sollte doch eigentlich genügen?

zu 4: Hab nur mal kurz per Firebug den Page Speed durchlaufen lassen. Ich werfe mal paar Stichwörter in den raum wie "Bilder in CSS-Sprites kombinieren", "Komprimierung aktivieren", "Browsercache nutzen". Keine Ahnung, ob das wirklich viel hilft, wäre aber zumindest ein Anfang.

zu 5: bei deaktiviertem Javascript zerschießt es das Layout bei den Videos aufgrund des fehlenden akkordeons.

[lucina]

2.) Vermutlich sind solche Parameter besser im jeweiligen Template für Deine Bilder aufgehoben. Ggf. baust Du Deine Extension auch so dass Du die Parameter dort anpassen kannst.

4.) Strato-Datenbanken sind langsam. Ggf. kannst du denen mal auf die Füße treten oder aber über einen vernünftigen Provider nachdenken. Darüber hinaus gibt Dir das YUI-Firebug-Plugin sicher genauso Hinweise wie das Google Pagespeed-Plugin.

Carolina.