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.

Screenshot
Das Ergebnis sieht im Screenshot noch besser aus, als es letztlich ist.

Bumblebee

Screenshots der Seite

Die Screenshots wurden mit Hilfe des Dienstes Browsershots.org gemacht.

Screenshot mit safari 3.0.3
safari 3.0.3
windows 2000
Screenshot mit opera 9.50
opera 9.50
ubuntu 7.10
Screenshot mit konqueror 3.5
konqueror 3.5
ubuntu 6.06
Screenshot mit opera 9.24
opera 9.24
windows 2000
Screenshot mit firefox 1.5.0.13
firefox 1.5.0.13
ubuntu 6.06
Screenshot mit firefox 2.0.0.11
firefox 2.0.0.11
ubuntu 7.10
Screenshot mit firefox 2.0.0.9
firefox 2.0.0.9
windows 2000
Screenshot mit granparadiso 3.0
granparadiso 3.0
ubuntu 7.10
Screenshot mit galeon 2.0.2
galeon 2.0.2
ubuntu 7.10
Screenshot mit epiphany 2.20
epiphany 2.20
ubuntu 7.10
Screenshot mit safari 3.0.4
safari 3.0.4
mac os
Screenshot mit safari 2.0.4
safari 2.0.4
mac os
Screenshot mit kazehakase 0.5.0
kazehakase 0.5.0
pld 3.0
Screenshot mit msie 6.0
msie 6.0
windows 2000
Screenshot mit dillo 0.8.6
dillo 0.8.6
pld 2.0
Screenshot mit msie 5.5
msie 5.5
windows 2000
Screenshot mit bonecho 2.0.0.11
bonecho 2.0.0.11
pld 3.0
Screenshot mit firefox 2.0.0.8
firefox 2.0.0.8
mac os
Screenshot mit firefox 1.5
firefox 1.5
windows 2000
Screenshot mit msie 7.0
msie 7.0
windows xp
Screenshot mit iceweasel 2.0.0.10
iceweasel 2.0.0.10
debian 4.0
Screenshot mit navigator 4.8
navigator 4.8
debian 4.0
Screenshot mit seamonkey 1.1.7
seamonkey 1.1.7
pld 3.0
Screenshot mit seamonkey 2.0a1pre
seamonkey 2.0a1pre
pld 3.0
Screenshot mit mozilla 1.7.13
mozilla 1.7.13
pld 3.0
Screenshot mit phoenix 0.5
phoenix 0.5
pld 2.0
Screenshot mit flock 1.0.4
flock 1.0.4
pld 3.0
Screenshot mit mozilla 1.5
mozilla 1.5
pld 2.0
Screenshot mit flock 0.9.1.5
flock 0.9.1.5
pld 3.0
Screenshot mit firebird 0.7
firebird 0.7
pld 2.0
Screenshot mit minefield 3.0b3pre
minefield 3.0b3pre
pld 3.0

Quelltext der Seite:

  1. <?xml version="1.1" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5. <head>
  6. <title>Total Proportional</title>
  7. <meta name="description" content="Ein Minitest" />
  8. <link rel="stylesheet" href="style.css"
  9. type="text/css" media="all" title="Default styles" />
  10. <style type="text/css">
  11. html, body, img, div {padding: 0; margin: 0; border: 0;}
  12. html {height: 100.05%; width: 100%;}
  13. body {height: 100%; width: 100%;}
  14. #header {width: 60%; position: relative; left: 20%; top: 2%; min-height: 20%;}
  15. #hinner {position: absolute; bottom: 0;}
  16. #content {width: 60%; position: relative; left: 20%; top: 3%; min-height: 47%;}
  17. #cinner {width: 90%; min-height: 87%; position: absolute; top: 5%; left: 4%;}
  18. #footer {width: 60%; height: 24%; position: fixed; bottom: 2%; left: 20%;}
  19. #finner {width: 100%; height: 12px;}
  20. #dekor1 {width: 24%; height: 3px; position: fixed; top: 30%; right: 0;}
  21. #dekor2 {width: 24%; height: 3px; position: fixed; top: 30%; left: 0;}
  22. #dekor3 {width: 24%; height: 3px; position: fixed; top: 65%; right: 0;}
  23. #dekor4 {width: 24%; height: 3px; position: fixed; top: 65%; left: 0;}
  24. </style>
  25. <!--[if lt IE 7]>
  26. <style type="text/css">
  27. html {height: 100%; overflow: hidden;}
  28. body {height: 100%; overflow: hidden;}
  29. #wrapper {height: 100%; width: 100%;
  30. position: absolute; top: 0; left: 0; overflow: auto; overflow-y: scroll;}
  31. #header {height: 20%; margin-bottom: 1.5%;}
  32. #content {height: 60%; top: 1.5%;}
  33. #cinner [height: 80%;}
  34. #footer {position: absolute; margin-left: -3px; width: 59.45%;}
  35. #dekor1 {position: absolute; right: 16px; overflow: hidden;}
  36. #dekor2 {position: absolute; left: 0; overflow: hidden;}
  37. #dekor3 {position: absolute; right: 16px; overflow: hidden;}
  38. #dekor4 {position: absolute; left: 0; overflow: hidden;}
  39. </style>
  40. <![endif]-->
  41. </head>
  42. <body>
  43. <!--[if lt IE 7]><div id="wrapper"><![endif]-->
  44. <div id="header"><div id="hinner">
  45. <h1>Ist nicht.</h1>
  46. </div></div>
  47. <div id="content"><div id="cinner">
  48. <p class="poem">grob ist nicht fein, fein ist nicht grob;<br />
  49. kalt ist nicht warm, warm ist nicht kalt;<br />
  50. lang ist nicht kurz, kurz ist nicht lang;<br />
  51. weise ist nicht dumm, dumm ist nicht weise.</p>
  52. </div></div>
  53. <!--[if lt IE 7]></div><![endif]-->
  54. <div id="footer"><div id="finner"></div>
  55. </div>
  56. <div id="dekor1"></div>
  57. <div id="dekor2"></div>
  58. <div id="dekor3"></div>
  59. <div id="dekor4"></div>
  60. </body>
  61. </html>
Silke Schümann, Gabäckerweg 37, 73630 Remshalden/Geradstetten, Fon 07151-970717, sag-hi @ pg4me.de