Computer Hardware Forum - TweakPC

Computer Hardware Forum - TweakPC (https://www.tweakpc.de/forum/)
-   Programmiersprachen (https://www.tweakpc.de/forum/programmiersprachen/)
-   -   HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern (https://www.tweakpc.de/forum/programmiersprachen/37972-html-css-tabellenhintergrund-maus-kontakt-aendern.html)

Fabian 22.06.2006 22:04

HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Hallo,

ich würde gerne einen Tabellenhintergrund bei Mauskontakt umfärben.
Soetwas gibt es auf vielen Webseiten (z.B.[URL="http://www.tagesschau.de/"]Tagesschau[/URL] in der obersten Leiste ).

Wie sieht der Code für solch ein Verhalten aus?

Texthintergrund kann man ja recht einfach ändern:
[CODE]<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; }
</style>[/CODE]

mondrian 22.06.2006 22:43

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Mit CSS geht es eigentlich wie gehabt per :hover. Also z.B.
[code] td:hover{background-color:red}[/code] Beim Internet Explorer muß dann aber ggf. nachgeholfen werden weil der CSS nicht ordentlich unterstützt.

Das Tageschaubeispiel ist wohl kein Tabellenlayout, dort meinst du vmtl. eine besonders gestaltete Liste, die a-tags, also Links enthält, womit der IE (:hover) besser klarkommt.

Ggf. kannst du aber auch etwas per JavaScript für den IE nachhelfen.

Fabian 22.06.2006 22:56

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Danke für die Antwort, IE-User sind mir eigentlich ziemlich egal. Am liebsten würde ich meine Besuchern per Sicherheitslücke im IE direkt Firefox installieren. :-)
Ne Spass bei Seite ...

Das klappt ja jetzt schon ganz gut:
[CODE]tr:hover{background-color:#5D5C96}[/CODE]

Wie kann ich diesen Aufruf aber jetzt noch mit einer Klasse verbinden? Ich will ja nicht jedes Tabellenelement mit der Maus umfärben.

Exit 23.06.2006 08:06

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Nana - sowas macht man nun wirklich nicht.

Blöderweise sind viele Leute auf Arbeit auf den IE angewiesen, weil sie nix anderes installieren dürfen. Ich bin momentan auch nur mit dem IE unterwegs.

Fabian 23.06.2006 08:53

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
War ja auch nicht so gemeint, ich gebe dir schon recht: Sollte mit jedem Browser Besuchbar sein die Webseite. Aber das ist sie ja auch: [URL="http://www.fabolu.de/"]Fabolu.de[/URL]

Aber ob die bunten Hintergrundwechsel jetzt bei einem Browser funktionieren oder nicht, ist mir ehrlich gesagt recht egal. Beim IE bekomme ich es auch nicht hin, dass kein Space zwischen dem Titelbild und der Texttabelle ist - oder anders gesagt, ich habe es nicht hinbekommen, dass es bei allen Browsern gleich aussieht.

Aber wie kann ich jetzt einer speziellen Klasse von <tr> diese Wechselfarbe beibringen? Wie sieht dafür der CSS-Code aus?

Etwas in dieser Richtung müsste doch gehen
[CODE]<td class="menu"> ...
</td>[/CODE]
Aber wie definiere ich oben im CSS die Hover-Farbe nur für eine spezielle Klasse?

PS: Für die Arbeit [URL="http://www.portableapps.com/"]PortableApps[/URL]

TwinView 23.06.2006 09:14

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Müsste irgendwas aus menu.td:hover oder td.menu:hover sein, kanns leider grad nicht genau sagen. Musst mal probieren :)

Fabian 23.06.2006 09:40

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Supi ... so funktioniert es: [URL="http://www.fabolu.de/"]Fabolu.de[/URL]

[CODE]<style type="text/css">
.menu {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px}
td.menu:hover{background-color:#5D5C96; }
</style>[/CODE]

und dann in der Tabelle

[CODE]<td class="menu">
blabla
</td>[/CODE]

Vielen Dank!

PS: Wie wäre denn der IE zufrieden zu stellen?

mondrian 23.06.2006 13:24

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Der Firefox (1.503) war bei mir nicht zufrieden mit dem Code (kein Hovereffekt).

So schaut es besser aus:
[code]td.menu:hover{background-color:#5D5C96; }[/code]
Für den IE läßt sich was per Javascript machen, wenn du aber ein HTML-Menu per Listen machst kannst du wieder die a-tags, und damit CSS, verwenden, vgl. auch [URL="http://www.lipfert-malik.de/webdesign/tutorial/bsp/listenCSSmenu.html"]Css-Layout Listen-Menu crossbrowser[/URL]

Der Code welcher deine innere Tabelle für das Menu ersetzt sieht dann grundsätzlich so aus (die Stylenagaben natürlich oben im Head oder in ein externes stylesheet):

[code]<style type="text/css">
html, body {margin:0;padding:0;}
body{background-color:#000033;color:#cccccc;}
#menu {margin:0;padding:0;list-style:none}
#menu a, #menu li {display:block;margin:0;padding:0;}
#menu a {color:gold;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
width:160px;padding:.6em;text-decoration:none;}
#menu a:hover{background-color:#5D5C96;}
#menu li.ff {width:160px;text-align:center;}
#menu li.ff a {width:44px;height:44px;margin:auto;margin-top:2em}
#menu li.ff a:hover{background-color:#000033; }
</style>
<ul id="menu">
<li><a href="extpage.php?page=www.tweakpc.de" target="_top">TweakPC</a></li>
<li><a href="extpage.php?page=forum.tweakpc.de" target="_top">TweakPC-Forum</a></li>
<li><a href="extpage.php?page=www.fabolu.de/wabaclan/index.htm" target="_top">WaBa-Clan</a></li>
<li><a href="extpage.php?page=www.fabolu.de/haeppieaua/index.htm" target="_top">H&auml;ppieAua</a></li>
<li><a href="extpage.php?page=bscw.fit.fraunhofer.de" target="_top">BSCW-Webspace</a></li>
<li><a href="index.php?page=slideshows" target="_top">Slideshows</a></li>
<li><a href="index.php?page=studium" target="_top">Physik-Studium</a></li>
<li><a href="facharbeit/index.html" target="_blank">Facharbeit - Milikan</a></li>
<li><a href="index.php?page=software" target="_top">Software f&uuml;r jeden PC</a></li>
<li><a href="index.php?page=vpn" target="_top">VPN-Einrichtung</a></li>
<li class="ff"><a href="http://www.mozilla.com/firefox/" target="_blank">
<img src="images/firefox_love.gif" alt="Firefox Logo" width="44" height="44" border="0"></a></li>
</ul>[/code]

Fabian 23.06.2006 13:40

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Oh, ich hatte es gar nicht mit Firefox ausprobiert. Jetzt sollte es funktionieren. Auf eine Listenansicht werde ich aber nicht umsteigen.

mondrian 23.06.2006 13:56

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
[quote=Fabian]Auf eine Listenansicht werde ich aber nicht umsteigen.[/quote] Wieso Ansicht bzw. "Listenansicht"? Hast du den Code mal angeschaut?
Das Ergebnis schaut ziemlich gleich aus, nur dass die Verwendung der Liste
(semantisch) richtigeres HTML ist, was einige Vorteile haben kann. Hast du
ein CMS was Tabellen benötigt o.ä.?

mondrian 23.06.2006 14:13

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Hier noch Code für einen Hovereffekt per JavaScript als Workaround für den IE:
[code]<td
[COLOR=Sienna]onmouseover="this.style.backgroundColor='#5d5c96'"
onmouseout="this.style.backgroundColor='#000033'"[/COLOR]
class="menu">
<a href="http://www.fabolu.de/extpage.php?page=www.tweakpc.de"
target="_top">TweakPC</a>
</td>[/code]
Du könntest natürlich auch ein externes Script nehmen, welches nach dem Laden
der Seite alle td mit der Klasse "menu" sucht, aber so ists vielleicht einfacher.

Ansonsten würde ich heutzutage aber weniger Layout-Tabellen im HTML-Code verwenden
und mehr mittels CSS gestalten.

Fabian 23.06.2006 14:13

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Ich bastel das einfach mit einem Texteditor zusammen, kein CMS oder ähnliches.

Deine Listenansicht ist wirklich nicht schlecht. Damit klappt es sogar auch im Internet Explorer.

Nur leider habe ich es noch nicht hinbekommen, dass die Tabelle bei allen Browsern gleich breit ist. Es sind immer ein oder 2 Pixel Unterschied.

mondrian 23.06.2006 14:37

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
[quote=Fabian]Nur leider habe ich es noch nicht hinbekommen, dass die Tabelle bei allen Browsern gleich breit ist. Es sind immer ein oder 2 Pixel Unterschied.[/quote] Pixelgenau ist natürlich bei typischem CSS-Layout schwierig zu realisieren.
Beim IE kommt es auch noch auf den Doctype an wie er sich verhält ("box-bug").

Dann hatte ich der Einfachheit halber den li und den a gleiche Breiten gegeben,
ohne mir Gedanken über padding o.ä. zu machen, welches dann auch per Pixel
statt em angeben werden kann.

Wenn du es für Opera und Mozilla (Konqueror?) gleich hingekriegt hast mit
(ggf. margin usw. bei den ul und li) ist es eigentlich schon gut, denn dann läßt sich
für den IE sehr einfach eine Weiche im CSS einbauen:
[code]
#menu a {width:160px}
[COLOR=Sienna] * html[/COLOR] # menu a {width:150px}[/code]
Wenn es bei komplexeren Geschichten ganz schlimm kommt und der IE in den Listen
gar nicht will hilft u.U. auch die Angabe von float, wie i.d. o.g. Link oder ähnlich.


Hab gerade mal online geschaut, sieht doch schon gut aus.
Der Zeilenabstand ist beim IE anders, das kann vmtl. per float (und clear) geregelt
werden, aber vmtl. auch einfacher über line-height oder die Höhe oder z.B. margin.

(Ungetestet)
[code]
#menu a {line-height:16px;margin-top:6px;margin-bottom:6px;}
[COLOR=Sienna] * html[/COLOR] # menu a {line-height:14x;margin-top:2px;margin-bottom:2px}[/code]

Dann ist vielleicht beim Firefox ein 1Pixel Abstand am Menu rechts, da müsste
sich aber auch was finden lassen.

Fabian 23.06.2006 15:16

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
VIELEN DANK!

Es funktioniert soweit. Ich habe die Tabelle für das Menü nun auf eine fixe Breite gesetzt und bei den Menu-Tags die Breite herausgenommen. Damit klappt das nun wunderbar.


Komisch finde ich, dass zwischen meinem Logo und dem weiteren Text immer wieder ein blauer Balken (rund 4 Pixel) entsteht, wenn man Links auf der Webseite nutzt. (z.B. die unteren im Menü) Wenn man die Webseite neu lädt, dann verschwindet dieser Platzhalter zwischen dem Logo und der Haupttabelle.

Dieses Verhalten tritt nur auf, wenn in den eingebundenen Dateien nicht nochmals <body class="kontext"> steht. Die Dateien binde ich über PHP mit folgendem Befehl ein: include("./index_menu.php");

mondrian 23.06.2006 16:39

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Eine Möglichkeit ist auch ganz auf Tabellen zu verzichten und alle formatierenden
Angaben im CSS zu haben, dadurch wirds einheitlicher und im Idealfall übersichtlicher,
zumal du ja bereits jetzt die drei Bereiche Logo, Navigation und Content hast,
allerdings wird es irgendwo u.U. natürlich auch andere Probleme geben.

Würde vmtl. prinzipiell so ausschauen:
[code] #menu {float:left}
#inhalt{padding-left:130px}
</style>
<body>
<p id=logo><img ></p>
<ul id=menu></ul>
<div id=inhalt></div>
</body>[/code]
Mit CSS gibt es verschiedene Möglichkeiten die Elemente zu positionieren,
statt float könnte auch mit position gearbeitet werden. Tabellen sind jedoch
manchmal, gerade beim IE, auch flexibler.


Vielleicht kannst du es aber jetzt erstmal einfach mit Höhenangaben bei den
beteiligten Elementen versuchen, oder mit einer CSS-Angabe für den Body
ähnlich wie bei .kontext.

Also z.B.:
[code] body{background-color:#000033;color:#cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;}[/code]
und/oder

[code] <td [COLOR=Sienna]height="130"[/COLOR] colspan="2">
<p>
<a href="http://www.fabolu.de"><img
[COLOR=Sienna] width="1000"
height="130"[/COLOR]
src="http://www.tweakpc.de/forum/images/toppic.jpg" border="0" alt="Logo der Webseite"></a>
[COLOR=Sienna]</p>[/COLOR]
</td>[/code]
Wahrscheinlich ist hier im <td> der p-Tag sowieso nicht nötig, oder du kannst vielleicht noch
margin und padding verändern.


[U][B]Nachtrag:[/B][/U]

Mir ist noch aufgefallen dass du statt einem zwei body-Tags im Code hast,
vielleicht kannst du das noch irgendwie ändern und den zweiten weglassen
oder notfalls durch ein <div> ... </div> ersetzen?
[FONT=Fixedsys][COLOR=Navy][I] <body class="kontext">[/I][/COLOR][/FONT]

Fabian 24.06.2006 12:37

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Irgendwie brauchen Firefox und Camino den zweiten Body-Tag, damit sie keinen Platz zwischen dem Hompagelogo und der eingefügten Seite lassen. Ich verstehe das zwar nicht, weil das Body-Tag erst in der Tabelle unten eingesetzt wird und somit eigentlich gar keinen Unterschied für die obere Tabelle machen sollte - aber es ist so.

Vielleicht hat jemand noch einen Tip ... ansonsten schonmal vielen Dank für die super Hilfe!

mondrian 24.06.2006 14:33

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Das hier:
[code][COLOR=Sienna]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">[/COLOR]
<html><head>
[/code] und ggf. noch das:
[code]<tbody><tr>
<td[COLOR=Sienna] height="130"[/COLOR] colspan="2">[/code] mögen vielleicht schon helfen, bei Problemen mit dem IE müßtest du vielleicht nochmal
nach "Doctypeswitching" und "Rendermodus" googeln.

Dann kannst du nochmal schauen ob oder wo du die Schriftänderungen per CSS
durch class="kontext" benötigst.

Ausserdem wäre es wohl hilfreich wenn du dich noch etwas mehr mit CSS beschäftigst,
da kannst du eigentlich elegeanter Abstände erzeugen als per leerer Absätze.
Jetzt hast du übrigens die id "menu" doppelt, da wäre es wenn du mehrere solcher
Listen benötigst richtiger Klassen zu verwenden, also [COLOR=Sienna][I]<ul class="menu">[/I][/COLOR] und im
CSS dann statt [I]#menu [/I]einfach[I] .menu[/I] oder u.U. besser [I][COLOR=Sienna]ul.menu[/COLOR][/I] .

Fabian 24.06.2006 15:14

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
Ich werd mich wohl wirklich mal etwas ausgiebiger mit CSS auseinander setzen müssen.

Was ist der Unterschied zu Klassen?

Danke schonmal für deine Tips ...

tele 25.06.2006 16:27

AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
 
id sollte nur einmal verwendet werden, um z.B. ein element eineindeutig zu idendifizieren. Dann gehen z.b. javaScript sachen mit getElementById wesentlich angenehmer von der hand, als wenn du erst ein array aller menu durchgehen musst


Alle Zeitangaben in WEZ +1. Es ist jetzt 14:01 Uhr.

Powered by vBulletin® Version 3.8.10 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
SEO by vBSEO 3.5.2 ©2010, Crawlability, Inc.