BP Hintergrund Bild + Verlauf kombinieren. Wie geht das?

[Fiona]

Hallo

Ich möchte bei den Hintergrund so gestalten, dass auf der linken Seite, direkt am Rand, eine Grafik liegt und direkt daneben ein Verlauf. Die entsprechende Stelle in der style sieht original so aus:

Code: Select all

body {
    background: #993400 url('img/terrazine_body.jpg') repeat-x;
}

Wie setze ich links neben img/terrazine_body.jpg ein zusätzliches Bild ein?

Danke vorab.

Herzlichst
Fiona

[yellowled]

Wie setze ich links neben img/terrazine_body.jpg ein zusätzliches Bild ein?

Du wartest ab, bis CSS Level 3 halbwegs von allen Browsern unterstützt wird und man einem Element mehrere Hintergrundbilder zuweisen kann. Kann sich nur um Jahre handeln.

Okay, ernsthaft: Es geht so nicht. Versuchen könntest Du zwei Dinge:

1. body als Hintergrundbild den Verlauf zuweisen. Die Grafik, von der Du leider nicht schreibst, worum es sich genau handelt, irgendwo[tm] im Code der index.tpl als img einbinden und absolut positionieren. Etwa so, wie ich es in meinem Blog mit dem Feed-Icon gemacht habe. Leider nicht updatesicher, da mit Hacken der index.tpl verbunden.

2. Du kannst versuchen, die Grafik dem div #wrapper als Hintegrundbild zuzuweisen und diese dann nicht über "top left no-repeat" etc. zu positionieren, sondern über sowas hier: "-50px -50px no-repeat". Eventuell geht das in liquiden Layouts sogar über Prozentwerte, da muss man ein wenig experimentieren.

Gibt's evtl. schon ein Liveblog davon, damit man mal spielen könnte?

YL

[garvinhicking]

Hi!

So garnicht, Du musst das bild dann manuell in den HTML Code als <img> einsetzen, oder das bild in ein eigenes DIV als Hintergrundbild per CSS packen.

Grüße,
Garvin

[Fiona]

Hallo

Ich hab's befürchtet.

Code: Select all

body {
    background: #993400 url('img/terrazine_bodyA.jpg'); background-repeat:no-repeat;
    background: #993400 url('img/terrazine_body.jpg'); background-repeat:repeat-x;
}

Bild terrazine_bodyA wird angezeigt aber nur so lange bis der zweite Hintergrund kommt.

Zu gucken: http://www.terrazine.de

Wäre dankbar, wenn ich konkretere Anleitung bekäme.

Ziel wäre es, die Figur aus dem Banner zu lösen und größer an die linke Seite zu stellen. Dann müsste der Content erst links vom Bild beginnen. Ob das zu realisieren ist?

Herzlichst
Fiona

[Fiona]

Hallo

ich habe jetzt mal den Vorschlag mit dem Wrapper gemacht:

Code: Select all

#wrapper {
    width: 944px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 69%;
    background-color: #ffffff;
    border: 0px solid #672402;
    margin: 0px auto;
    background: #ffffff url('img/terrazine_bodyA.jpg') -200px -50px no-repeat;
}

Leider schiebt sich das Bild unter den ersten Hintergrund. Daran ändert sich auch nichts, wenn ich wrapper vor Body setze.

Zu Hülfe, bitte.

Herzlichst
Fiona

[yellowled]

Zu Hülfe, bitte.

Hm. Hmhmhmhm. Ich hab jetzt zwei andere gewagte Lösungen erfolglos lokal getestet - es nützt alles nix, da musst du an den HTML-Code.

Zunächst mal den wrapper-Kram rückgängig machen. Das Hintergrundbild für den body bleibt, wie es ist. Nun binden wir das Horizontalbanner als img in die index.tpl ein:

Code: Select all

<div id="hbanner">
<img src="{$serendipityHTTPPath}templates/{$template}/img/terrazine_bodyA.jpg" width="227" height="800" alt="Schmuckbanner Terrazine" />
</div>

Das muss ausserhalb von #wrapper stehen, also am besten am Ende der index.tpl einbauen:

Code: Select all

    </div>
<!-- hier einsetzen -->
{/if}

{$raw_data}

Nun per CSS festzurren:

Code: Select all

#hbanner {
    position: absolute;
    top: 0px;
    left: 0px;
}

