Anzeige

Hover Hintergrund

Hover Hintergrund | PSD-Tutorials.de

Erstellt von Kaya, 09.09.2008.

  1. Kaya

    Kaya Noch nicht viel geschrieben

    Dabei seit:
    02.05.2008
    Beiträge:
    43
    Geschlecht:
    männlich
    Hover Hintergrund
    hallo leute,

    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
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Hover Hintergrund
    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 (Text):
    1.  
    2. <td width="100" height="100"><a href="index.html">Start<a></td>
    3.  
    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 (Text):
    1.  
    2. a:link,a:visited,a:hover{
    3.    display: block;
    4.    height: 100px;
    5.    width: 100px;
    6.    background: url(normalerhg.jpg);
    7. }
    8. a:hover{
    9.   background: url(hoverhg.jpg);
    10. }
    11.  
    auf Webseiten sollten styleanweisungen im html-code (inline) nicht vorkommen. (Wartungsfreundlicher, klare trennung Inhalt-Gestaltung)
     
    Zuletzt bearbeitet: 09.09.2008
    #2      
  3. Kaya

    Kaya Noch nicht viel geschrieben

    Dabei seit:
    02.05.2008
    Beiträge:
    43
    Geschlecht:
    männlich
    Hover Hintergrund
    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?
     
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Hover Hintergrund
    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 (Text):
    1.  
    2. <td id="Homelink">
    3.  
    deine Styledefinitionen lauten dann:
    Code (Text):
    1.  
    2. #Homelink a:link,#Homelink a:visited,#Homelink a:hover{
    3.    display: block;
    4.    height: 100px /* abzügl des paddings */
    5.    width: 100px;
    6.    text-align:center;
    7.    padding-top: xxpx; /*hiermit liesse sich noch vertikal ausrichten*/
    8.    background: url(normalerhg.jpg);
    9. }
    10. #Homelink a:hover{
    11.   background: url(hoverhg.jpg);
    12. }
    13.  
    planst du mehrere solcher 100x100 Links, dann solltest du Klassen verwenden.
     
    Zuletzt bearbeitet: 09.09.2008
    #4      
  5. Kaya

    Kaya Noch nicht viel geschrieben

    Dabei seit:
    02.05.2008
    Beiträge:
    43
    Geschlecht:
    männlich
    Hover Hintergrund
    AW: Hover Hintergrund

    klasse sokie, ich habs grad mal probiert und das hovern geht jetzt :daumenhoch:
    vielen lieben dank...
     
    #5      
  6. Kaya

    Kaya Noch nicht viel geschrieben

    Dabei seit:
    02.05.2008
    Beiträge:
    43
    Geschlecht:
    männlich
    Hover Hintergrund
    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?
     
    #6      
  7. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Hover Hintergrund
    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?
     
    #7      
  8. Kaya

    Kaya Noch nicht viel geschrieben

    Dabei seit:
    02.05.2008
    Beiträge:
    43
    Geschlecht:
    männlich
    Hover Hintergrund
    AW: Hover Hintergrund

    hallo,

    gerne, nachstehend dann der code:

    tabellenbereich:

    und die css halt:

    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
     
    #8      
  9. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Hover Hintergrund
    AW: Hover Hintergrund

    Du musst, wenn du mit padding und margin arbeitest, entsprechend die Höhe und Breite anpassen.

    Wenn du zum Beispiel an jeder Seite 5px padding hast, musst du die Höhe und Breite um jeweils 10px reduzieren. Das ist das so genannte Boxmodell:
    CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell
     
    #9      
  10. Kaya

    Kaya Noch nicht viel geschrieben

    Dabei seit:
    02.05.2008
    Beiträge:
    43
    Geschlecht:
    männlich
    Hover Hintergrund
    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:
     
    #10      
x
×
×
teststefan