background-image

[Matthias Culmey]

Hallo Forum,

habe mich in der letzten Zeit mit CSS etwas beschäftigt und versuche augenblicklich, ein zentrales Stylesheet u.a. für die Verwendung von background-images zu konstruieren. Hintergrund: Position und Größe der von mir verwendeten gif-files sind für eine Reihe von html-Seiten allesamt gleich - einzige Ausnahme bilden die Images selbst, hier findet jeweils ein anderes gif seine Position in der dazugehörigen html-Doku. Die Idee: Ein Stylesheet erleichtert das Verwalten gleichförmig gestalteter Seiten, und schnell lassen sich die Position für alle betroffenen Element einheitlich und übersichtlich verändern.
Bislang sind mir zum Thema CSS background-images fast ausschließlich Beispiele begegnet, die den Aufruf eines Bildes namentlich aus dem CSS-Dokument vorsehen z.B.:

#Beispiel-ID
{ background-image:url(folder/image.gif);
background-repeat:no-repeat;
height:300px; margin-left:20; margin-top:50px; }

Wie schaut es nun aus, wenn man innerhalb des CSS Zentraldokumentes mit einer Variablen arbeiten wollte und nicht mit einem direkten Aufruf eines bestimmten gifs - also, nicht wie in diesem Beispiel mit folder/image.gif. Der Aufruf des spezifischen gif-files sollte dann von der jeweiligen Seite in Kombination mit dem dort angelegten <div id="Beispiel"></div> ausgehen, wobei id="Beispiel" die vorliegenden Attribute für #Beispiel im CSS Zentraldokument dem Image zur Disposition stellt.

Hat sich jemand bereits mit einem solchen Konzept beschäftigt?
Gibt es zu dem genannten Verfahren einen tollen Lösungsvorschlag?

Über eine Antwort würde ich mich freuen.

so long
Matthias

[Ole]

Hallo Matthias,

in CSS mit Variablen zu arbeiten ist nicht möglich. Du wirst für jede ID ein eigenes Hintergrundbild definieren müssen.

Alternativ könntest du mit JavaScript beim Laden der Seite das entsprechende Hintergrundbild eintauschen oder vor Aufruf der Seite die CSS-Deklaration entsprechend mit z.B. PHP erzeugen.

Grüße
Ole
(8-)>

[dicon]

Hallo Matthias,

entlich mal einer mit 2xT und H ;o)...

Gibt es zu dem genannten Verfahren einen tollen Lösungsvorschlag?

Ergänzend zu Ole vielleicht noch: welches Konzept, also JS oder PHP, sich am besten
eignet, hängt nicht zuletzt vom Gesamtkonzept deiner Seite ab. Ich persönlich bevorzuge
für Projekt mit hoher Content-Dynamik die PHP-Variante. Bei Projekten mit überwiegend
statischem Inhalt nutze ich dann eher JS.

In deinem Fall kommt noch etwas anderes hinzu, das eher für PHP spricht:
Du möchtest dir eine Möglichkeit schaffen, die dir das Pflegen der Seite erleichtert.
Dem Benutzer der Seite wird kein zusätzlichen Effekt im Sinne von Interaktion
präsentiert. Im Browser kommt das Backgroundimage "fest" verdrahtet im HTML-Code an...
Imo macht es keinen Sinn, einem Clientscript die Funktionalität aufs Auge zu
drücken, die eigentlich vom Server zu leisten wäre: sauberen HTML-Code zu liefern.

Da deine Frage eher grundsätlicher Natur ist: NEIN, es gibt nicht den
"...einen tollen Lösungsvorschlag" - es gibt viele.

Wo liegen den deine generellen Präferenzen, eher auf JS oder PHP?

Grüße, dicon

[Matthias]

Hallo Forum,

habe noch eine weitere Frage zu background-images in einem zentralen CSS Doku. Besteht die Möglichkeit, ein background-image in einer externen CSS als Image für einen Link zu verwenden?
Zum Beispiel in der CSS als:

#Beispiel a:link { background-image:url(example.gif);
background-repeat:no-repeat; height:13px; width:24px; margin-left:142; margin-top:-31px; }

Um schließlich über die html-Doku mit einer ID den Aufruf zu tätigen und hier den Link zu der betreffenden Datei festzulegen ohne explizit eine Image-Datei im DIV zu integrieren?
Beispielsweise als:

<div id="Beispiel" style="visibility: visible">
  <a href="Demo.html" target="lefttopFrame"></a>
</div>

statt

