2 mouse hover effekte in einer tabelle?
volker
- css
0 Marc Reichelt0 Ronny0 Ingo
hi! ich moechte in 2 spalten einer tabelle unterschiedliche mousehover effekte erreichen. beide spalten sind unterschiedlichen klassen zugeordnet. wie kann ich innerhalb einer klasse eine von der zentralen css-datei abweichende festlegung fuer mousehover effekte treffen?
ich hab's fuer die klasse "main" folgendermassen probiert, hat aber nicht funktioniert, das derart zu verschachteln:
.main { font-size : 13px; font-style : normal; font-family : Verdana, Arial, Helvetica, sans-serif; color : #000000; font-variant: normal;
A:link{
font-style : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
text-decoration : none;
}
A:visited{
font-style : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
color: #DDDDDD}
A:hover{
font-style : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #EEEEEE;
text-decoration : none;
}
A:active{
font-style : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
text-decoration : none;
}
}
bin fuer alle anregungen dankbar.
volker
Hi!
Schau mal auf meine HP und dort in die CSS-Datei:
http://www.marcreichelt.de/css/standard.css
Dort findest du vielleicht die Lösung!
cu
Marc Reichelt || http://www.marcreichelt.de/
Hi!
Schau mal auf meine HP und dort in die CSS-Datei:
http://www.marcreichelt.de/css/standard.css
Dort findest du vielleicht die Lösung!
cu
Marc Reichelt || http://www.marcreichelt.de/
danke. hab ich gemacht. aber ich glaube du hast dort fuer verschiedene elemente unterschiedliche mouse hover effekte erstellt. bei mir handelt es sich aber um EIN element, naemlich eine tabelle, in der unterschiedliche mouse hover effekte realisiert werden sollen. weisst du, ob ich in folgende normale class mouse hover infos einbauen kann und wenn ja, wie:
.main { font-size : 13px;
font-style : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
font-variant: normal; text-transform: none;
padding-top: 60px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
text-align: left;
vertical-align: top;
line-height: 20px;
font-weight: bold
}
thx.
Hi!
Das mit den hovern würde ich echt nicht in CSS machen, da dort auch JavaScript ins Spiel kommt (nichts gegen JavaScript, aber ich habe selbst schon versucht so etwas zu bauen und im Endeffekt aufgegeben, da wenn die DTD nach W3C eingebunden wird das Ganze im IE nicht mehr klappt.
Bei Links gibts dafür aber ein title- und bei Bildern ein alt-Attribut.
Probiers mal damit!
cu
Marc Reichelt || http://www.marcreichelt.de/
Hallo Marc,
Das mit den hovern würde ich echt nicht in CSS machen, da dort auch JavaScript ins Spiel kommt
nein. td:hover { background-color:#F3F; } ist völlig js-frei... (das dier IE das nicht kann, ist was anderes)
(nichts gegen JavaScript, aber ich habe selbst schon versucht so etwas zu bauen und im Endeffekt aufgegeben, da wenn die DTD nach W3C eingebunden wird das Ganze im IE nicht mehr klappt.
dann hast du imho etwas falsch gemacht.
Bei Links gibts dafür aber ein title-
richtig, aber...
und bei Bildern ein alt-Attribut.
...das stimmt nicht - der IE (und ns4) zeigen das was im alt-Attribut steht an, wenn die Maus über dem Bild steht, was aber falsch ist - dafür ist auch bei Bildern (wie bei fast allen anderen Elementen) das title-Attribut zuständig.
Grüße aus Nürnberg
Tobias
Hi!
dann hast du imho etwas falsch gemacht.
Nein, da habe ich eben nichts falsch gemacht.
Damit ich den Infotext immer an der richtigen Stelle einblende, muss ich den aktuellen Scroll-Wert des Dokuments herausfinden.
Der ist im IE quasi als Attribut im Body-Tag aus JS abrufbar, verschwindet allerdings sobald man nur die DTD in die erste Zeile schreibt, die an dieser Stelle kein solches Attribut definiert. Ebenso verhält es sich mit dem height-Attribut von Tabellen.
Probiers doch mal aus!
P.S.: Von deinem Schreibstil kann ich erkennen, dass du schon einziemlich eingefleischter SelfForum-Benutzer bist. Aber auch Profis können noch etwas dazulernen! *g*
cu
Marc Reichelt || http://www.marcreichelt.de/
Hallo Marc,
Damit ich den Infotext immer an der richtigen Stelle einblende, muss ich den aktuellen Scroll-Wert des Dokuments herausfinden.
ehh... welcher Infotext? Wenn ich das richtig verstanden habe geht es lediglich um das Ändern der Hintergrundfarbe.
Der ist im IE quasi als Attribut im Body-Tag aus JS abrufbar, verschwindet allerdings sobald man nur die DTD in die erste Zeile schreibt, die an dieser Stelle kein solches Attribut definiert.
das versteh ich nicht so ganz - was hat js mit einem Doctype zu tun? Hast du ein Beispiel?
Ebenso verhält es sich mit dem height-Attribut von Tabellen.
Kunststück - <table> hat kein height-Attribut: http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE :-)
Grüße aus Nürnberg
Tobias
Hi!
Versuch mal per JavaScript im IE, den aktuellen Scroll-Wert der Seite zu erfahren.
Und dann versuch das Gleiche mit DTD.
Bei eingebundener DTD ignoriert der IE sein eigenes Attribut im Body-Tag und man bekommt den Scrollwert der Seite nicht mehr raus...
Beim height-Attribut einer Tabelle ist das genauso - es gibt keins! Auch dieses wird vom IE beim eingebundener DTD ignoriert (versuch mal ein einfaches Dokument zu erstellen, wo ein Text horizontal und vertikal per Tabelle ausgerichtet wird, und dann mit DTD).
Wenigstens das macht der IE richtig - die DTD interpretieren und die Möchtegern-Attribute rausschmeißen.
Mit Infotext meinte ich eine Beschreibung ähnlich wie beim title-Attribut, nur halt mit JS.
cu
Marc Reichelt || http://www.marcreichelt.de/
Hi,
hi! ich moechte in 2 spalten einer tabelle unterschiedliche mousehover effekte erreichen. beide spalten sind unterschiedlichen klassen zugeordnet. wie kann ich innerhalb einer klasse eine von der zentralen css-datei abweichende festlegung fuer mousehover effekte treffen?
ich hab's fuer die klasse "main" folgendermassen probiert, hat aber nicht funktioniert, das derart zu verschachteln:
.main { font-size : 13px; font-style : normal; font-family : Verdana, Arial, Helvetica, sans-serif; color : #000000; font-variant: normal;
A:link{
font-style : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
text-decoration : none;
}
[...]
Funktioniert so nicht. CSS kann man nicht verschachteln.
Mußt wohl alles einzeln definieren:
td.main {
...
}
td.main a:link {
...
}
...
Um die Schreibarbeit zu verkürzen, schau mal da: http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente und da http://selfhtml.teamone.de/css/formate/zentrale.htm#elemente (man kann Formatierungen, die für alle gleich sind, auf einmal definieren)
Grüße,
Ronny
Hi volker,
beide spalten sind unterschiedlichen klassen zugeordnet. wie kann ich innerhalb einer klasse ...
wieso einer?
... eine von der zentralen css-datei abweichende festlegung fuer mousehover effekte treffen?
wieso abweichende? irgendwie verstehe ich deine gedankengänge nicht. liegt's an den immer noch 30 grad hier?`
warum nicht im zentralen css:
.klasse1 a:hover { }
.klasse2 a:hover { }
freundliche Grüße
Ingo