[gelöst] fusion - überlappendes Logo
Eingetragen von madrina (54)am 22.02.2012 - 09:56 Uhr in
Hallo,
ich versuche mit 'fusion' eine HP zu erstellen und scheitere momentan an der Darstellung des Logos, so wie ich es gerne hätte.
Das Logo soll sich auf der rechten Seite mit dem 'main-content' Bereich überlappen. Dies habe ich durch diesen css code in der style.css meines sub-themes erreicht:
#logo {
float: right;
margin-bottom:-5em;
}
Vielleicht eine etwas unschöne Lösung. Für Tipps wie das auch anders ginge, wäre ich sehr dankbar!
Es ist ein Hintergrundbild vorhanden, der Hintergrund des '.main' Bereiches ist weiß/transparent, sowie extra nochmal der Hintergrund des '.content-group' und der 'sidebar' (siehe jpg).
Das Problem ist nun, dass sich der überlappende Teil des Logos genau zwischen den Hintergrund des '.main' und dem des '.content-group' schiebt. Es soll jedoch oben auf liegen, damit es nicht "zerschnitten" wird. Ich habe es schon mit z-index probiert aber es tut sich nix.
Hat jemand eine Idee?
Ich benutze Drupal 7 und den firebug
| Anhang | Größe |
|---|---|
| Logo-ueberlappend.jpg | 8.8 KB |
- Anmelden oder Registrieren um Kommentare zu schreiben
Lies Dir bitte folgende Info
am 22.02.2012 - 10:32 Uhr
Lies Dir bitte folgende Info durch, besonders der Abschnitt Erläuterungen. Z-Index ist nicht ganz trivial.
Beste Grüße
Werner
Ich habe den z-index für die jeweiligen Elternelemente
am 22.02.2012 - 13:28 Uhr
Danke, für die schnelle Antwort!
Ich habe den z-index für die jeweiligen Elternelemente eingestellt. Das Logo liegt im 'header-group-wrapper' und die transparenten Hintergründe im 'main-wrapper' (siehe 2. jpg). Und trotzdem tut sich nix.
Warum schiebt sich denn das Logo genau zwischen diese beiden transparenten Hintergründe?
Und kann ich das Logo vielleicht noch anders überlappen lassen?
Hast Du zusätzlich zum
am 22.02.2012 - 13:54 Uhr
Hast Du zusätzlich zum Z-Index eine Position-Anweisung in diesem CSS-Block stehen? Sonst wirkt der Z-Index nicht. Außerdem wurde in dem Beitrag genau erklärt, wie die Schachtelung erfolgt.
Beste Grüße
Werner
Danke ... die Position-Anweisung war's.
am 23.02.2012 - 09:40 Uhr
Danke ... die Position-Anweisung war's.
.header-group-wrapper {
position:absolute;
z-index:2;
}
Und dann noch ein wenig mit 'margin' herumprobiert und jetzt sieht's so aus, wie ich es wollte.
Viele Grüße