Probleme mit einem CSS Menü

Status
Nicht offen für weitere Antworten.
C

chrislennep

Hallo Community,
ein Problem plagt mich mal wieder und ich finde trotz div. Seiten keine Antwort.

Also folgendes:

Ich möchte, dass sich die Hintergrundfarbe der Tabelle bei maus.over
ändert. Das soll dann so aussehen wie hier:
Beispielmenü

Eine Anleitung dazu habe ich hier gefunden:
Tutorials Forum

Jedoch werde ich nicht so ganz schlau daraus. Wie baue ich diese Styles jetzt in meinen Quellcode ein?

Meine CSS:
Code: 
#roundabout {
  border-width:2px;
  border-style:solid;
  border-color:black;
  padding:0px; }
#left {
  border-left-width:2px;
  border-left-style:solid;
  border-color:black;
  padding-left:0px; }
#bottomright {
  border-bottom-width:2px;
  border-right-width:2px;
  border-bottom-style:solid;
  border-right-style:solid;
  border-color:black;
  padding-right:0px; }
#bottom {
  border-bottom-width:2px;
  border-bottom-style:solid;
  border-color:black;
  padding-bottom:0px; }
}


Mein Html
Code: 
<html>
<link rel="stylesheet" type="text/css" href="site.css">
<body marginwidth="25%" marginheight="25%">
<table id="roundabout" width="750" border="0" border-color="#000000" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="175" height="400" valign="top"> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="175" height="400" valign="top"><img src="heidi.gif" width="175" height="400"></td>
        </tr>
      </table>
    </td>
    <td width="575" valign="top">
      <table id="left" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td id="bottomright" width="25%" height="35" align="center" valign="middle">Startseite</td>
		  <td id="bottomright" width="25%" height="35" align="center" valign="middle">Lebenslauf</td>
		  <td id="bottomright" width="25%" height="35" align="center" valign="middle">Referenzen</td>
		  <td id="bottom" width="25%" height="35" align="center" valign="middle">Kontakt</td>
        </tr>
        <tr>
          <td height="365"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Hut ab, wer es bis hier hin gelesen hat. Für Hiifestellungen bin ich sehr dankbar.

Christian
 
Hallo Chris,

ich gehe mal davon aus, dass sich der komplette Hintergrund der Tabellenzelle ändern soll, wenn Du mit der Maus darüberfährst.

Ich würde in dein <td> z.B. folgendes schreiben:
Code: 
<td id="bottomright" width="25%" height="35" align="center" valign="middle" onmouseover="bgcolor='#FFFFFF'"
onmouseout="bgcolor='#FF0000'">Startseite</td>

Das sollte eigentlich funktionieren.
 
Hi chrislennep!

Du musst einfach in den Head deiner Seite also zwischen

Code: 
<head></head>

das folgende einfügen und dort zwischen <!-- --> deine CSS Definitioneinfügen


Code: 
<style type="text/css">
<!--

-->
</style>

Deine Datei sollte dann also so aussehen:

Code: 
<html>
<link rel="stylesheet" type="text/css" href="site.css">
<head>
<style type="text/css">
<!--
#roundabout {
  border-width:2px;
  border-style:solid;
  border-color:black;
  padding:0px; }
#left {
  border-left-width:2px;
  border-left-style:solid;
  border-color:black;
  padding-left:0px; }
#bottomright {
  border-bottom-width:2px;
  border-right-width:2px;
  border-bottom-style:solid;
  border-right-style:solid;
  border-color:black;
  padding-right:0px; }
