Problem mit background-image

[Drathy]

Hallo zusammen!

Ich habe ein kleines Problem mit einem Hintergrundbild für einen Link. Und zwar erstelle ich den Link wie folgt und der Hintergrund wird auch angezeigt wie es sein soll:

<div style="width:62px;height:36px;background-image:url(fileadmin/img/layout/zurueck_no.gif);" ><a href="javascript:history.back()"><img border="0" src="fileadmin/img/layout/transparent.gif"></a></div>

So, nun wollte ich aber ganz gerne das css in eine externe Datei schreiben, mit dem Hintergedanken, einen hover-Effekt für den Link-Hintergrund zu erzeugen, doch sobald ich die Definition des Hintergrundes extern ablege, wird kein Hintergrund mehr angezeigt...
Ich habe es so versucht:

<div class="back_button"><a href="javascript:history.back()"><img border="0" src="fileadmin/img/layout/transparent.gif"></a></div>

css-Datei:
.back_button{
width:62px;
height:36px;
background-image:url(fileadmin/img/layout/zurueck_no.gif);
}

Was mache ich falsch bzw. warum klappt das so nicht??

Gruß,
Drathy

[wahsaga]

hi,

Ich habe ein kleines Problem mit einem Hintergrundbild für einen Link. Und zwar erstelle ich den Link wie folgt und der Hintergrund wird auch angezeigt wie es sein soll:

<div style="width:62px;height:36px;background-image:url(fileadmin/img/layout/zurueck_no.gif);" ><a href="javascript:history.back()"><img border="0" src="fileadmin/img/layout/transparent.gif"></a></div>

Warum denn noch mal ein Div um den Link?
Und wozu ein transparentes Bild im Link?

So, nun wollte ich aber ganz gerne das css in eine externe Datei schreiben, mit dem Hintergedanken, einen hover-Effekt für den Link-Hintergrund zu erzeugen, doch sobald ich die Definition des Hintergrundes extern ablege, wird kein Hintergrund mehr angezeigt...

Hast du bedacht, dass die Pfadangabe jetzt auf die Position der externen CSS-Ressource bezogen sein muss?

gruß,
wahsaga

[Drathy]

Hi, danke für die schnelle Antwort!

Warum denn noch mal ein Div um den Link?
Und wozu ein transparentes Bild im Link?

