Goldener Schnitt

[M. Schmid]

Ich brauche Hilfe für ein ganz spezielles Problem.
Ich möchte eine Homepage gestalten, welche im Hintergrund wie folgt aussieht
Nun habe ich folgendes anliegen, ich möchte dass der Hintergrund egal welche Auflösung der Bildschirm des Betrachters hat immer mitwächst, aber der goldene Schnitt erhalten bleibt. Wie ich das mit einer Tabelle hinbekomme, ist mir klar (68% zu 32%) nun muss aber WERBE und AGENTUR jeweils auf dem schwarzen bzw. orangenen Teil stehen(und mitwachsen). Wie mache ich das? Kann ich vektorielle Grafikdateien einbauen? Wenn ja wie? Und wie erstelle ich diese vektoriellen Grafikdateien.

Würde mich über Hilfe wahnsinnig freuen.
Gerne auch über icq oder Telefon, wenn es hier zu kompliziert wäre.

Viele Dank

M. Schmid

[LX]

Wie stellst Du Dir das "Mitwachsen" vor? Nur horizontal oder auch vertikal? Abgesehen davon ist das mit den Tabellen nicht so einfach, wie Du Dir das vielleicht vorstellst, denn manche Browser ignorieren %-Angaben zugunsten der besseren Darstellung des Inhalts...

Was die "Grafik"dateien angeht: ich schlage vor, Du schaust Dir Techniken wie sIFR, cufòn oder typefaceJS an; die sollten Dir diese Aufgabe erheblich vereinfachen.

Gruß, LX

[Cheatah]

Hi,

mal abgesehen von LX' richtigem Einwand:

Nun habe ich folgendes anliegen, ich möchte dass der Hintergrund egal welche Auflösung der Bildschirm des Betrachters hat immer mitwächst,

Die Auflösung des Bildschirms ist ohne Belang. Dir steht nur die Viewport-Größe zur Verfügung.

aber der goldene Schnitt erhalten bleibt. Wie ich das mit einer Tabelle hinbekomme,

Tabellen dienen der Strukturierung tabellarischer Daten. Keine tabellarischen Daten => keine Tabelle.

ist mir klar (68% zu 32%)

68/32 ist etwas signifikant anderes als (68+32)/68. Dies ist kein goldener Schnitt.

Cheatah

[JürgenB]

Hallo Cheatah, hallo M.,

68/32 ist etwas signifikant anderes als (68+32)/68. Dies ist kein goldener Schnitt.

dazu noch als Ergänzung: Der Goldene Schnitt ist so definiert:

Teilt man eine Strecke so, dass das Verhältnis der kleineren zur größeren Teilstrecke gleich den Verhältnis der größeren Teilstrecke zur ganzen Strecke ist, so nennt man dieses Verhältnis den "Goldenen Schnitt". Eine einfache Rechnung liefert:

G = k/g = g/(k+g) = 0.5*(Wurzel(5) - 1) = 0.61803398875

Gruß, Jürgen

[EKKi]

Mahlzeit M. Schmid,

nun muss aber WERBE und AGENTUR jeweils auf dem schwarzen bzw. orangenen Teil stehen(und mitwachsen). Wie mache ich das?

Dann schreibe doch den Text "WERBE" so in den linken (schwarzen) Teil, das er rechtsbündig am Rand steht und den Text "AGENTUR" so in den rechten (orangenen) Teil, das er linksbündig am Rand steht.

Was verstehst Du unter "Mitwachsen"? Wenn der Benutzer zoomt? Das dürfte bei Verwendung <http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=relativer Größen- und Breitenangaben> kein Problem sein.

MfG,
EKKi

[Gunnar Bittersmann]

@@M. Schmid:

nuqneH

Nun habe ich folgendes anliegen, ich möchte dass der Hintergrund egal welche Auflösung der Bildschirm des Betrachters hat immer mitwächst, aber der goldene Schnitt erhalten bleibt.

Dass du nicht die Bildschirmauflösung, sondern die Viewportgröße meinst, wurde ja schon gesagt.

