✔ Tabelle mit Mousover Effekt hinterlegen

F

fschwarz

Mitglied
Also, das was ich möchte ist eigentlich ganz einfach, aber irgendwie nicht ganz machbar für mich.
Ich hab eine Tabelle mit 25 Zeilen und zwei Spalten. In der linken Spalten kommen jeweils die Logo-Bilder, in die rechte die Beschreibung.
Ich möchte für die Tabelle keine Rahmen, nirgends... Allerdings wenn ich über eine Zelle mit der Maus gehe, "mouseover", soll die einzelne
Zelle einen dünnen grünen Rahmen bekommen, wenn ich mit der Maus weggehe, soll er wieder verschwinden.

HTML: 
<table style="width: 700px; border-style: solid; border-width: 0px;" align="center" border="0" rules="none">
    <tbody>
        <tr>
            <td>
                <p><span style="background-color: #ffffff;"><span style="font-size: 14pt;">Hersteller</span></span></p>
                <p> </p>
                <p> </p>
            </td>
            <td>
                <p> </p>
                <p><span style="background-color: #ffffff;"><span style="font-size: 14pt;">Hauptprodukte</span></span></p>
            </td>
        </tr>
        <tr>
            <td><img alt="acer" src="images/stories/Partner-Fotos/acer.gif" height="63" width="160" /></td>
            <td>Monitore, Komplettsysteme, Server</td>
        </tr>
        <tr>
            <td><img alt="amd" src="images/stories/Partner-Fotos/amd.jpg" height="55" width="146" /></td>
            <td>Prozessoren, Mainboards</td>
        </tr>
        <tr>
            <td><img alt="avm" src="images/stories/Partner-Fotos/avm.gif" height="85" width="119" /></td>
            <td>ISDN-Karten, Softwarerouter</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<br class="_mce_marker" /><br />

Style und mouseover kann ich ja nicht kombinieren oder ?
 
Hi,

doch kannst du, denn standardkonforme Browser interpretieren dieses CSS:

CSS: 
td:hover { border: thin solid #ddd; }

Und für die, die das so nicht verstehen, gibt's als Nachhilfe http://code.google.com/p/ie7-js/, damit sie sich mind. IE7-kompatibel verhalten, der :hover nicht nur allein für das <a>-Element unterstützt :-)

mfg Maik
 
Dann legst du eben für die Tabelle eine gesonderte CSS-Datei an, und rufst sie im benötigten HTML-Dokument auf.

Ansonsten packst du den gezeigten Einzeiler in deinem HTML-Dokumentheader in ein <style type="text/css">...</style> :-)

Achja, noch ein Tipp: Damit beim Hovern in der Tabelle nichts verwackelt und verschoben wird, solltest du einen unsichtbaren Rahmen mit "1px" Stärke vorsehen, der die Hintergrundfarbe enthält.

mfg Maik
 
super danke... ich habs nun so gemacht:

Code: 
table.contenttoc {
  margin: 15px;
  padding: 15px;
  background: none;
  
}

table.contenttoc td {
  padding: 15px 15px;
  border: thin solid #FFFFFF
}

.contenttoc td:hover {
	border: thin solid #59A43F;
}
 
Ein Problem hab ich noch...IE kann zwar den Rahmen anzeigen, allerdings nicht auf allen vier Seiten, sondern oft nur auf 2 oder 3 Seiten einer Zelle.

Wo liegt das Problem?

Der IE wird mir immer unsympathischer als er es mir eh schon ist...

Übrigens geht es mit IE8, jedoch nicht im Kompabilitätsmodus, ich brauche den jedoch, damit meine anderen Elemente richtig dargestellt werden...
Hat jemand eine Idee ?
 
Redest du etwa vom Darstellungsmodus "Quirksmode"?

Ich hatte dir eingangs einen Link empfohlen, der in diesem Darstellungsmodus ebenso für IE7 und IE8 zutrifft.

mfg Maik
 
In welche Index-Datei muss ich das reinkopieren, die vom Template, wo der Header drin ist oder von Joomla direkt in die Index?
Denke mal in die vom Template...weil bei der anderen nur PHP ist...

Das schaut dann so aus:

Code: 
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JPlugin::loadLanguage( 'tpl_SG1' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/ie6.css" type="text/css" />
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>

Muss ich das auskommentieren oder irgendwie so(Notepad++ zeigt mir das in grün an)? Oder an anderer Stelle? Geht nämlich noch nicht...
 
Was hat denn bitte diese Frage in diesem Thema hier verloren?

Wenn du Fragen zu Joomla hast, wende dich damit bitte an unser CMS-Forum - vielen Dank!

Übrigens mußt du das andere Script nutzen, wenn der IE8 zu berücksichtigen ist.

HTML: 
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->


mfg Maik
 
Ist ja nur die eine Frage, hab ich mir ja schon quasi selbst beantwortet, das andere hat mit HTML zu tun...

Habs geändert...geht aber immer noch ned, versteh ich einfach nicht...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück