Rollover mit CSS IE und NS @ tutorials.de: Tutorials, Forum & Hilfe

Baerwatz · 17.03.04 08:37

Hallo, ich hoffe es kann mir jemand helfen.

Ich möchte mit Hilfe von CSS Buttons mit nem RollOver-Effekt konstruieren.
Dafür hab ich ne extra Klasse geschrieben und dort die einzelnen Bedingungen für die Links beschrieben.
Das ganze funktioniert jetzt aber nicht: ich bekomme die Links immer so dargestellt, wie ich sie allgemein definiert habe.
Kann mir vielleicht jemand sagen, wo der Fehler liegt?

Hier der Quelltext:

/*test.css*/

body
{
background-color : #FFFFFF;
margin : 0px;
padding : 15px;
}

a
{
font-family : Arial, Verdana, Helvetica, sans-serif;
color : #808080;
text-decoration : none;
font-size: 70%;
}

a:link
{
color : #808080;
text-decoration : none;
}

a:visited
{
color : #A7A7A7;
text-decoration : none;
}

a:hover
{
color : #A7A7A7;
text-decoration : underline;
}

a:active
{
color : #A7A7A7;
text-decoration : underline;
}

img
{
border: none;
}

h1
{
color:#808080;
}

h2
{
color:#808080;
}

div
{
font-family :Arial, Verdana, Helvetica, sans-serif;
padding : 15px;
}

div#frame
{
border : none;
margin-left : auto;
margin-right : auto;
padding : 0;
width : 100%;
}

div.head
{
border : none;
color : #979797;
font-size : 50%;
font-weight : bold;
}

div.content
{
font-size : 100%;
padding-left : 15px;
}

div.buttons
{
font-size : 60%;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
padding-top : 0px;
padding-bottom : 0px;
text-align: left;
white-space: nowrap;
background-color: #A7A7A7;
}

.buttons a
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #FFFFFF;
color : #000000;
text-decoration : none;
background-color: #A7A7A7;
}

.buttons a:link
{
}

.buttons a:visited
{
}

.buttons a:hover
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #FFFFFF;
color : #FFFFFF;
text-decoration : none;
background-color: #808080;
}

.buttons a:active
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #FFFFFF;
color : #FFFFFF;
text-decoration : none;
background-color: #808080;
}

.bold
{
font-weight : bold;
}

/*test_CSS.html*/

<html>
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<title>test_CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="test.css" type="text/css" />
</head>

<body>

<div id="frame">



<div class="content">
<table width=100% valign="top">
<tr>
<td align="right" width=10%>
<a href="inhalt.html">Inhalt</a><br />
<a href="#">Intranet</a><br />
<a href="index.html">Home</a>
</td>
<td align="center">
<img src="pics/unternehmen_na.gif" alt="ETW" width="97" height="40">
</td>
<td align="center" width=15%>
<a href="etw_1.html">Nav1</a>
</td>
<td align="center" width=15%>
<a href="etw_2.html">Nav2</a>
</td>
<td align="center" width=15%>
<a href="etw_h.html">Nav3</a>
</td>
<td align="center" width=15%>
<a href=""> </a>
</td>
<td align="center" width=15%>
<a href=""> </a>
</td>
</tr>
</table>
</div>

<div class="head">
<center> </center>
</div>

<table width=100%>
<tr>

<td width=10% valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<div class="content">
<tr>
<td align="right">
 <br />
<a href="etw.html">Link1</a><br />
 <br />
<a href="etw1.html">Link2</a><br />
 <br />
<a href="etw2.html">Link3</a><br />
 <br />
<a href="etw3.html">Link4</a><br />
 <br />
<a href="etw4.html">Link5</a><br />
 <br />
<a href="etw5.html">Link6</a><br />
 <br />
<a href="etw6.html">Link7</a><br />
 <br />
<a href="orga.html">Link8</a><br />
 <br />
<a href="weg.html">Link9</a><br />
</td>
</tr>
</div>
</table>
</td>


<td width=10%>
<table width="100%" cellspacing="0" cellpadding="0">
</table>
</td>


<td width=60% valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><h2>TEST</h2></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>


<td width=20% valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
 <br />
 <br />
</td>
</tr>
<div class="buttons">
<tr>
<td>
<a href="">Mitarbeiter</a><br />

<a href="">Raumbelegung</a><br />

<a href="">Ansprechpartner</a><br />

<a href="">MA-Sonderaufgaben</a>
</td>
</tr>
</div>
</table>
</td>
</tr>
</table>

</div>
</body>
</html>

Fabian Hofmann · 17.03.04 13:56

Schreib mal das hier:

Code :

<div class="buttons">
    <tr>
        <td>
            [...]
        </td>
    </tr>
</div>

So:

Code :

<tr>
    <td class="buttons">
        [...]
    </td>
</tr>

Die Div-Tags weglassen, die gehören da nicht hin.

Ps: Das nächste Mal bitte den Code in die entsprechendes BB-Tags ([code])
setzen und vor allem nur den relevanten Teil des Codes, und nicht duzende von
Seiten Code posten.

Baerwatz · 17.03.04 14:27

Danke,
das mit dem Quelltext werd ich das nächste mal berücksichtigen. Sorry

Jetzt stellt sich noch ein Problem.
Auf NS funktioniert das ganze so wie es soll, nur beim IE setzt er mir die Schrift in die selbe Farbe wie den Hintergrund. Den MouseOver macht er aber korrekt.
Hängt das vielleicht mit der Farbdeklaration der normalen Links weiter oben zusammen? Die haben nämlich die selbe Farbe wie der Hintergrund.

Fabian Hofmann · 17.03.04 14:30

Versuch mal, die Zeilen hier einfach aus deinem CSS-Teil zu löschen:

Code :

.buttons a:link
{
}
 
.buttons a:visited
{
}

Baerwatz · 17.03.04 14:37

Danke für den Tipp, aber das wars nicht.
Wenn ich die Einstellungen von
.buttons a
in
.buttons a:visited/link
übernehme funktionierts.

IE scheint die Angaben für color., die ich bei
a:visited
gemacht habe bei buttons zu übernehmen.

Nochmals danke für die Mühe, die Du Dir mit mir gemacht hast.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

PS-CS3=Rollover + Remote Rollover

rollover

DW -Rollover und Over !

Rollover

Rollover wav ..

E-Mail:

Abonnieren Abbestellen