[GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

jester · 04. Februar 2012 15:25

Hallo,

vielleicht bin ich ja wieder in die Versionswechsel-Falle gelaufen...

Ich habe bei dem 2011er Projekt eine Grafik im Kopf mittels folgenden Eintrags im Stylesheet aufgerufen:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
#header  
{ 	
height: 250px; 	
background: #9e1527 url(uploads/images/kopf-altenakademie.jpg) top right no-repeat; 	
color: #ffffff; 	
font-size: 90px; 	
padding-top: 20px; 	
font-family: Calibri, sans-serif; 	
padding-left: 15px; 	
letter-spacing: -3px; 	
border: 1px solid #c48769; }

Den gleichen Code habe ich nun in meinem neuen 2012er Projekt verwendet. Nur: Es wird keine Grafik angezeigt.

Die Grafik habe ich natürlich hochgeladen, sie findet sich ebenfalls unter uploads/images. Die Idee ist außerdem, dass der Header horizontal zweigeteilt ist in einen oberen und einen unteren Teil. In den oberen Teil soll das Logo, in den unteren Teil eine Slideshow (dazu werde ich mich sicher auch noch melden..., aber zunächst dieses Problem hier).

Darum habe ich im Stylesheet nun einen #preheader und einen #header.

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
#preheader 
{ 	
height: 200px; 	
background-image: 
#ffffff url("uploads/images/logoline.jpg") center.top no-repeat;     
padding-top: 0px; 	
padding-left: 0px; 	
border: 1px solid #D7D7D7; }

Das Template sieht so aus:

Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
<!DOCTYPE html> 
<html>  
<head>  
<title>{sitename} - {title}</title>  
{cms_stylesheet} {metadata}  
<link rel="shortcut icon" href="favicon.ico" />  
</head>  
<body>  
<div id="container">  
<div id="preheader">  
</div>  
<div id="header">  
</div>   
{* Start Navigation *}

... usw.

Gibt es etwas, das ich übersehe, oder etwas, das ich wissen müsste?

Danke!

mike-r · 04. Februar 2012 16:00

/uploads/images/... sollte helfen

edit: Ich würde empfehlen, mal ein Update der Seite zu machen und das CSS per {cms_stylesheet} aufzurufen. So wie ich das sehe, ist das nicht der aktuelle Code in Deiner Seite. Oder hast Du da noch eine Entwicklungsversion extra?

Beitrag geändert von mike-r (04. Februar 2012 16:04)

jester · 04. Februar 2012 17:26

mike-r, danke für Deine Antwort.

Der vorangestellte Slash hilft leider auch nicht. Ich hatte auch schon ../ versucht. Gleichfalls kein Ergebnis.

Was meinst Du mit "das CSS per {cms_stylesheet} aufzurufen"? Das steht doch in meinem Template!

Danke!

jester

mike-r · 04. Februar 2012 18:52

mach mal rechte Maustaste auf die Stelle, wo das Bild sein soll, und dann: Hintergrundbild anzeigen. Dann siehst Du unter Umständen, was am Pfad falsch ist.
Alternativ oder gar besser mit Firebug das Element untersuchen.

Zu cms_stylesheet: auf der zugehörigen Webseite, so ich das richtig interpretiere, ist das SO nicht eingebunden, da die CSS per PHP eingebunden sind (Vorgehensweise beim alten Tag stylesheet)

Edit: Btw.: ICH sehe das Bild. Ein konkreter Link, wo es nicht geht, wäre hilfreich.

Beitrag geändert von mike-r (04. Februar 2012 18:54)

NaN · 04. Februar 2012 18:53

Das ist doch genau das Problem, was ich hier schonmal angesprochen und ausführlich erklärt hatte: http://www.cmsmadesimple.de/forum/viewt … 573#p15573

jester · 04. Februar 2012 19:15

mike-r schrieb:

mach mal rechte Maustaste auf die Stelle, wo das Bild sein soll, und dann: Hintergrundbild anzeigen. Dann siehst Du unter Umständen, was am Pfad falsch ist.
Alternativ oder gar besser mit Firebug das Element untersuchen.

Auf der Stelle ist der Menüeintrag für Hintergrundbild anzeigen deaktiviert, das heißt für mich, der Browser nimmt gar nicht erst wahr, dass da ein Bild sein soll.

mike-r schrieb:

Zu cms_stylesheet: auf der zugehörigen Webseite, so ich das richtig interpretiere, ist das SO nicht eingebunden, da die CSS per PHP eingebunden sind (Vorgehensweise beim alten Tag stylesheet)

Sorry, aber den Satz verstehe ich überhaupt nicht.

mike-r schrieb:

Edit: Btw.: ICH sehe das Bild. Ein konkreter Link, wo es nicht geht, wäre hilfreich.

Das, was Du online gesehen haben dürftest ist mein 2011er Projekt, das noch unter 1.9.4.3 läuft (und wo ich mich noch nicht rantraue, das Update zu machen, so lange ich noch so viele Fehler mache bzw. nicht weiß, was sich noch alles geändert hat.

Jetzt geht es um ein neues Projekt, das ich derzeit nur lokal auf einem USB-Stick mit XAMPP laufen habe. Daher kann ich leider nichts zeigen.

jester · 04. Februar 2012 19:23

NaN schrieb:

Das ist doch genau das Problem, was ich hier schonmal angesprochen und ausführlich erklärt hatte: http://www.cmsmadesimple.de/forum/viewt … 573#p15573

Als ich Deinem Link folgte und Dein Posting von gestern sah, dachte ich "Oh, wie peinlich, mal wieder nicht genau genug gelesen." sad

Doch dann habe ich die von Dir genannten Versionen eingesetzt und es wird angezeigt ... nix!

Ich habe getestet:

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[uploads_url]]/images/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[uploads_url]]images/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[uploads_url]]/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[uploads_url]]logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[uploads_url]]uploads/images/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[uploads_url]]/uploads/images/logoline.jpg') center.top no-repeat;

