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] |
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. |
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. |
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. |
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] |
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 :) |
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? |
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ä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ü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] |
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. |
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.ä.? |
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. |
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. |
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. |
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"); |
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] |
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! |
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] . |
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 ... |
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.