<div id="Beispiel" style="visibility: visible">
  <a href="Demo.html" target="lefttopFrame">
    <img src="../../../../folder/example.gif" width="24" height="13" border="0"></a>
</div>

Das #Beispiel habe ich im CSS bereits ausprobiert und konnte feststellen, dass die Syntax so nicht funktioniert. Eventuell gibt es eine andere Möglichkeit um so etwas im CSS zu ermöglichen?

Bedanke mich im voraus für Eure Anregungen und die Mühe :-)

nächtliche Grüße
Matthias

[Ingo Turski]

Hi,

<div id="Beispiel" style="visibility: visible">
  <a href="Demo.html" target="lefttopFrame"></a>
</div>

abgesehen davon, dass visible hier unnötig ist, befindet sich nichts in dem a, das anzuzeigen oder worauf man klicken könnte und das daduurch leere DIV hat daher keine Ausdehnung.

freundliche Grüße
Ingo

[dicon]

<div id="Beispiel" style="visibility: visible">
  <a href="Demo.html" target="lefttopFrame"></a>
</div>

Ingo hat natürlich recht, wobei die Grundidee von Matthias schon richtig ist.
Wenn er irgendwas zwischen öffnenden und schließenden <a>-Tag setzt, wird die Background-
formatierung auch sichtbar.

Zwei generelle Anmerkungen vielleicht noch:

Neben a:link sollte min. noch eine Formatierung für a:visited existieren - das
Hintergrundbild verschwindet im aktuellen Beispiel nach dem "click" und hinterlässt: Leere.

Meiner Erfahrung nach macht es Sinn für derartige Formatierungen das class-Attribut zu
verwenden. Da das id-Attribut als eindeutiger Bezeichner für ein Element auch
nur 1x im Code auftauchen sollte,  müsste sonst für identische Elementformatierungen
immer eine neue css-Anweisung geschrieben werder, halt nur mit wechselndem Namen.
Das class-Attribut wird im css einmalig definiert und kann im HTML beliebig oft
auftauchen.

Grüße, dicon

[Matthias]

Hallo dicon,
 hallo Forum,

vielen Dank für Eure Bemühungen.
Nach einigen Versuchen und diversen Denkpausen konnte ich eine brauchbare Lösung erzielen:
Habe schlicht und ergreifend innerhalb des betreffenden Ankers eine ID für den gewünschten Hyperlink gesetzt und auf der CSS mit meinem #Image-File beantwortet. Mensch, warum kommt man auf die naheliegenden Lösungen immer zum Schluss.

Hoffe nur, dass die PC-Browser damit klar kommen, mit meinen diversen Mac-Browsern gab es keinerlei Schwierigkeiten.

Damit wäre der Hyperlink über den Aufruf im CSS gelöst :-)
Mit dem Austauschen der Bilder bin ich noch nicht weiter, aber da wird sich auch noch was finden.

Viele Grüße an Euch, inbesondere an dicon, der mir den Denkanstoss gab, und besten Dank für das "Ohr", was ihr mir geliehen habt.

Matthias

(PS): Hoffe sehr, mich demnächst revanchieren zu dürfen :-)

[Matthias]

Hallo Ole,
 hallo dicon,

besten Dank für Eure Antwort.

Da ich mit PHP noch keinerlei Erfahrung habe, würde ich mal bei Euch Nachfragen wollen, wie eine solche CSS-Deklaration über einen PHP Aufruf ausschauen könnte. Wisst ihr um einen schlauen Thread, Link, Forum etc., der aussagekräftige Informationen speziell zu dieser Anwendung liefert?
Oder habt ihr eventuell Teile eines Codes oder weiterführende Überlegungen für eine solche Anwendung parat?

Soweit ich augenblicklich sagen kann, würde ich vermutlich von JavaScript absehen wollen, um nicht jede betreffende Page mit dem JS-Befehl zu versehen. Bezüglich PHP fehlt mir die Einschätzung, ob hier über ein einzelnes zentrales Dokument gearbeitet werden kann, oder ob innerhalb jeder betreffenden Seite eine PHP-Befehl implementiert werden müsste.

Würde mich freuen, wenn ihr zu dazu noch vertiefende Information geben wolltet.

Macht's man gut
Matthias

[dicon]

Hallo Matthias,

Da ich mit PHP noch keinerlei Erfahrung habe...