Wie ist das für's Erste?

YL

[Fiona]

Hallo yellowled

Super! Das passt schon mal prima.

Ist es jetzt auch noch möglich, dem Content bzw. dem Wrapper, zu sagen, dass er an nach dem Banner anfängt?

Noch was: Wie wirken das Layout bzw. die Farben auf euren Monitoren? Soll ich den Schmuckbanner lieber noch etwas schmaler machen? Auf meinem 24 Zoll Breitbild-Monitor gefällt mir das alles hervorragend. Doch auf dem Schlepptop kommen die Verläufe eher unschön an. Wie ist das bei euren Monitoren?

Herzlichst
Fiona

[yellowled]

Super!

Geht so. Es ist ein dreckiger Hack, der durch die absolute Positionierung eigentlich das gesamte Layoutkonzept von BP durchbricht und jede Menge Nacharbeit mit sich bringt, aber es geht halt nicht anders.

Dir ist klar, dass dieser Code in der index.tpl beim nächsten Update von s9y und oder BP überschrieben wird und was zu tun ist, damit er danach wieder eingebaut werden kann?

Ist es jetzt auch noch möglich, dem Content bzw. dem Wrapper, zu sagen, dass er an nach dem Banner anfängt?

Definiere "nach dem Banner anfängt" - unter dem Banner, neben dem Banner, soll er das Banner umfließen?

Sinnvoll wäre vermutlich, die horizontale Zentrierung von #wrapper aufzuheben und den gesamten #wrapper nach links zu schubsen. Dafür musst Du allerdings die Breite von #wrapper mächtig reduzieren, damit es in gängigen Auflösungen (1024-1280 Pixel Breite) noch gut aussieht, weshalb ich auch (siehe unten) empfehlen würde, das Schmuckbanner deutlich schmaler zu halten.

Noch was: Wie wirken das Layout bzw. die Farben auf euren Monitoren?

Okay, bis auf den Hintergrund des Kopfbereiches (#serendipity_banner): Der Verlauf wirkt dort stufig, die Schrift hat deutliche JPG-Artefakte. Zu stark komprimiert wahrscheinlich.

Ich würde empfehlen, aus den unkomprimierten Originalen, die Du hoffentlich noch hast, PNG-Grafiken zu erzeugen. Transparenz ist ja hier anscheinend nicht im Einsatz, also sollten PNG-24-Grafiken selbst im IE6 okay sein.

Soll ich den Schmuckbanner lieber noch etwas schmaler machen?

Unbedingt. Ich würde viel schmaler werden, maximal 50-80 Pixel.

Rechenbeispiele:

Banner: 50 Pixel breit. Dann muss #wrapper einen margin-left von mindestens 50, besser 60 Pixel haben. Dann bleibt #wrapper gerade so eben noch in 1024er Breite, ohne horizontale Scrollbalken zu erzeugen.

Banner 100 Pixel breit. margin-left für #wrapper mindestens 100-110 Pixel, dann musst Du die Breite von #wrapper schon auf 900px reduzieren.

Usw. usf.

YL

[Fiona]

Hallo Yellowed

Wenn ich diesen Schmuckbanner nur 50 oder 80 Pixel breit machen würde, dann könnte ich die Figur auch gleich in den oberen Banner stellen. Das ist ja gerade mein Problem. Diese Hochkant-Logo prominent und erkennbar zu stellen. Sonst wäre ich ja gar nicht auf diese Idee gekommen.

Die Alternative wäre ein senkrechten Banner. Der horizontale Banner wäre dann überflüssig. Es bliebe die horizontale Top-Navigation, die allerdings nicht ganz oben unter dem Rand klemmen dürfte. Du verstehst, was ich meine? Evt. würde das besser zur Bulletproof-Philosophie passen?

Bliebe nur die Frage, wie man das senkrechte Banner nach unten hin elegant löst?

Herzlichst
Fiona

[yellowled]

Wenn ich diesen Schmuckbanner nur 50 oder 80 Pixel breit machen würde, dann könnte ich die Figur auch gleich in den oberen Banner stellen.

Dann mach es halt so breit, wie es jetzt ist, und reduziere die Breite von #wrapper. floaten kannst Du es im Übrigen nicht mehr, da es absolut positioniert ist, wie ich mich beim 2. Kaffee heute erinnert habe

Übrigens ist mir gerade aufgefallen, dass die Grafik für das horizontale Banner ja nur 179px breit ist. Da hat vorher irgendetwas[tm] verzerrt.

Code: Select all

<img src="{$serendipityHTTPPath}templates/{$template}/img/terrazine_bodyA.jpg" width="179" height="800" alt="Schmuckbanner Terrazine" />

So. Und nun machst Du:

Code: Select all

#wrapper {
    margin: 0 auto 0 180px;
    width: 810px;
}

