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.

    http://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
    background-position: 90%

    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"?

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo!

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

    Vielen Dank!

    also ich sehe bei dir leider gar kein bild ff17 u. IE9.

    was mir aber aufgefallen ist, ist, dass du das div"logo" im footer nicht schliesst.
    weiters sollte kein "position:absolute;" notwendig sein -> packe das div"logo" einfach um #page herum, gib ihm ein max-weight, margin: 0 auto; und rechts einen padding. dieser sollte dabei die breite des logos besitzen. wenn du dies in px angiebst kann das aber zu einem unschönen layout auf mobilen geräten führen. um dies zu vermeiden würde ich in der mobilen ansicht das #logo via "display:none;" ausblenden. oder du setzt dich ein wenig mit "background-size" auseinander wobei ich jetzt nicht weiss, welche browser dies nicht unterstützen.

    prinzipiell würde ich aber eher von deinem vorhaben abraten, da twentyeleven von haus aus responsive konzipiert ist und es bei solchen vorhaben nicht ganz leicht ist, das diese (meisst erwünschte) eigenschaft erhalten bleibt.

    lg, pixselig

    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

    Also, ich würde sagen, wirf erst mal das Logo-Div, so wie es jetzt ist, raus.
    Schreib in dein CSS:

    HTML
    #logo {
margin: 0 -50px 0 0;
width: 50px
height: 394px;
background: url(images/briefkopf.png) no-repeat;
}


    Das div wie folgt fügst du dann direkt nach dem öffnenden Page-div ein:

    <div id="logo"></div>

    Einmal editiert, zuletzt von Narcanti (5. Dezember 2012 um 02:19)

    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

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

    Schließt du das div "Logo" auch gleich wieder so wie Narcanti es geschrieben hat? Und hast du das alte </div> vom Logo aus dem Footer entfernt?

    jomibe, dann hast Du es anders gemacht, ich hab's ja auf deiner Seite getestet...
    Das sollte dann im HTML so aussehen:

    HTML
    <div id="page" class="hfeed" style="z-index:9999;">
   <div id="logo"></div>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden