PHI zentrieren
IM W2D Forum gibt es eine schöne Anleitung zum zentrieren von CSS-Design (PHI, RHO, Epsilon, ...). Bei PHI tritt allerdings das Problem auf, dass bei kleinen Bildschirmauflösungen einige Elemente verrutschen. Deshalb zeige ich hier anhand von PHI einen anderen Ansatz auf wie man Designs zentrieren kann, der auch auf andere Designs zu übertragen ist. Hierbei müssen allerdings jeweils individuelle Anpassungen gemacht werden.
Hier die Vorgehensweise für PHI:
-Zuerst habe ich in der Bildbearbeitung die Hintergrundgrafik pic_back.gif in der Breite von 1000 px auf 916px verkleinert. Die Grafik darf nicht einfach gestaucht werden, sondern die linken/rechten Ränder müssen beschnitten werden.
Dann habe ich einen Container geschaffen, der die ganze Homepage aufnimmt.
In der navigation.ccml habe ich direkt unter <body> folgenden Eintrag gemacht:
<div id="wrapper" class="clearfix">
Dieser Container wird erst ganz am Ende wieder geschlossen. Direkt oberhalb von </body> wird folgendes eingefügt:
</div> <!--ENDE wrapper-->
-Als nächstes wird der Container in der style_design.css definiert. Dazu muss die Hintergrundgrafik vom BODY Bereich in den WRAPPER Bereich verlegt werden. Der Code sieht so aus:
BODY {
margin: 0px;
padding: 0px;
background: #E4E3E3;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 916px;
min-height: 600px;
background: #E4E3E3 url(../images/<cc:print value="&pic.back.filename">) repeat-y;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
-Nun gibt es noch das Problem, dass die meisten Elemente der Homepage mit position:absolute fest definiert sind. Deshalb werden alle postion: absolute Einträge in position: relative geändert. Dann müssen noch alle top Einträge gelöscht werden, weil diese sonst ja nun relativ zum vorigen Element gelten.
Jetzt mussten nur noch kleine Modifikationen beim Suchfeld vorgenommen werden, damit es weiterhin neben dem Logo erscheint.
So, fast fertig. Damit allerdings der Content auch seine Position behält, wenn die linke Navigation sehr kurz ist habe ich in der navigation.ccml noch einen Container für den Content und die Sidebar geschaffen. Hier der Anfang:
<div id="rechts">
<div id="content">
und hier das Ende:
</cc:if>
</div> <!--ENDE rechts-->
</div> <!--ENDE wrapper-->
Footer hinzufügen
Der Vorteil gegenüber der bekannten Methode zum zentrieren der Designs ist, dass man nun ganz einfach einen Footer einfügen kann, der immer am Ende der Seite erscheint (und nicht wie sonst am Ende des Contents). Dazu habe ich zuerst eine Grafik pic_footer.gif erstellt und in der global.ccml angemeldet:
<cc:picture obj="pic.footer" dst="footer.gif" src="pic_footer.gif">
Dann in der navigation.ccml ganz unten oberhalb des </body> Eintrags den Footer definieren:
<div id="footer">
</div> <!--ENDE footer-->
Und noch in der style_design.css das Aussehen des Footers bestimmen:
#footer {
margin-left: auto;
margin-right: auto;
width: 916px;
height: 16px;
background: url (../images/<cc:print value="&pic.footer.filename">);
}
Wenn der Footer Daten enthalten soll können die in der navigation.ccml zwischen den beiden Footer Tags eingegeben werden. Die Grafik muss dann nur in der Höhe angepasst werden und der height Wert in der style_design.css auch an die neue Höhe angepasst werden.
Daten zum Download
Hier gibt es die geänderten Dateien zum Downlad. Kopieren Sie einfach alle Daten des Ordners in Ihren Designs/Phi Ordner. Bitte sichern Sie vorher Ihre Originale. Das Verwenden dieser Dateien geschieht auf eigenes Risiko.
 |
phicenter.zip | [4.903 Bytes] |
Hier können Sie eine druckoptimierte Version dieser Seite ausdrucken.
Um eine Druckvorschau zu sehen, benutzen Sie bitte die Druckvorschau Ihres Browsers.