Hmmm... da wird's jetzt schwierig. Auch wenn die Antwort weder gern gesehen, noch
hilfreich ist: Es bringt nichts, Beispielcode oder auch nur Denkanstöße zu
posten, wenn dir grundsätzliche Sachen fehlen. An dieser Stelle bist du gefordert, dir
das Basiswissen anzueignen. Nicht wirklich ein Einstieg, aber gut, um sich einen
ersten Überblick zu verschaffen: die Doku auf php.net(eng). Hab ich noch nicht
ausprobiert, sieht aber hilfreich aus: die SELFHTML-PHP-Linksammlung.

Wichtig ist, dass du von Anfang an verstehst, dass PHP serverseitig läuft (anders als JS).
Was PHP an den Browser liefert, muss für diesen interpretierbar sein, also z.b. valider HTML-Code.
Die komplette Navigationsstruktur für diese Site wird z.b. durch ein php-script mit insgesamt
235 Zeilen Code generiert. In Kombination mit CSS entsteht so nicht nur die Struktur,
sondern das gesamte look-and-feel, alles ohne JS. Die mouseover- /Verweise-Effekte
sind übrigens nach dem Prinzip gelöst, dass Du weiter unten hinterfragt hast.

Um dann doch noch ein paar konkrete Antworten zu geben:

...von JavaScript absehen wollen, um nicht jede betreffende Page mit dem JS-Befehl zu versehen.

Da möchte ich schnell noch was geradebiegen. Es ist keineswegs so, dass du, nur
weil eine Seite js-script-gelöste Funtionalität enthält, JS als Code fest im HTML-Code,
und damit auf jeder betreffenden Seite neu, fest verdrahten musst. Das geht
nach diesem Prinzip wie beschrieben, oder etwas anders auch so.

Bezüglich PHP... ob hier über ein einzelnes zentrales Dokument gearbeitet werden kann...

Ein ganz klares JA. Sicher eine stilistische Frage, aber ich habe mir irgendwann mal
angewöhnt, alle übergreifenden Umgebungsvariablen in eine Art Config.php zu schreiben.
Diese wird dann per include mit einer Codezeile überall eingebunden, wo sie gebraucht wird.

Grüße, dicon

[Matthias]

Hallo dicon,

vielen Dank für Deinen präzisen, sachlichen und sehr ausführlichen Ansatz. In eine Aussage kanalisierend: Puh, mal gucken, wie es wird.

Versuche erst mal, die unterschiedlichen Aspekte und Deine "link list" zu sondieren und das "für und wieder" der jeweiligen systematischen Konzepte für meine bestehende Anwendung zu erfassen - das dürfte wohl ein paar Tage dauern.
Aber wie heißt es so schön: "Der Apetit kommt beim Essen" - und mit dem Wissensdrang ein brauchbares Ergebnis, bleibt zumindest zu hoffen ;-)

Melde mich dann, sobald Neuigkeiten habe.
Bis dahin werde ich mal schauen, wie ich so an den Start komme.

Vielen, lieben Dank für Deine großartigen Bemühungen
Matthias

[Detlef G.]

Hallo Matthias

#Beispiel-ID
{ background-image:url(folder/image.gif);
background-repeat:no-repeat;
height:300px; margin-left:20; margin-top:50px; }

... Der Aufruf des spezifischen gif-files sollte dann von der jeweiligen Seite in Kombination mit dem dort angelegten <div id="Beispiel"></div> ausgehen, wobei id="Beispiel" die vorliegenden Attribute für #Beispiel im CSS Zentraldokument dem Image zur Disposition stellt.

Du könntest jeder Seite eine eigene Id geben (z.B. <body id="Startseite">)
Im CSS verwendest du dann den Nachfahrenselektor.

#Beispiel-ID {  
 background-repeat:no-repeat;  
 height:300px; margin-left:20; margin-top:50px;  
}  
#Startseite #Beispiel-ID {  
 background-image:url(folder/startseite.gif);  
}  
#andereSeite #Beispiel-ID {  
 background-image:url(folder/andereseite.gif);  
}  

Auf Wiederlesen
Detlef

[Matthias]

Hallo Detlef,

salopp formuliert: Ich bin wirklich von der Pfanne !!!
Das ist genau der Lösungsansatz, den ich mir vorgestellt hatte.
Durch die Kombination mit einer spezifischen Body-ID und den gültigen Attributen, die für einen Großteil der betreffenden Seiten gelten, lässt sich jetzt alles bestens in der CSS managen.
Wenn die gängigen Browser mitspielen, bleiben hierfür keine Wünsche offen.

Geweiht sei der Boden auf dem Du wandelst ;-)
Damit hast Du mir wirklich geholfen.

Mach's man gut und viele Grüße an Dich
Matthias