[GastForen Web allgemein HTML und CSS / Stylesheets Tabelle/Zellenfarbe bei Mouseover ändern

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Tabelle/Zellenfarbe bei Mouseover ändern

kultdialog
Beiträge gesamt: 36

30. Sep 2006, 09:50
Beitrag # 1 von 9
Bewertung:
(8268 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo liebe HDSler,

ich habe eine (für Euch wohl relativ simple) Frage bzgl. eine Navigationsleiste via CSS. Ich möchte unter zu Hilfenahme von CSS eine horizontale Naivleiste bauen und nicht nur die Textefarbe sondern auch die einzelnen Zellenfarben beim Mouseover ändern. Eine defninerte Zellenbreite möchte ich nicht haben, einfach nur die Farbenänderung.

Könnt Ihr mir da weiterhelfen? Alles was ich irgendwo finde, geht nur über Java oder sog. Event-Handler – aber das müsste doch recht einfach auch über CSS gehen oder?

Würde mich über Eure Hilfe freuen – vielen Dank.
Ich arbeite mit Dreamweaver MX.

Schönes Wochenende
Grüße Matthias
X

Tabelle/Zellenfarbe bei Mouseover ändern

ganesh
Beiträge gesamt: 1981

30. Sep 2006, 13:35
Beitrag # 2 von 9
Beitrag ID: #254018
Bewertung:
(8249 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
naja, definiere einfach eine Klasse für die TDs im CSS...

.htd hover,
.htd a:hover,
.htd a hover {
background: #c0c0c0;
display: block;
}

...

<tr><td class="htd"><a href="seite1.html">Zelle 1</a></td></tr>


als Antwort auf: [#253999]

Tabelle/Zellenfarbe bei Mouseover ändern

kultdialog
Beiträge gesamt: 36

1. Okt 2006, 14:24
Beitrag # 3 von 9
Beitrag ID: #254097
Bewertung:
(8236 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallöchen,

vielen Dank für die Hilfe. Ich weiß, ist sicherlich eine simple Sache, aber für jemanden wie mich ergibt das schon unüberwindbare Hindernisse :-(

Ok, das funktioniert auch. Jetzt habe ich nur noch ein Problem mit dem Text. Ich habe ein CSS mit versch. Textstilen definiert. Wenn ich die Zelle mit der TD-Class belege, so klappt das auch mit der HG-Farbe. Wenn ich dann allerdings den Text mit der CSS-Definition des Textstiles belege, ist die HG-Farbe wieder hinfällig. Dann habe ich versucht, in der TD-Class Definition direkt auch eine Textdefinition zu machen. Das sah dann ungefähr so aus:

.htd hover,

.htd a hover {
background: #c0c0c0;
display: block;
}

.htd a:hover {
background: #F45813;
display: block;
}

.headline {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bolder;
color: #FFFFFF;
text-transform: uppercase;
}

Aber das funktioniert auch nicht. Wie kann ich es schaffen, in einer Definition zu hinterlegen, dass sich bei Mouseober die HG-Farbe ändert und den Text zu defnieren???? Bin ich zu doof oder mache ich einen Denkfehler? Wie der Text aussehen sollte sieht man ja oben im CSS-Source.

Danke für Eure Hilfe
Grüße und einen schönen Sonntag

Matze


als Antwort auf: [#254018]

Tabelle/Zellenfarbe bei Mouseover ändern

FSt
  
Beiträge gesamt: 1961

1. Okt 2006, 14:43
Beitrag # 4 von 9
Beitrag ID: #254101
Bewertung:
(8234 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Matze

Wer bei HDS landet und sich hier Rat holt, der kann nicht zu doof sein ...

Code
.htd hover, .htd a hover { 
background: #c0c0c0;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bolder;
color: #FFFFFF;
text-transform: uppercase;
}

htd a:hover {
background: #F45813;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bolder;
color: #FFFFFF;
text-transform: uppercase;
}


Gruss
Martin


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#254097]

Tabelle/Zellenfarbe bei Mouseover ändern

kultdialog
Beiträge gesamt: 36

1. Okt 2006, 16:37
Beitrag # 5 von 9
Beitrag ID: #254114
Bewertung:
(8226 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Martin,

vielen Dank für Deine Hilfe. Aber ich weiß auch nicht . . .man fängt ja an zu zweifeln.

HG-Farbe ändert sich bei:
.htd hover,
.htd a hover {
background: #c0c0c0;
display: block;
} .htd a:hover { background: #F45813;
display: block;
}

Aber wie gesagt, Text bleibt Standardtext.

Dann habe ich Deinen Quelltext vob oben als CSS definiert. Leider funktioniert es nicht. Weder HG-Farbe noch Text (=Verdana).

Was mache ich falsch? Ich arbeite mit Dreamweaver MX und sichere die CSS als externes Dokument.css ab. Dann füge ich die CSS über "Import" in den <stlye>-bereich ein. Dann wähle ich die Zelle in der Tabelle "<td>" aus und wähle den ".htd"-Sheet aus. Mache ich da einen Fehler???

Sorry und vielen vielen Dank, Gruß
Matthias

PS: Ich kann die Seite im aktuellen Status auch mal online stellen.


als Antwort auf: [#254101]

Tabelle/Zellenfarbe bei Mouseover ändern

FSt
  
Beiträge gesamt: 1961

1. Okt 2006, 20:23
Beitrag # 6 von 9
Beitrag ID: #254134
Bewertung:
(8206 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Matthias

Mein Fehler. Da fehlt noch ein Punkt vor dem zweiten htd.
Code
.htd a { 
background: #c0c0c0;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bolder;
color: #FFFFFF;
text-transform: uppercase;
}

.htd a:hover {
background: #F45813;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bolder;
color: #FFFFFF;
text-transform: uppercase;
}


Gruss
Martin


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#254114]

Tabelle/Zellenfarbe bei Mouseover ändern

kultdialog
Beiträge gesamt: 36

1. Okt 2006, 22:33
Beitrag # 7 von 9
Beitrag ID: #254151
Bewertung:
(8194 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Nabend Martin :-)

vielen Dank, jetzt funktioniert das Ganze auch!! Danke :-) !!!!

Jetzt belästige ich Dich aber noch einmal. Die Änderung der HG-Farbe bezieht sich nur auf die Höhe der Schrift. Kann man diese .htd-Definition auch auf die ganze Zelle anwenden, so dass sich beim MouseOver die ganze Zellenfarbe ändert?

Aber wie gesagt, das Hauptsächliche funktioniert. Und dafür schon mal ganz großes Dankeschön.

Schönen Abend,
Gruß Matthias


als Antwort auf: [#254134]

Tabelle/Zellenfarbe bei Mouseover ändern

FSt
  
Beiträge gesamt: 1961

2. Okt 2006, 08:16
Beitrag # 8 von 9
Beitrag ID: #254173
Bewertung:
(8181 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Matthias

Bist Du sicher, dass Du "display: block;" eingebaut hast?
Mit welchem Browser testest Du?
Kannst Du mal Dein Code-Schnipsel online stellen?

Gruss
Martin


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#254151]

Tabelle/Zellenfarbe bei Mouseover ändern

kultdialog
Beiträge gesamt: 36

6. Okt 2006, 19:34
Beitrag # 9 von 9
Beitrag ID: #255120
Bewertung:
(8130 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Martin,

ersteinmal entschuldigung für mein langes Nichtmelden. Aber ich war die Woche über nicht da und konnte nicht auf Deine Nachricht antworten. Sorry . . . :-) !!

Aber vielen Dank dass Du so geduldig bist mit mir. Ich hänge Dir zum einen mal den Codeschnipsel meines CSS (deines) an - Display:Block ist allerdings ausgewählt. Zusätzlich, ich denke das macht Sinn, habe ich Dir mal den Link vom momentan Stand der Seite angehängt. Hier kann man auch die Navigation sehen und dass nur immer der Bereich der Schrift seine HG-Farbe ändert.
(Link: http://www.dr-thilo-jahn.de/forum/index_011006.htm)

----------------------------------------------------------
.htd a {
background: #c0c0c0;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bolder;
color: #FFFFFF;
text-transform: uppercase;
}

.htd a:hover {
background: #F45813;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bolder;
color: #FFFFFF;
text-transform: uppercase;
}
----------------------------------------------------

Kannst Dir das ja mal anschauen wenn Du Zeit hast.
Danke Dir auf jeden Fall schon einmal, gell!!

Grüße und ein schönes Wochenende.
Matthias


als Antwort auf: [#254173]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
05.02.2021 - 05.11.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 05. Feb. 2021, 13.00 Uhr - Freitag, 05. Nov. 2021, 17.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PM

Veranstaltungen
05.03.2021 - 30.04.2021

Digicomp Academy AG, Zürich oder virtuell
Freitag, 05. März 2021, 13.00 Uhr - Freitag, 30. Apr. 2021, 17.00 Uhr

Lehrgang

Im berufsbegleitenden Web Publisher Lehrgang vertiefen Sie Ihr Wissen rund um das Thema Screendesign und die Umsetzung von Websites. Wir befähigen Sie dazu selbständig und professionell Ihren Webauftritt zu planen und in die Realität umzusetzen.

Preis: CHF 3'250.–
Dauer: 8.5 Tage - Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt.

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PWEB