Bild per CSS einbinden

[Tino]

Hallo,
ich habe heute meine ersten versuche mit CSS gestaretet und stehe vor einem Problem, dass einigen vielleicht recht billig erscheint. - Ich habe aber bisher nirgends eine Lösung gefunden.

Über den Style möchte ich ein Bild einbinden. im konkreten beispiel einen horizontalen Balken, der abhängig vom verwendeten Style unterschiedlich aussehen soll - rot, blau, gelb - also jeweils ein anderes gif.

wie mache ich das?

thx
Tino

[Cheatah]

Hi,

wie mache ich das?

mit background-image.

Cheatah

[Tino]

Hi,

wie mache ich das?

mit background-image.

sicher?
ein backround-image heba ich ja schon festgelegt.

jetzt möchte ich z.b.

Texte bla Texte bla Texte bla Texte bla Texte bla
Texte bla Texte bla Texte bla
Texte bla Texte bla

BALKEN

Texte bla Texte bla

der balken nun aber soll abhängig vom style unterschiedlich aussehen.

wie  lege ich das in der CSS datei fest udn wie binde ich dass dann in der page ein?

[Cheatah]

Hi,

ein backround-image heba ich ja schon festgelegt.

für ein bestimmtes Element.

Texte bla Texte bla
BALKEN
Texte bla Texte bla

<hr style="background-image:...;">

der balken nun aber soll abhängig vom style unterschiedlich aussehen.

Und an unterschiedlichen Stellen stehen, die von Inhalt und Semantik abhängen. Das bedeutet, dass ein strukturelles Element notwendig ist; aufgrund seiner Bedeutung hier also ein <hr>.

Cheatah

[Struppi]

Über den Style möchte ich ein Bild einbinden. im konkreten beispiel einen horizontalen Balken, der abhängig vom verwendeten Style unterschiedlich aussehen soll - rot, blau, gelb - also jeweils ein anderes gif.

Wieso soll ein roter, blauer oder gelber Balken ein gif sein?

Du kannst entweder mit

border-bottom: XXpx red solid;

Bereiche mit einem Balken abtrennen oder wenn du es für ein Element deiner Dokumenten Struktur hälst mit einem <hr>

hr
{
   background-color:red;
}

In CSS brauchst du für einfarbige Bereich keine GIFs mehr.

Struppi.

[Tino]

Über den Style möchte ich ein Bild einbinden. im konkreten beispiel einen horizontalen Balken, der abhängig vom verwendeten Style unterschiedlich aussehen soll - rot, blau, gelb - also jeweils ein anderes gif.

Wieso soll ein roter, blauer oder gelber Balken ein gif sein?

also prinzipiell habe ich ja ne lösung bekommen - die farben waren nur ein beispiel.
meine trenn-balken sind natürlich etwas mehr als nur in eine farbe - anfang und ende sind abgeschrägt - es ist ein schlagschatten drunter und abgeflachte kanten hat er ebenfalls. - 3D-balken halt.

bisher habe ich an der stelle wo er hinsollte eine 3-spaltige tabelle eingebunden 1.Sp: balkenanfang , 3.sp: balkenende , dazwischen mit unterschiedlicher breite das zwischenstück.

dieser weg scheint per CSS nicht möglich zu sein - selbst mit dem backgroundIMG bekomme ich ja anfang und ende nicht rein.

[Struppi]

meine trenn-balken sind natürlich etwas mehr als nur in eine farbe - anfang und ende sind abgeschrägt - es ist ein schlagschatten drunter und abgeflachte kanten hat er ebenfalls. - 3D-balken halt.

ja, soweit ist CSS noch nicht. du hast zwei Möglichkeiten, den Code weiterhin zu verrenken oder einfach pragmatisch auf das aufbauen was da ist.

Struppi.

[Tino]

habe gerade die Lösung gefunden:

Inhalt Ihrer Standard-Style-Sheets:
div.grafik { background-image:url(ihre_grafik.gif) }

Body der HTML-Seite:
<div class="grafik" style="width:200px; height:50px;">
<img src="transparent.gif" width="200" height="50" alt="Alternativtext">
</div>

das transparente gif ist für das aufhalten der größe verantwortlich.

das ganze ist aber sowieso hinfällig, da nur der Netscape eine Unterstützung für mehrere Style-Sheets in einem Dokument bietet.

[Struppi]

das ganze ist aber sowieso hinfällig, da nur der Netscape eine Unterstützung für mehrere Style-Sheets in einem Dokument bietet.

Das stimmt nicht!

Struppi.