Das div, für den Hintergrund, da ich es nicht geschafft habe, dem Link einen Hintergrund zu verpassen... Mache ich es dort genauso per css, wie beim div?
Das transparente Bild habe ich, da ohne dem Bild der Hintergrund des divs nicht angezeigt wurde... :(

Kann ich denn "einfach" dem Link das entsprechende css samt Hintergrund zuordnen? Und wie lautet dann das Objekt, auf das der Link gesetzt wird? Momentan ist es ja mein transparentes gif...

Hast du bedacht, dass die Pfadangabe jetzt auf die Position der externen CSS-Ressource bezogen sein muss?

Nein, habe ich nicht...vielleicht war das das Problem...da ich absolut unsicher bin, was die korrekte Pfadangabe angeht, bitte ich da nochmal um Hilfe...die Ordnerstruktur ist wie folgt:

fileadmin
  - layout
     - img
       - zurueck_no.gif
  - css
    - style.css
  - templates
    - template.htm

Hoffe das ist verständlich. Im Template ist dann das css angesiedelt... Wie müsste also in der css-Datei der Pfad zum Bild lauten? Oder soll ich mit dem kompletten Pfad samt www.xyz.de arbeiten?

Gruß & Danke,
Drathy

[Gunnar Bittersmann]

Hello out there!

Das div, für den Hintergrund, da ich es nicht geschafft habe, dem Link einen Hintergrund zu verpassen... Mache ich es dort genauso per css, wie beim div?

Ja. Nur wirkt die width-Eigenschaft nicht bei Inline-Elementen. 'a' ist eins, wenn du das nicht mit der 'display'-Eigenschaft änderst.

Nein, habe ich nicht...vielleicht war das das Problem...da ich absolut unsicher bin, was die korrekte Pfadangabe angeht,bitte ich da nochmal um Hilfe...

... die dir SELFHTML bereitwillig gibt: [ref:file:///D:/self811/html/allgemein/referenzieren.htm#relativ@title=Mit relativen Pfadangaben relativ zum Basis-URI referenzieren].

Oder soll ich mit dem kompletten Pfad samt www.xyz.de arbeiten?

Kannst du auch. Argumente für die eine oder andere Variante sollten auf der verlinkten Seite zu finden sein.

See ya up the road,
Gunnar

PS: Was soll das eigentlich? Der Browser bietet bereits einen Zurück-Button, den die Nutzer kennen.

[Gunnar Bittersmann]

Hello out there!

[ref:file:///D:/self811/html/allgemein/referenzieren.htm#relativ@title=Mit relativen Pfadangaben relativ zum Basis-URI referenzieren].

Nein, du bekommst keinen Zugriff auf meine Festplatte.

<http://de.selfhtml.org/html/allgemein/referenzieren.htm#relativ@title=Mit relativen Pfadangaben relativ zum Basis-URI referenzieren>.

See ya up the road,
Gunnar

[Drathy]

Ah, danke Dir für den Link!

Also gebe ich dem 'a' noch die Eigenschaft 'display:block' mit...!?!
Quasi so:
<a class="back_button" href="javascipt:history.back()"></a>

css:
.back_button{
 display:block;
        height:63px;
 width:62px;
  background-image:url(../img/layout/zurueck_no.gif);
}
.back_button:hover{
 display:block;
        height:63px;
 width:62px;
  background-image:url(../img/layout/zurueck_ro.gif);
}
Und das funktioniert dann? Oder muss ich eine andere display-Eigenschaft zuweisen?

Was das soll? Hmm, eigentlich ist das um die "Usability" zu verbessern, wenn man das so nenen kann... Ich persönlich hätte auch drauf verzichtet, doch ich weiß, das mein Prof auf so etwas wert legt...von daher...^^

Gruß & danke,
Drathy

[Gunnar Bittersmann]

Hello out there!

Also gebe ich dem 'a' noch die Eigenschaft 'display:block' mit...!?!

Ja.

Quasi so:
<a class="back_button" href="javascipt:history.back()"></a>

Wie viele von den Dingern hast hast du? Ich denke, maximal eins. Also wozu eine Klasse? Eine ID wäre angebrachter.

Und das funktioniert dann? Oder muss ich eine andere display-Eigenschaft zuweisen?

Probier’s aus. Du musst für 'foo:hover' aber nicht nochmal wiederholen, was schon für 'foo' gilt.

Was das soll? Hmm, eigentlich ist das um die "Usability" zu verbessern, wenn man das so nenen kann...

Ich sehe nicht, wie die Usability verbessert wird, wenn die Webseite mit Elementen vollgepackt wird, die man nicht braucht und die vom Inhalt ablenken.

See ya up the road,
Gunnar

[Drathy]

Ahhh, ohhh....tausend Dank!!!

Klappt perfekt wie gewünscht...^^

Hab es nun so (falls die Frage nochmal auftritt):

<a id="back_button" href="javascript:history.back()"></a>

css:
#back_button{
 display:block;
 height:36px;
 width:62px;
  background-image:url(../img/layout/zurueck_no.gif);
}
#back_button:hover{
  background-image:url(../img/layout/zurueck_ro.gif);
}

Hast natürlich Recht, was Klasse & ID angeht...weiß selbst nicht, warum ich das gemacht habe, da mein übriges css auch größtenteils aus IDs besteht...^^

Ich sehe nicht, wie die Usability verbessert wird, wenn die Webseite mit Elementen vollgepackt wird, die man nicht braucht und die vom Inhalt ablenken.

Das sehe ich auch nicht, aber naja...wahrscheinlich sieht er es so, da es ja auch User geben könnte (!), die Ihre Navigations-Buttons ausgeblendet haben... ;-)

Naja, soll mir nun egal sein...

Danke nochmals für die schnelle Hilfe!!

Gruß,
Drathy

[Gunnar Bittersmann]

Hello out there!

So, nun wollte ich aber ganz gerne das css in eine externe Datei schreiben, mit dem Hintergedanken, einen hover-Effekt für den Link-Hintergrund zu erzeugen,

?? Der Gedanke von externen Stylesheets ist die strikte Trennung von Markup (HTML) und Styling (CSS), was zu mehr Übersichtlichkeit führt.

doch sobald ich die Definition des Hintergrundes extern ablege, wird kein Hintergrund mehr angezeigt...

Relative Pfade zu Bildressourcen beziehen sich jetzt auf die CSS-Ressource, nicht die HTML-Ressource.

See ya up the road,
Gunnar