HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

**Thorben77**

Wenn man für die Links display: block festlegt und den Innenabstand (padding) der Tabellenzellen und den Außenabstand (margin) der Links auf 0 setzt, füllen die Links die ganze Tabellenzelle aus.
Dann dürfte es nicht mehr auffallen, wenn das Hintergrundbild für den Link und nicht die Zelle festgelegt ist.

Das passende CSS dazu wär dann:

markieren

Code:

			td {

  padding: 0;

}

a {

  display: block;

  margin: 0;

  background: url('Hintergrundbild.jpg');

}

a:hover {

  background: url('anderes%20Hintergrundbild.jpg');

}

**Alexander Roth**

Also, so klappen tut es leider nicht.
Könnt ihr mir sagen, was denn mein Fehler da drin ist?

markieren

Code:

			<tr>

  <td  onmouseover="this.style.background='url(../zelle26select.jpg)'"  onmouseout="this.style.background='url(../zelle26.jpg)'" width="100%" height="26">

    [url="http://alexander.sam-host.net/"] Home[/url]

  </td>

</tr>

Um alle Missverständnisse aufzuklären; hier ist der Code der über dieser Zelle ist:

markieren

Code:

			<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Gemeinsamer linker Randbereich</title><meta name="Microsoft Theme" content="none">

<meta name="Microsoft Border" content="none">

</head><body background="../images/links1.gif">

<p align="center">

</p>

<p align="center">

</p>

<style type="text/css">

<!--

.Navlink {COLOR: #000000; TEXT-DECORATION: none; font-family: times; font-size: 12pt; font-weight: bold;}

a:link.Navlink  {color : #000000;}

a:visited.Navlink  {color : #000000;}

a:active.Navlink  {text-decoration: none;}

a:hover.Navlink  {text-decoration: none;}

-->

</style>

<table border="1" width="160" cellspacing="0" cellpadding="4" style="border-collapse: collapse" bordercolor="#111111" >

<tr>

  <td  onmouseover="this.style.background='url(../zelle26select.jpg)'"  onmouseout="this.style.background='url(../zelle26.jpg)'" width="100%" height="26">

    [url="http://alexander.sam-host.net/"] Home[/url]

  </td>

</tr>

<tr>

Gruß Alexander

PS: @Thorben77. Ich probiere es aus. Danke.

**Thorben77**

Vielleicht solltest du auch noch am Anfang des Dokuments seinen/einen Dokumenttyp angeben, dann zwingst du die Browser nicht sofort in den Quirksmode:

markieren

Code:

			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		

**Alexander Roth**

Hi, ich weis nicht was das bewirkt hat. Jetzt klappt irdendwie alles.
Also auch die Zellen, die ich von anfang an nicht verändert habe sind machen jetzt genau das, was ich von anfang an wollte.

Also, nochmal im Klartext: Ich habe den Ratschlag von Thorben77 umgesetzt und plötzlich klappt alles.

Also danke für eure Hilfe. Ich hoffe, dass ich jetzt selbst zurechtkomme.

Vielen Vielen Dank, dass ihr euch so bemüht habt, und ich nun mein Ziel erreicht habe.

Tschüss

Alexander

Zitat von Alexander Roth:

Ich habe den Ratschlag von Thorben77 umgesetzt und plötzlich klappt alles.

In dem Zusammenhang wäre der verwendete Browser auch noch von Bedeutung gewesen. Gerade bei CSS gibt es teils gravierende Unterschiede.

**Alexander Roth**

firefox 1.5.0.9. Und der unterstützt doch css voll. Oder?

**Thorben77**

Im Firefox funktionieren CSS-Hover-Eigenschaften aber so weit ich weiß auch für andere Elemente als Links

. (Wobei ich mir nicht sicher bin, ob das im CSS-Standard vorgesehen ist.)
Eigentlich hätte ich jetzt auf den IE getippt, der lässt :hover glaub ich nur bei Links zu.

Nachtrag:

Zitat von Alexander Roth:

Und der unterstützt doch css voll. Oder?

Ich glaube, kein Browser unterstüzt wirklich alles, was CSS hergibt. Wobei dann auch noch die Frage bleibt, welche CSS-Version unterstützt wird.

**Alexander Roth**

Also für die die diesen Thread mal lesen: Ich habe es nun aus einer Kombination von Codes (die ihr mir gegeben habt) zusammengebastelt.
Auch wenn es vielleicht CSS-technisch nicht elegant ist, es funktioniert und nur das ist für mich wichtig.

Der Style Abschnitt:

zusammenfalten · markieren

XML-Code:

			<style type="text/css">

<!--

.Navlink {COLOR: #000000; TEXT-DECORATION: none; font-family: times; font-size: 12pt; font-weight: bold;}

a:link.Navlink  {color : #000000;}

a:visited.Navlink  {color : #000000;}

a:active.Navlink  {text-decoration: none;}

a:active.Navlink  {font-size: 15pt;}

a:active.Navlink  {font-weight: bold;}

a:active.Navlink  {font-family: Times New Roman;}

a:hover.Navlink  {text-decoration: none;}

-->

</style>

<style type="text/css">

<!--

td.norm

{

  font-size: 15pt;

  font-weight:bold;

  line-height: 1.55;

  padding: 0;

  width: 100%;

  display: block;

  margin: 0;

  background-image: url('../zelle26.jpg');

}

td:hover.norm

{

  background-image: url('../zelle26select.jpg');

}

//-->

</style>

Eine Zelle:

markieren

XML-Code:

			<tr>

  <td class="norm">[url="http://alexander.sam-host.net/"] Home[/url]</td></tr>

Vielen Dank nochmals an euch.

Gruß Alexander

HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

Forumregeln

Thorben77 Registriert seit: 22. Okt 2004 359 Beiträge	#13 Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver 9. Feb 2007, 17:49 Vielleicht solltest du auch noch am Anfang des Dokuments seinen/einen Dokumenttyp angeben, dann zwingst du die Browser nicht sofort in den Quirksmode: markieren Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	Zitat

Daniel G (Gast) n/a Beiträge	#15 Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver 9. Feb 2007, 18:16 Zitat von Alexander Roth: Ich habe den Ratschlag von Thorben77 umgesetzt und plötzlich klappt alles. In dem Zusammenhang wäre der verwendete Browser auch noch von Bedeutung gewesen. Gerade bei CSS gibt es teils gravierende Unterschiede.
	Zitat

Alexander Roth Registriert seit: 17. Mai 2004 Ort: Kenn 574 Beiträge Turbo Delphi für Win32	#16 Re: HTML: Anderes Hintergrundbild bei Zelle bei MouseOver 9. Feb 2007, 19:12 firefox 1.5.0.9. Und der unterstützt doch css voll. Oder? Alexander Roth Ich bin umgestiegen auf: Lazarus und Ubuntu! Alles OpenSource! Besuch doch mal: www.roth.us.ms
	Zitat