Total Proportional
Der Firefox schneidet in Bezug auf die Gestaltung der Seite proportional über Prozente am besten ab. Leider lassen sich damit nur ungefähre Abmessungen erzielen und die Bezüge verlieren sich in allen Browsern auch mit Ausnahme des FF schon wieder beim inneren DIV. Noch sind Browser primär auf feste Breiten ausgerichtet und das obwohl die Situation am Markt in Bezug auf Monitore und Grafikkarten bekannt ist. Tssss. Zugegeben es gibt die Grafik-Designer aus der Zunft des Prints und es gibt die Web-'Designer' aus der Zunft der Satenbankprogrammierung, Die einen nur Sinn für die feste Bezugsgröße und der andre nur Sinn für die dynamische Erzeugung von Daten, wo soll da Zugzwang entstehen.
Derweil behilft man sich und baut nicht auf Design-Konstrukten wie dem Folgenden, bei dem fast alle Werte in Prozent angegeben sind und es relative, absolute und fixe Bezüge der Elemente untereinnander gibt.
Das Ergebnis sieht im Screenshot noch besser aus, als es letztlich ist.
Screenshots der Seite
Die Screenshots wurden mit Hilfe des Dienstes Browsershots.org gemacht.
- safari 3.0.3
windows 2000
- opera 9.50
ubuntu 7.10
- konqueror 3.5
ubuntu 6.06
- opera 9.24
windows 2000
- firefox 1.5.0.13
ubuntu 6.06
- firefox 2.0.0.11
ubuntu 7.10
- firefox 2.0.0.9
windows 2000
- granparadiso 3.0
ubuntu 7.10
- galeon 2.0.2
ubuntu 7.10
- epiphany 2.20
ubuntu 7.10
- safari 3.0.4
mac os
- safari 2.0.4
mac os
- kazehakase 0.5.0
pld 3.0
- msie 6.0
windows 2000
- dillo 0.8.6
pld 2.0
- msie 5.5
windows 2000
- bonecho 2.0.0.11
pld 3.0
- firefox 2.0.0.8
mac os
- firefox 1.5
windows 2000
- msie 7.0
windows xp
- iceweasel 2.0.0.10
debian 4.0
- navigator 4.8
debian 4.0
- seamonkey 1.1.7
pld 3.0
- seamonkey 2.0a1pre
pld 3.0
- mozilla 1.7.13
pld 3.0
- phoenix 0.5
pld 2.0
- flock 1.0.4
pld 3.0
- mozilla 1.5
pld 2.0
- flock 0.9.1.5
pld 3.0
- firebird 0.7
pld 2.0
- minefield 3.0b3pre
pld 3.0
Quelltext der Seite:
<?xml version="1.1" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Total Proportional</title><meta name="description" content="Ein Minitest" /><link rel="stylesheet" href="style.css"type="text/css" media="all" title="Default styles" /><style type="text/css">html, body, img, div {padding: 0; margin: 0; border: 0;}html {height: 100.05%; width: 100%;}body {height: 100%; width: 100%;}#header {width: 60%; position: relative; left: 20%; top: 2%; min-height: 20%;}#hinner {position: absolute; bottom: 0;}#content {width: 60%; position: relative; left: 20%; top: 3%; min-height: 47%;}#cinner {width: 90%; min-height: 87%; position: absolute; top: 5%; left: 4%;}#footer {width: 60%; height: 24%; position: fixed; bottom: 2%; left: 20%;}#finner {width: 100%; height: 12px;}#dekor1 {width: 24%; height: 3px; position: fixed; top: 30%; right: 0;}#dekor2 {width: 24%; height: 3px; position: fixed; top: 30%; left: 0;}#dekor3 {width: 24%; height: 3px; position: fixed; top: 65%; right: 0;}#dekor4 {width: 24%; height: 3px; position: fixed; top: 65%; left: 0;}</style><!--[if lt IE 7]><style type="text/css">html {height: 100%; overflow: hidden;}body {height: 100%; overflow: hidden;}#wrapper {height: 100%; width: 100%;position: absolute; top: 0; left: 0; overflow: auto; overflow-y: scroll;}#header {height: 20%; margin-bottom: 1.5%;}#content {height: 60%; top: 1.5%;}#cinner [height: 80%;}#footer {position: absolute; margin-left: -3px; width: 59.45%;}#dekor1 {position: absolute; right: 16px; overflow: hidden;}#dekor2 {position: absolute; left: 0; overflow: hidden;}#dekor3 {position: absolute; right: 16px; overflow: hidden;}#dekor4 {position: absolute; left: 0; overflow: hidden;}</style><![endif]--></head><body><!--[if lt IE 7]><div id="wrapper"><![endif]--><div id="header"><div id="hinner"><h1>Ist nicht.</h1></div></div><div id="content"><div id="cinner"><p class="poem">grob ist nicht fein, fein ist nicht grob;<br />dick ist nicht d�nn, d�nn ist nicht dick;<br />kalt ist nicht warm, warm ist nicht kalt;<br />lang ist nicht kurz, kurz ist nicht lang;<br />weise ist nicht dumm, dumm ist nicht weise.</p></div></div><!--[if lt IE 7]></div><![endif]--><div id="footer"><div id="finner"></div><p class="c">Zur�ck zu <br /><a href="../../index.php?p=totalproportional">totalproportional</a><br />· o ·</p></div><div id="dekor1"></div><div id="dekor2"></div><div id="dekor3"></div><div id="dekor4"></div></body></html>