#bottom {
  border-bottom-width:2px;
  border-bottom-style:solid;
  border-color:black;
  padding-bottom:0px; }
}
-->
</style>
</head>
<body marginwidth="25%" marginheight="25%">
<table id="roundabout" width="750" border="0" border-color="#000000" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="175" height="400" valign="top"> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="175" height="400" valign="top"><img src="heidi.gif" width="175" height="400"></td>
        </tr>
      </table>
    </td>
    <td width="575" valign="top">
      <table id="left" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td id="bottomright" width="25%" height="35" align="center" valign="middle">Startseite</td>
		  <td id="bottomright" width="25%" height="35" align="center" valign="middle">Lebenslauf</td>
		  <td id="bottomright" width="25%" height="35" align="center" valign="middle">Referenzen</td>
		  <td id="bottom" width="25%" height="35" align="center" valign="middle">Kontakt</td>
        </tr>
        <tr>
          <td height="365"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Ich hoffe ich konnte dir weiterhelfen.
 
Erstmal danke für Eure Antworten. Das Problem besteht aber weiterhin.

@ Baerwatz

Code: 
<td id="bottomright" width="25%" height="35" align="center" valign="middle" onmouseover="bgcolor='#FFFFFF'"
onmouseout="bgcolor='#FF0000'">Startseite</td>

Habe ich eingefügt, funktioniert aber nicht, (benutze IE und Opera, neuste V.)
Wenn ich mouseover mache, verändert sich die Tabelle gar nicht erst.

@ BSA

So meinte ich das leider nicht, das wäre ja recht einfach gewesen ;-)
Also ich habe den Code aus meiner CSS Datei und den Code aus meiner
Html Datei getrennt angegeben. Ich habe das ganze also schon ausgelagert.
Trotzdem danke für deine Antwort.

Also wer kann weiterhelfen? Problem besteht weiterhin auch mit Baerwatz Lösungsvorschlag.
 
Hi,

ändere Baerwatz's Ansatz

&nbsp;&nbsp;onmouseover="bgcolor='#FFFFFF'"

wie folgt

&nbsp;&nbsp;onmouseover="this.style.backgroundColor='#FFFFFF'"

Ciao
Quaese
 
Also die Tabelle sieht wie folgt aus:

Code: 
<td id="bottomright" width="25%" height="35" align="center" valign="middle" onmouseover="this.style.backgroundColor='#FFFFFF'" onmouseout="bgcolor='#ffffff'">Referenzen</td>

Aber es tut sich nichts. Außerdem wäre es mir lieber wenn das ganze ohne js klapenn würde. Falls es nicht geht, ist es aber auch nicht schlimm. Hauptsache es klappt erstmal...
 
@Quaese:

Ja klar, so funktionierts. Habs mal ausprobiert.

@Chris:
Du musst this.style.backgroundColor= natürlich auch in onmouseout einfügen!
Ich habs ausprobiert, es funktioniert in NS 7 und IE 5.
 
Wenn Du es mit CSS machen willst, weiß ich nur ne Lösung für Links, aber ich geh mal davon aus, dass es sich hier eh um Links handelt.

Du kannst, wenn Du in CSS Links definierst, bei
a:hover{}
Werte für color, bgcolor, text-decoration eingeben.
Somit kannst Du Text- und Hintergrundfarbe ändern und den Text eventuell unterstreichen.
Allerdings ändert sich da nur die Farbe direkt hinter dem Text und nicht in der gesamten Zelle!
Das ist zumindest die Erfahrung, die ich damit gemacht hab.
 
Also ich habe die Daten mal hochgeladen:

css code
htm code

Das klappt soweit auch, dass der Hintergrund (bei der dritten Tabelle) auch
schwarz wird. Nur das Problem ist, dass sich die Schrift nicht verändern lässt etc.
Vielleicht klappt das ganze doch nur über css, aber da habe ich wieder das Problem (siehe ersten beiden Tabellen), dass nicht das gesammte Tabellenfeld schwarz wird.

edit @ Baerwatz

Genau das passiert auch! Ich führe hier aber gerne nochmals die Beispiele aus
meinem Ausgangspost auf, denn dort hat es geklappt:

Beispiel
 
Zuletzt bearbeitet von einem Moderator:
Ändere doch einfach noch über CSS die link farbe beim hover....

also:

a:hover
{
color: #000000;
}


Das müsste dann klappen, oder?
Hab es aber nicht ausprobiert, aber rein theoretisch müsste das die Lösung sein.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück