Hintergrundbild statt Farbe im Design Vision

Trainee

Wednesday, March 31st 2010, 11:42pm

hallo zuammen,
ich zaudere jetzt schon lange, meine Frage zu stellen, weil ich befürchte, mal wieder abgebürstet zu werden, weil diese Frage wahrscheinlich schon gestellt und beantwortet wurde. Aber: ich meine, alle Foren durchgeforstet zu haben. Leider ohne Erfolg. Also traue ich mich:
ich arbeite mit W2D 5.0 und möchte gerne:
- ein eigenes Bild statt des Hintergrunds (nur weiß) einfügen und dazu wissen, wie das funktioniert (wo muss ich was einfügen? wie groß muss das Bild sein, etc.)
- das gesamte Design zentrieren (die KLinks von Sven laufen leider inzwischen ins Leere)
Wäre toll, wenn Ihr mir helfen könntet.
Liebe Grüße,
Andrea

Go to the top of the page

Graf Foto

Master

Posts: 2,590

Location: Bielefeld

Occupation: Lebenskünstler

2

Thursday, April 1st 2010, 8:15am

Hallo Andrea.

Ich dachte gerade ... super, endlich mal wieder jemand zum abbürsten :twisted:

Aber ich find auch keine vernünftige Anleitung zum Hintergrundeinbinden :cry:

Dann also stattdessen eine Erklärung:

-Zuerst erstellst du ein Bild (im Beispiel pic_background.jpg) und speicherst es im Templateordner (...designs / Vision)

- dann öffnest du die Datei global.ccml mit einem texteditor. Dort fügst du unterhalb von: </cc:*> folgendes ein:

<cc:picture obj="pic.background" dst="pback.jpg" src="pic_background.jpg">

Damit meldest du das Bild im Template an.

- Als nächstes musst du die style Datei öffnen für die Schriftart, die du benutzt. Also z.B. für Arial die Datei style_arial.css .

Da findest du ganz am Anfang den Bodyeintrag:

BODY, HTML {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}

Darunter fügst du folgendes ein:

BODY {
background: url(../images/<cc:print value="&pic.background.filename">) top left;
background-repeat: repeat-x;
}

Mit repeat-x wird das Bild von links nach rechts gekachelt. Alternativ kannst du repeat-y (von oben nach unten wiederholt) oder no-repeat verwenden.

Möchtest du zusätzlich eine Hintergrundfarbe verwenden, die zum Einsatz kommt, wenn das Bild zu Ende ist, fügst du bei background noch ein:

background: #ffffff url ...

Statt ffffff gibst du deinen gewünschten Farbcode ein.

Viele Grüße

Jürgen

--------------------------------------------------------------------------------------------
Templates für W2D: http://www.webdesign.siegmann.ws

http://www.siegmann.ws - http://www.postkartenparadies.de

Go to the top of the page

cojo_1008

Super-Moderator

Posts: 3,609

Location: Berlin-Kaulsdorf

Occupation: Freiberuflerin

web/shop to date Version: shop to date 5 - shop to date 8

3

Thursday, April 1st 2010, 9:34am

Hallo Andrea,

das Zentrieren ist bei Vision schwierig: es ist ein Tabellendesign und die Sidebar ist vollkommen lieblos noch an die rechte Seite genagelt worden. Also greift da auch das berühmte table align="center" nicht, da die Sidebar ihren Platz nicht räumt

Du kannst dieses gesamte Tabellenkonstrukt inklusive Sidebar aber in einen Container mit einer Breite von 960px packen, den zentrierst Du und die Sidebar wird in der left-position noch weiter nach links geschoben - da musst Du ausprobieren.
Ich habe hier Vision mal vollkommen aus der Tabelle geholt - so kann es aussehen

Gruß Conny

Go to the top of the page

blauekatze

Trainee

Posts: 116

4

Thursday, April 1st 2010, 4:05pm

Hallo Jürgen,
lieben Dank - nun habe ich den Hintergrund mit meinem Bild ausgefüllt. Unter dem Text in der Content-Spalte allerdings ist auch keine Farbe mehr. D.h. der Text steht quasi ohne Hintergrund da - mit der Farbangabe hinter background: #ffffff tut sich nix, weil ich das Bild bildschirmfüllend groß gemacht habe. und unter den Text will die Farbe so nicht...
Darf ich noch mal um Hilfe bitten?
Lieben Dank für die ausführliche Erklärung...
Gruß,
Andrea

Go to the top of the page

blauekatze

Trainee

Posts: 116

5

Thursday, April 1st 2010, 4:24pm

Hallo Conny,
die Erfahrung habe ich auch schon mal gemacht und dann die Zentrierung wieder rausnehmen müssen, weil die Sidebar benötigt wurde.
Kannst Du mir wohl bitte mal erklären, wie das: "Du kannst dieses gesamte Tabellenkonstrukt inklusive Sidebar aber in einen Container mit einer Breite von 960px packen, den zentrierst Du und die Sidebar wird in der left-position noch weiter nach links geschoben - da musst Du ausprobieren." geht?
also vor allen Dingen den Teil, in dem ich "das ganze Tabellenkonstrukt inkl. Sidebar in einen Container packen" soll? :roll:
Gruß,
Andrea

Go to the top of the page

cojo_1008

Super-Moderator

Posts: 3,609

Location: Berlin-Kaulsdorf

Occupation: Freiberuflerin

web/shop to date Version: shop to date 5 - shop to date 8

6

Thursday, April 1st 2010, 4:28pm

	Source code
1	<div id="container">

direkt unter <body usw.> und das schließende </div> direkt vor </body>

Gruß Conny

Go to the top of the page

blauekatze

Trainee

Posts: 116

7

Monday, April 5th 2010, 3:41pm

Hintergrundbild bei Beta lässt Rand oben

Hallo Jürgen,
deine Lösung funktioniert sogar mit der Beta-Version. Allerdings habe ich da - nach Einbindung eines Bildes als Hintergund und einer Verbreiterung der Contentbar oberhalb von dieser noch einen Farbstreifen, der nicht durch das Hintergrundbild abgedeckt wird. Auch die oberen Ecken der Sidebar und der Contentbar selbst sind noch in dieser Farbe.
Guckst Du hier :-) - gerne würde ich einen Snapshot einfügen... Allein, ich weiß nicht, wei :-(
Gruß,
Andrea
P.S.
Ich poste meine Frage vorsichtshalber mal unter Beta...

Go to the top of the page

w2d-forum.de - die Internet-Community für web to date