und dann nochmal das gleiche in grün:

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[root_url]]/uploads/images/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[root_url]]uploads/images/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[root_url]]/images/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[root_url]]images/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[root_url]]/logoline.jpg') center.top no-repeat;

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[root_url]]logoline.jpg') center.top no-repeat;

Jetzt bin ich mit meinem Latein echt am Ende. Ich habe auch schon x-mal nachgesehen, ob das Bild tatsächlich hochgeladen ist. Ja, es wird angezeigt, wenn ich im File manager darauf klicke. Der Browser gibt dann folgende URL aus:

Hier klicken, um den Code zum Kopieren zu markieren

http://localhost/fimgg/uploads/images/logoline.jpg

Was kann es denn noch sein?

NaN · 04. Februar 2012 19:57

Hm. Das sieht soweit alles richtig aus. Bis auf das hier: center.top
Der Punkt muss da weg bzw. durch ein Leerzeichen ersetzt werden.

jester · 04. Februar 2012 20:16

Punkt ist weg. Grafik wird nicht angezeigt. sad

nicmare · 04. Februar 2012 20:23

das ist schonmal falsch: center.top
richtig wäre: center top

das ist auch falsch: background-image
richtig wäre: background

Beitrag geändert von nicmare (04. Februar 2012 20:24)

jester · 04. Februar 2012 20:25

Jetzt wird es spannend.

Ich habe nun einfach mal peu a peu die Zusatzparameter center, top und no-repeat rausgenommen.

Als nur noch

Hier klicken, um den Code zum Kopieren zu markieren

background-image: url('[[uploads_url]]/images/logoline.jpg');

übrig war, war endlich mein Bild zu sehen. Problem:

Wenn ich nur den "nackten" Bildaufruf habe, wird die Grafik angezeigt, aber wiederholt. Sobald ich "no-repeat" wieder einsetze, ist kein Bild mehr zu sehen. Dann bleibt auch der Kontextmenüeintrag "Hintergrundgrafik anzeigen" grau.

Wie kann ich denn nun verhindern, dass die Grafik mehrfach angezeigt wird?

nicmare · 04. Februar 2012 20:26

einfach mal lesen was ich geschrieben habe… wink

jester · 04. Februar 2012 20:28

nicmare schrieb:

das ist schonmal falsch: center.top
richtig wäre: center top
das ist auch falsch: background-image
richtig wäre: background

nicmare - DAS WAR ES (sorry fürs Schreien, das musste raus!)

Hier klicken, um den Code zum Kopieren zu markieren

background: url('[[uploads_url]]/images/logoline.jpg') center top no-repeat;

funktioniert! Grafik nur 1x und sie wird angezeigt.

Ich danke Euch allen! smile kiss big_smile

Jetzt kann ich für heute erst mal Schluss machen. Morgen geht's dann mit den anderen Punkten weiter...

mike-r · 05. Februar 2012 12:28

Tja, auf's einfachste kommt man zuletzt: die Fehlerkonsole des Browsers oder der CSS-Validator: http://jigsaw.w3.org/css-validator/

Forum für CMS/made simple

#1 04. Februar 2012 15:25

[GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#2 04. Februar 2012 16:00

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#3 04. Februar 2012 17:26

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#4 04. Februar 2012 18:52

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#5 04. Februar 2012 18:53

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#6 04. Februar 2012 19:15

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#7 04. Februar 2012 19:23

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#8 04. Februar 2012 19:57

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#9 04. Februar 2012 20:16

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#10 04. Februar 2012 20:23

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#11 04. Februar 2012 20:25

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#12 04. Februar 2012 20:26

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#13 04. Februar 2012 20:28

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

#14 05. Februar 2012 12:28

Re: [GELÖST] Darstellung einer Grafik mittels url(Pfad/datei.jpg) im Stylesheet

Fußzeile des Forums