Twenty Eleven: Zusätzliches Element rechts von <page>

Hallo zusammen,

ich verwende als Grundlage das Design TwentyEleven.

Jetzt würde ich gerne eine Sache machen: Und zwar möchte ich rechts vom Hauptfenster ein Element "ankleben".
Ziel ist es, zwei Hintergrundbilder in dieses Element einzubinden, die dauerhaft am rechten Rand stehen bleiben.
Dieses Zusatzelement soll den Bereich überlagern, der bei Twenty Eleven normalerweise einfach nur mit der Hintergrundfarbe gefüllt wird.

www.roeskamp.de/yippieyei
(und siehe auch angehängtes Bild)

Im Moment habe ich das so "gelöst":

In der style.css habe ich eine neue ID (#logo) definiert.
In der header.php habe ich dann ein neues <div> mit dieser ID eingefügt.
Soweit so gut.

Das Problem dabei: Das sieht immer nur für eine bestimmte Auflösung gut aus (z.Zt. für 1680*1050). Wenn man aber das Browserfenster größer oder kleiner zieht, ist das Mist.

Mir ist klar, dass das im Moment an der absoluten Positionierung liegt. Natürlich sind 1340px von links nicht für alle Auflösungen ideal. Aber wenn man das mit

Code:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

oder so ähnlich macht, ist das noch katastrophaler. Wie kann ich dafür sorgen, dass dieses neue <div> wirklich immer recht am zentrierten .page-Element "festklebt"?

 

Hallo!

Hat keiner von Euch Foristen eine gute Idee? Ich verzweifel so langsam echt an dieser blöden Positionierung!

Vielen Dank!

 

Hallo pixselig,

erst mal danke für Deine Antwort. Dass Du nix siehst, wundert mich nicht. Das liegt an der von Dir verwendeten Auflösung. Wenn die kleiner ist als meine, dann wird im Moment das Hintergrundbild hinter #page geschoben.

Danke auch für den Hinweis mit dem footer. Das habe ich korrigiert.

Ansonsten hat das leider mit Deiner Beschreibung noch nicht wirklich gefunzt:

1. #logo liegt jetzt definitiv um #page herum.
2. Meintest Du wirklich max-weight? Das kenne ich nicht. Ich hatte dem #logo bis jetzt ein max-width zugewiesen.
3. Die margin-Werte habe ich so übernommen.
4. padding-right habe ich auf 150px eingestellt. Das ist die Breite von dem Streifen namens overlap.jpg.
5. background-position habe ich dafür jetzt rausgenommen.

Leider ist das Ergebnis, dass der Streifen jetzt ganz links angezeigt wird. Warum auch immer!
Hast Du eine Ahnung, woran das liegt?

Danke und Gruß
jomibe

 

Hallo Narcanti,

erst mal vielen Dank für Deinen Input. Leider ist es so, dass damit die gesamte Seite komplett zerschossen wird. Wenn ich Deinen Code einfüge und dann das #logo hinter #page einfüge, dann wird die gesamte Seite auf 50px Breite reduziert. Das sieht leider nicht so super aus...

Grüße
jomibe