zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundbild mit CSS und Link???

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.02.2006, 12:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2005
Beiträge: 46
Gifmik befindet sich auf einem aufstrebenden Ast
Standard 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
__________________
Gruß aus Gifhorn

der Gifmik
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.02.2006, 13:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.02.2006, 13:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2005
Beiträge: 46
Gifmik befindet sich auf einem aufstrebenden Ast
Standard

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!!!!
__________________
Gruß aus Gifhorn

der Gifmik
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Anpassen eines CSS Templates - JPEG als Hintergrundbild setzen soulknot CSS 1 08.05.2011 17:31
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Link im externen css Chaosneo CSS 2 18.10.2007 22:30
Hintergrundbild vor Link wuschba CSS 2 02.11.2006 12:05
Link mit Hintergrundbild, dass höher als die Zeile ist xm22 CSS 7 13.11.2005 17:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:02 Uhr.