XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hintergrundbild mit CSS und Link??? (http://xhtmlforum.de/showthread.php?t=38608)

Gifmik 06.02.2006 12:59

Hintergrundbild mit CSS und Link???
 
Hallöchen aus Gifhorn,

ich möchte ein Hintergrundbild per CSS einstellen.
Das Hintergrundbild sollte auch den "Alt-Text" und
einen Link enthalten.

Wie muss ich dies codemäßig einbinden???

CSS:
Code:

#rollenshop {
  position:absolute;top:41px;left:402px;z-index:1;
  background-image:url(pic/Rollenshop1.gif);
  width:234; height:60;
  background-repeat:no-repeat;
  background-color: #fff;

HTML:

Code:

<div id="rollenshop"></div>
Vielen Dank im Voraus

Tigereye 06.02.2006 13:13

Hi,
du solltest das Bild als Hintergrund des Links einbinden:
HTML:
CSS:
Code:

#rollenshop {
  background: #FFF url(pic/Rollenshop1.gif) no-repeat;
  display:block;
  width:234px;
  height:60px;
  text-indent:-3000px;

Erläuterung:
Mit background:...; habe ich nur deinen Code etwas abgekürzt, der Effekt ist der gleiche wie bei deiner Schreibweise.
Das display:block braucht man, damit man dem Link (der normal Inline-Element ist) Höhe und Breite geben kann.
Du solltest bei height und width unbedingt eine Einheit angeben (ausgenommen 0), ich denke mal, du wolltest px?!
Das text-indent sorgt dafür, dass der Text innerhalb von <a>...</a> ausgeblendet wird (weiterlesen: Image Replacement).
Die absolute Positionierung ist höchstwahrscheinlich nicht nötig (wahrscheinlich geht das Ganze genauso gut mit margin und padding), wenn doch, kannst du sie ja von deinem alten Code übernehmen.

Gifmik 06.02.2006 13:27

Zitat:

Zitat von Tigereye
Hi,
du solltest das Bild als Hintergrund des Links einbinden:
HTML:
CSS:
Code:

#rollenshop {
  background: #FFF url(pic/Rollenshop1.gif) no-repeat;
  display:block;
  width:234px;
  height:60px;
  text-indent:-3000px;

Erläuterung:
Mit background:...; habe ich nur deinen Code etwas abgekürzt, der Effekt ist der gleiche wie bei deiner Schreibweise.
Das display:block braucht man, damit man dem Link (der normal Inline-Element ist) Höhe und Breite geben kann.
Du solltest bei height und width unbedingt eine Einheit angeben (ausgenommen 0), ich denke mal, du wolltest px?!
Das text-indent sorgt dafür, dass der Text innerhalb von <a>...</a> ausgeblendet wird (weiterlesen: Image Replacement).
Die absolute Positionierung ist höchstwahrscheinlich nicht nötig (wahrscheinlich geht das Ganze genauso gut mit margin und padding), wenn doch, kannst du sie ja von deinem alten Code übernehmen.

Super, funktionier so!!!

Danke!!!! :D


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:45 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020