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}
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}
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: Fabolu.de
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>
Aber wie definiere ich oben im CSS die Hover-Farbe nur für eine spezielle Klasse?
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; }
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 Css-Layout Listen-Menu crossbrowser
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):
AW: HTML/CSS: Tabellenhintergrund bei Maus-Kontakt ändern
Zitat:
Zitat von Fabian
Auf eine Listenansicht werde ich aber nicht umsteigen.
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.ä.?
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
Zitat:
Zitat von 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.
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}
* html # menu a {width:150px}
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;}
* html # menu a {line-height:14x;margin-top:2px;margin-bottom:2px}
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.
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.
Wahrscheinlich ist hier im <td> der p-Tag sowieso nicht nötig, oder du kannst vielleicht noch
margin und padding verändern.
Nachtrag:
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] <body class="kontext">[/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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
und ggf. noch das:
Code:
<tbody><tr>
<td height="130" colspan="2">
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 <ul class="menu"> und im
CSS dann statt #menu einfach .menu oder u.U. besser ul.menu .
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