Variablen Header entwerfen

[Mo3bius]

Hi,
ich baue meine Webseite im Moment um. Dabei verwende ich CSS wie es gedacht war ;). Also keine Layouttabellen etc...

Nun meine Frage:

Meine Seite passt sich in gewissen Grenzen der Auflösung des Monitors an. Wie mache ich das aber mit dem Header?

Ein Beispiel: http://www.andreas-kalt.de/

Wenn man sich diese Webseite anschaut und die Auflösung seines Monitors verändert, so sieht der Header immer noch gleich aus.

Wie mach ich das?

Mfg  Mo3bius

[Auge]

Hallo

ich baue meine Webseite im Moment um. Dabei verwende ich CSS wie es gedacht war ;). Also keine Layouttabellen etc...

Nun meine Frage:

Meine Seite passt sich in gewissen Grenzen der Auflösung des Monitors an. Wie mache ich das aber mit dem Header?

Ein Beispiel: http://www.andreas-kalt.de/

Wenn man sich diese Webseite anschaut und die Auflösung seines Monitors verändert, so sieht der Header immer noch gleich aus.

Wie mach ich das?

Du schaust dir den HTML- und den CSS-Quelltext der oben genannten Seite an. Dann siehst du, dass <div id="header"> ein sehr breites Hintergrundbild hat, dass rechts ausgerichtet ist und bei schmalerem Viewport links aus der Seite herausragt. Der Link <a id="pagetitle">, der in #header notiert ist, enthält das Bild mit dem Schriftzug, dass links ausgerichtet ist und, je nach aktueller Breite des Viewports, mal mehr recht und mal mehr links über dem Hintergrundbild des Header steht. Der Text im <span> innerhalb des Links wird im CSS über (#pagetitle span) erreicht und schlussendlich mit text-indent: -5000px; aus dem sichtbaren Bereich gerückt.

Das alles habe ich innerhalb von 5 Minuten mit der Web Developer Toolbar des FF duch Betrachtung der mir zugänglichen Quelltexte herausgefunden. Sollte man unbedingt installiert haben, auch wenn man den FF ansonsten nicht benutzt. Seine WDT ist (zuzüglich FireBug) momentan immer noch das Maß der Dinge.

Tschö, Auge

[Mo3bius]

Danke für die ausführliche Antwort!

Das AddOn Web Developer ist wirklich praktisch, das hätte ich früher schon gebraucht ;)

Ich denke ich habs verstanden wie die Seite aufgebaut ist.

Mfg Mo3bius