Die Lösung ergibt sich aus der Spezifikation der 'background-position'-Eigenschaft:
“A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with […] value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.” [CSS21 §14.2.1]

Erstelle eine Grafik, die für alle heutigen Bildschirme hinreichend breit ist (4096 Pixel Breite sollten genügen), als Höhe dürten sich 8 Pixel anbieten (damit erreicht wird, dass die Grafik im Speicher (als Bitmap) nicht zu groß wird, sie aber auch nicht zu oft wiederholt wird). Diese Grafik enthält schwarz und orange im Verhältnis 62:38. (Manchmal ist ein Tippfehler einfach nur ein Tippfehler.)

Diese wird so positioniert, dass der Punkt 62% 0% (vertikal ist egal) der Grafik (d.h. die Grenze zwischen schwarz und orange!) im Punkt 62% 0% der Box (d.h. des Viewports) plaziert wird (die Grenze also bei 62% der Viewportbreite verläuft):

html  
{  
    background-image: url(blackorange.png);  
    background-repeat: repeat-y;  
    background-position: 62% 0%;  
    height: 100%;  
}

oder zusammengefasst

html  
{  
    background: url(blackorange.png) repeat-y 62% 0%;  
    height: 100%;  
}

Dasselbe machst du mit der Textgrafik (":werbeagentur:"). Diese muss nur so breit sein wie die Schrift; wichtig ist das Verhältnis 62:38 von ":werbe" und "agentur:".

Um eine mögliche Verschiebung um einen Pixel durch Rundungsfehler nicht störend sichtbar werden zu lassen, sollte die Grafik nur die Buchstaben auf transparentem Hintergrund enthalten. (Alphatransparenz ist nicht notwendig; auf schwarz-orange mit Antialiasing rendern, dann schwarzen und orangen Hintergrund entfernen.)

Als Hintergrundbild eines anderen Elements einbinden:

body  
{  
    background: url(werbeagentur.png) no-repeat 62% 0%;  
    height: 100%;  
}

Qapla'

[Bademeister]

Hi Gunnar.

Da interssiert mich gerade mal was:

als Höhe dürten sich 8 Pixel anbieten (damit erreicht wird, dass die Grafik im Speicher (als Bitmap) nicht zu groß wird, sie aber auch nicht zu oft wiederholt wird).

Was ist der Nachteil von zu haeufigen Wiederholungen? Ich haette die Grafik mangels besseren Wissens einfach 1px hoch gemacht.

Die Antwort wird wohl "Geschwindigkeit" sein, was sonst(?). Sind die Unterschiede signifikant?

Danke, viele Gruesse,
der Bademeister

[Gunnar Bittersmann]

@@Bademeister:

nuqneH

Was ist der Nachteil von zu haeufigen Wiederholungen? Ich haette die Grafik mangels besseren Wissens einfach 1px hoch gemacht.
Die Antwort wird wohl "Geschwindigkeit" sein, was sonst(?). Sind die Unterschiede signifikant?

http://forum.de.selfhtml.org/archiv/2009/7/t188832/#m1257506 ff.

Qapla'

[Bademeister]

http://forum.de.selfhtml.org/archiv/2009/7/t188832/#m1257506 ff.

Vielen Dank. Ich verstehe es zwar noch nicht ganz - das Rendern einer (komprimierten) Grafik an sich scheint mir auf den ersten Blick (um ein Vielfaches) aufwendiger als das wiederholte Anzeigen einer bereits gerenderten Grafik - aber ich werde dem mal nachgehen.

Viele Gruesse,
der Bademeister

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

Dasselbe machst du mit der Textgrafik (":werbeagentur:"). Diese muss nur so breit sein wie die Schrift; wichtig ist das Verhältnis 62:38 von ":werbe" und "agentur:".

Das könnte etwas missverständlich gewesen sein. Ich versuch’s nochmal:

Diese muss nur so breit sein wie es die Schrift erfordert; wichtig ist das Verhältnis 62:38 von ":werbe" und "agentur:". (":werbe" nimmt 62% der Breite ein; "agentur:" 38%. Links von ":werbe" ist also noch Leerraum.)

Qapla'