passt das Hintergrundbild für #serendipity_banner mal ordentlich an, und dann "liegt die Ente auf'm Teller"

Die Alternative wäre ein senkrechten Banner. Der horizontale Banner wäre dann überflüssig. Es bliebe die horizontale Top-Navigation, die allerdings nicht ganz oben unter dem Rand klemmen dürfte. Du verstehst, was ich meine?

Nee. Schon deshalb nicht, weil ich es mir nicht bildlich vorstellen kann.

Meiner Logik nach würde man ein horizontales Banner immer als Hintergrundbild für #serendipity_banner einbauen, dann kann man sich den ganzen Heckmeck mit der index.tpl und absoluter Positionierung schenken.

YL

[Fiona]

Schon gesehen, dass der Schmuckbanner verzerrt war, hatte ihn gerade angepasst und den Header oben auch.

Banner ist auch angepasst.

Das sieht jetzt schon mal viel, viel besser aus, finde ich. Und was sagt der Experte?

Herzlichst
Fiona

[yellowled]

Das sieht jetzt schon mal viel, viel besser aus, finde ich. Und was sagt der Experte?

Stimmt. Bis auf Kleinkram.

* Man könnte jetzt meiner Ansicht nach fast diskutieren, ob die Hintergrundgrafik für #serendipity_banner nicht witzlos ist.
* Den Verlauf hinter der Navigationsleiste würde ich ebenso weglassen wie die border-right der Links dort.
* img/terrazine_xml.png fehlt noch.
* Links im Footer sind schlecht lesbar, da würde ich die color ändern.

YL

[Fiona]

wie die border-right der Links dort.
* img/terrazine_xml.png fehlt noch.
* Links im Footer sind schlecht lesbar, da würde ich die color ändern.

YL

Richtig. Würde die Top-Navigation auch gerne auf gleiche Linie mit der Suchmaske bringen. Bloß wie?

Hintergrundbanner: Tja, wie hänge ich dann das einzelne Blatt auf. So als Kontrapunkt und Gegengewicht zum linken Blatt macht es sich dort oben doch ganz gut. Außerdem wäre da noch der dunkle untere Randstreifen vom Banner. Auf den würde ich ja nicht gerne verzichten. Die Navigation sähe sonst sehr verloren aus.

Footer: Auch daran bin ich kläglich gescheitert. Sonst hätte ich das längst gemacht.

Suche auch noch die Stelle, bei der ich die rosa Pünktchenlinie aus den Kommentaren modifizieren kann.

Lauter Kleinigkeiten eben.

Herzlichst
Fiona

[yellowled]

Würde die Top-Navigation auch gerne auf gleiche Linie mit der Suchmaske bringen. Bloß wie?

Code: Select all

#sitenav #searchform input { margin-top: 0; }

Evtl. ergänzend die Schriftgröße in der Navigation leicht erhöhen.

So als Kontrapunkt und Gegengewicht zum linken Blatt macht es sich dort oben doch ganz gut.

Dann behalt es halt

Footer: Auch daran bin ich kläglich gescheitert.

Code: Select all

#footer a { color: #fff; }

Suche auch noch die Stelle, bei der ich die rosa Pünktchenlinie aus den Kommentaren modifizieren kann.

Was für eine rosa Pünktchenlinie?

YL

[Fiona]

Suche auch noch die Stelle, bei der ich die rosa Pünktchenlinie aus den Kommentaren modifizieren kann.

Was für eine rosa Pünktchenlinie?

YL

Öhm - jetzt sind sie plötzlich weg obwohl ich definitiv nichts geändert habe. Geisterheilung?

Sprich: Kommentarfelder und deren Ränder sind jetzt auch prima. Ändere ich noch die Bildpfeile und xml-Dinger.

Herzlichst
Fiona