18.11.2006
Ein neues Template
Jedes Template beginnt mit einer Idee. Das aktuelle Template, das ich in vor ca. 2 Stunden begann, startete mit einer Papier-Ecke, die mir ins Auge sprang. Ich spielte mit den Möglichkeiten in Photoshop und im Spiel entwickelte sich die Idee weiter. Der Entwurf hat viel mit einer Seite zu tun, die mir ein Interessent kürzlich als Vorbild für seine Vorstellungen vorstellte. Aurelius Invest verwendet ein Blatt als Basis des Designs. Ich kann und will nicht Aurelius kopieren und denke, dass ich mit dem Entwurf weit genug entfernt bin.
Nachdem nun die Idee steht und die Grafiken exportiert wurden, gilt es sich Gedanken um die technische Umsetzung zu machen. Um nicht das Rad neu zu erfinden und wenn ich lange keine vergleichbare Lösung, bzw. das letzte Mal mit einer veralteten Technik das Layout umgesetzt habe, schaue ich zunächst einmal im Netz nach, was sich mir an Lösungsmöglichkeiten bieten.
Für die verticale Ausrichtung eines Streifens findet man folgende hilfreiche Seite: Vertical centering using CSS
Eine Lösung ist auf dieser Seite nicht wirklich vorhanden. Keine der Lösung ist Foolproofed. Eine Idee, die mir kam ist nicht aufgeführt. Noch habe ich von dem Photoshop-Entwurf noch keine Zeile umgesetzt. Meine Idee die mir vorschwebt arbeitet ähnlich wie die Methode der horizontalen Ausrichtung mit negativer Margin. Es wird ein Wrapper mit 100% benötigt und ein Div, der eine Höhe von 50% hat und über eine negative margin-bottom bis zur Hälfte der Höhe des nachfolgenden Divs mit fester Höhe den Platz freigibt für eben jenes nachfolgende DIV.
Da ich in dem Design nicht wirklich die Mitte anstrebe, werde ich mit anderne Prozentwerten arbeiten. Die Methode sollte mit den meisten Browsern arbeiten. Ich werde berichten (Update folgt in Kürze). Jetzt geht es erst einmal weiter … ja. Funktioniert wunderbar
HTML:
<body><div id="wrapper"><div id="header">[HEADER-TEXT]</div><div id="content">[MAIN CONTENT]</div><div id="footer">[MAIN CONTENT]</div><div id="content">[FOOTER-TEXT]</div></div></body>
CSS:
html, body, img, div {padding: 0; margin: 0; border: 0;}html {height: 100.05%; overflow: hidden;}body {height: 100%; overflow: hidden;}#wrapper {width: 100%; height: 100%; overflow: auto; margin: 0; padding: 0;}#header{width: 100%; height: 50%; margin-bottom: -180px;}#content{width: 100%; height: 360px; overflow: auto;}#footer {width: 100%;}
Und wäre da nun nicht der Opera 9, dann könnte man overflow-y: scroll; ohen Hacks verwenden … snüff, denn der Firefox 2.0 beherrscht diese sinnvolle Anweisung bereits.
Nachtrag (nach einer Mütze voll Schlaf und 4-5 Arbeitsstunden seit dem letzten Update des Beitrages): Verwendet man feste Werte wie in dem Skriptbeispiel so hat man es einfacher mit Bildern, denn Bilder haben feste Pixelbreiten, es sei denn man bindet Bilder via Flash ein und macht diese damit skalierfähig. Das Problem mit festen breiten ist, dass man diese so klein halten muss, dass das Layout auch bei 800×600 Auflösung nicht bricht oder man akzeptiert, das Besucher dieser Breite häßliche Scrollbalken, überlagernde Schriften etc. sehen. Ich habe mich nun für Prozentwerte entschieden. es war ein wenig fummeln und in wenigen Ausnahmefällen werden Besucher bei dem Design immer noch Skrollbalken sehen. das Gros von über 98% mindestend wenn nicht 99,99% aber wird stehts ein ausgewogenes Verhältnis sehen. Damit das Template perfekt wird, sollte ich nun nur noch Editland ein Flashplugin gönnen, so dass die Bilder wirklich skalieren. Mal schaun.
Filed under: Design, Webtechniken
No Comments