Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Hover Hintergrund“

K

Kaya

Guest

hallo leute,

<td style="background-image:url(normalerhg.jpg);" width="100" height="100"><div align="center"><a href="index.html target="_self">Start</a></div></td>

ich habe einen textlink in einer tabelle, welches auch einen hintergrund hat, siehe oben. ich würde aber gerne den hintergrund bei einem mouseover gewechselt haben, ich habe es schon mit onmouseover probiert und eine bilddatei definiert, aber leider erfolglos.
kann mir jemand vielleicht einen tipp gegeben, was ich falsch mache oder ob das überhaupt so geht?

lg
 

sokie

Mod | Web

AW: Hover Hintergrund

wenn der div in der td nur das a Element beinhaltet, kannst du den auch weglassen um den Aufbau klarer zu gestalten.
Code:
<td width="100" height="100"><a href="index.html">Start<a></td>
das target="_self" ist eigentlich überflüssig, weil es standard ist.und nur notwendig, wenn per <base target="...."> etwas anderes angegeben ist.
stattdessen wäre eine stylebeschreibung im head der Datei (besser in einer separaten css datei) sinnvoll:
Code:
a:link,a:visited,a:hover{
   display: block;
   height: 100px;
   width: 100px;
   background: url(normalerhg.jpg);
}
a:hover{
  background: url(hoverhg.jpg);
}
auf Webseiten sollten styleanweisungen im html-code (inline) nicht vorkommen. (Wartungsfreundlicher, klare trennung Inhalt-Gestaltung)
 
Zuletzt bearbeitet:
K

Kaya

Guest

AW: Hover Hintergrund

hallo sokie und danke für deine rasche antwort.

das div habe ich nur reingemacht, damit der text zentriert ist.
ich habe schon eine externe css datei, aber ich will ja, dass dieser nur einmal hier vorkommt, sonst überschreibt er mir das ja überall.
kann ich das auch irgendwie nur einmal hier in den code reinpacken?
 

sokie

Mod | Web

AW: Hover Hintergrund

zentrieren: ja,stimmt habe ich vergessen zu erwähnen, auch hier brauchst du kein div. das text-align: center; zu den definitionen für das a-Element löst das Problem;)

nur einmal:
da bietet sich an, dieser tabellenzelle eine ID zu geben:
zB.:
Code:
<td id="Homelink">
deine Styledefinitionen lauten dann:
Code:
#Homelink a:link,#Homelink a:visited,#Homelink a:hover{
   display: block;
   height: 100px /* abzügl des paddings */
   width: 100px;
   text-align:center;
   padding-top: xxpx; /*hiermit liesse sich noch vertikal ausrichten*/
   background: url(normalerhg.jpg);
}
#Homelink a:hover{
  background: url(hoverhg.jpg);
}
planst du mehrere solcher 100x100 Links, dann solltest du Klassen verwenden.
 
Zuletzt bearbeitet:
K

Kaya

Guest

AW: Hover Hintergrund

klasse sokie, ich habs grad mal probiert und das hovern geht jetzt :daumenhoch:
vielen lieben dank...
 
K

Kaya

Guest

AW: Hover Hintergrund

ich nochmal, jetzt macht das padding top probleme, wenn ich den text weiter nach unten schieben möchte. mit text align bekomme ich den text nur horizontal mittig und deshalb wollte ich halt das padding einsetzen, aber dann verschiebt dich die ganze tabelle nach unten, auch wenn ich background no-repeat sage. wie kann ich denn den text sonst genau in die mitte zentrieren, sowohl horizontal, als auch vertical?
 

stb_87

Web-Sheriff - ohne Bild

AW: Hover Hintergrund

Hast du das padding speziell für eine Klasse/ID eingegeben oder insgesamt?

Wie sieht das denn aus? Hast du mal den Quelltext dazu?
 
K

Kaya

Guest

AW: Hover Hintergrund

hallo,

gerne, nachstehend dann der code:

tabellenbereich:

<td class="Homelink" style="width:100px; height:100px;"><a href="index.html">Index</a></td>
und die css halt:

.Homelink a:link, .Homelink a:visited, .Homelink a:active {
display: block;
text-align: center;
width:100px;
height:100px;
background: url(img/index.jpg);
}

.Homelink a:hover{
background: url(img/index_2.jpg);
}
ich möchte gerne das wort Index dann halt sowohl vertical als auch horizontal in die mitte, aber wie gesagt, wenn ich dann mit padding-top arbeite, verschiebt sich das design nach unten. habe es auch schon mit einem negativ padding-bottom probiert, aber war wohl nichts.

lg
 
K

Kaya

Guest

AW: Hover Hintergrund

ich doofkopf hätte mal besser lesen sollen, sokie hatte ja in seinem codebeispiel höhe abzüglich padding hingeschrieben :kopfpatsch:

im mozilla browser sieht es super aus, so wie es sein soll. aber diesmal macht der internet explorer nicht mit, der verschiebt das ganze wieder. wie kann ich dem denn das noch beibringen, das er das wie erwünscht anzeigen soll??? :uhm:
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
174.469
Beiträge
2.577.920
Mitglieder
65.951
Neuestes Mitglied
Lunita
Oben