Design-Problem für automatische Seitenanpassung
Posted: Wed 15. Jul 2009, 09:22
Für das nachfolgende Template (http://forum.phpwcms.org/viewtopic.php?f=28&t=18110) bzw. für ähnliche habe ich mir eine "neue" Variante des Hintergrunddesigns austüffteln müssen.
(Under-Contruction-Beispiel siehe hier!] Die Ursprungsseite sollte layoutmäßig moderneren Bildschirmen angepasst werden und außerdem durch eigene neue Bilder/ Texte uns Strukturen ergänzt werden.
Gefordert wurde ein Hintergrund, wo der erste Teil des Designs IMMER oben stehen bleibt und der zweite Teil immer unten, egal ob man das Vievport durch F11 verändert oder auf einem modeneren Bildschirm betrachtet. In der Standard-Vorlagen-Ausführung des phpWCMS geht das nicht ohne Probleme ab. Der Internetexplorer schießt häufig dagegen. Erster Versuch war das Anfügen von Fußleistenelementen "außerhalb" des Containers im Segment Footer. Der FF nahm das ohne Probleme hin. Der Internetexplorer IE6 und 7 aber nicht, es entstand ein Querscrollbalken. Nun hätte man das mit overflow-x bereinigen können, aber das ist zur Zeit noch nicht konform. Also mußte eine andere Lösung her! So sieht die Seite auf meinem Bildschirm 1440x900 aus.
Lösung: (kompatible für FF, IE, Safari und Opera)
(1) als erstes legt man im SEITENLAYOUTfest: (x)Eigener (aus Vorlage Haupt-Block)
(2) Dann schiebt man die ehemalige geteilte Vorlage im Hauptblock wie folgt zusammen:
Damit hat man jetzt eine funktionierende Vorlage komplett im Hauptblock. In der frontend.css muß man gar nichts ändern und da ist bereits für den body das obere Layoutteil fest verankert. Jetzt brauche ich noch ein eben solches am unteren Viewportrand.
Nach dem <!-- Ende contaianer --> fügt man nur noch in etwa folgenden HTML-Code ein, den man dann noch in die frontend.css integrieren könnte:
Damit hat man genau den fehlenden unteren Layoutteil, den man am unteren Viewport brauchte. Somit ist es möglich, einen variablen Hintergrund zu erzeugen, der in meinem oben erwähnten Template eingebundenwerden kann. Selbst bei Änderung des Viewport durch F11 ist passt sich das Layout automatisch diesem an. Man ist nicht mehr gezwungen, nur mit riesiegen Farbverläufen für den gesamten Bildschirmbereich in x-~ oder x-Richtung zu arbeiten, sondern kann auch mit richtigen Gestaltungselementen den body bestücken 
(Under-Contruction-Beispiel siehe hier!] Die Ursprungsseite sollte layoutmäßig moderneren Bildschirmen angepasst werden und außerdem durch eigene neue Bilder/ Texte uns Strukturen ergänzt werden.
Gefordert wurde ein Hintergrund, wo der erste Teil des Designs IMMER oben stehen bleibt und der zweite Teil immer unten, egal ob man das Vievport durch F11 verändert oder auf einem modeneren Bildschirm betrachtet. In der Standard-Vorlagen-Ausführung des phpWCMS geht das nicht ohne Probleme ab. Der Internetexplorer schießt häufig dagegen. Erster Versuch war das Anfügen von Fußleistenelementen "außerhalb" des Containers im Segment Footer. Der FF nahm das ohne Probleme hin. Der Internetexplorer IE6 und 7 aber nicht, es entstand ein Querscrollbalken. Nun hätte man das mit overflow-x bereinigen können, aber das ist zur Zeit noch nicht konform. Also mußte eine andere Lösung her! So sieht die Seite auf meinem Bildschirm 1440x900 aus.
- Anfügen von Fußleistensegmenten in der Vorlage FOOTER durch direkte Positionierung links und rechts bzw. durch Änderung der Vorlage/ Seitenlayout
Lösung: (kompatible für FF, IE, Safari und Opera)(1) als erstes legt man im SEITENLAYOUTfest: (x)Eigener (aus Vorlage Haupt-Block)
(2) Dann schiebt man die ehemalige geteilte Vorlage im Hauptblock wie folgt zusammen:
Code: Select all
<div id="container">
<!-- Kopfzeile -->
<div id="headerBlock">
.........
</div>
<!-- Naviblock -->
<div id="leftBlock">
...........
</div>
<!-- #mainBlock -->
<div id="mainBlock">
{CONTENT}
</div>
<!-- FussBlock -->
<div id="footerBlock">
...........
</div>
</div> <!-- Ende container -->
Nach dem <!-- Ende contaianer --> fügt man nur noch in etwa folgenden HTML-Code ein, den man dann noch in die frontend.css integrieren könnte:
Code: Select all
<!-- Bereich außerhalb des Containers im body -->
<div style="position: absolute; bottom:0; left: 0; width: 100%; ... z-index:-10; background-image:url('picture/FussLR.jpg');"><p align="center">{SPACER:980x1}</p>
</div>