# Probleme mit einem CSS Menü



## chrislennep (23. Juni 2004)

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:

```
#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

```
<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


----------



## Baerwatz (24. Juni 2004)

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:

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

Das sollte eigentlich funktionieren.


----------



## BSA (24. Juni 2004)

Hi chrislennep!

Du musst einfach in den Head deiner Seite also zwischen 


```
<head></head>
```

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



```
<style type="text/css">
<!--

-->
</style>
```

Deine Datei sollte dann also so aussehen:


```
<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.


----------



## chrislennep (24. Juni 2004)

Erstmal danke für Eure Antworten. Das Problem besteht aber weiterhin.

@ Baerwatz


```
<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.


----------



## Quaese (24. Juni 2004)

Hi,

ändere Baerwatz's Ansatz

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

wie folgt

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

Ciao
Quaese


----------



## chrislennep (24. Juni 2004)

Also die Tabelle sieht wie folgt aus:


```
<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...


----------



## Baerwatz (24. Juni 2004)

@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.


----------



## Baerwatz (24. Juni 2004)

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.


----------



## chrislennep (24. Juni 2004)

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


----------



## BSA (24. Juni 2004)

Ä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.


----------



## chrislennep (24. Juni 2004)

BSA hat gesagt.:
			
		

> a:hover
> {
> color: #000000;
> }



Ne, leider ned die Lösung.
Also color ändert bei mir nur die Schriftfarbe und die soll 
weiß sein. Um den Hintergrund zu ändern nehme ich 
backround-color black.

Das ist ja auch okay, aber das Schwarze erstreckt sich nur über die Schriftfläche, nicht aber über die ganze Tabelle. Eingangs hatte ich ein Beispiel gezeigt, wo es so realisiert wurde, wie ich es gerne hätte, aber ich habe keine Ahnung, wie ich das bei mir umsetzen soll.

Christian


----------



## BSA (24. Juni 2004)

Das beste und naheliegendste Beispiel (ohne einen Fremdlink zu setzen) ist doch wohl turorials.de oder nicht?
Ich guck gerade nochmal.....


----------



## Martys (24. Juni 2004)

Dir fehlr die Anweisung

display: block;


----------



## Quaese (24. Juni 2004)

Hi,

wenn Du es mit CSS lösen willst, solltest Du die Links in Blockelemente umwandeln.
Dies erfolgt über die Eigenschaft *display: block*. Deine CSS-Definition für a:link
 sieht dann wie folgt aus:

```
A:link{ FONT-WEIGHT: bold;
        COLOR: #000000;
        TEXT-DECORATION: none;
        display: block;     /* Als Blockelement festlegen */
        height: 100%;       /* Gesamte Zellenhöhe verwenden */
        width: 100%;        /* Gesamte Zellenbreite verwenden */
        line-height: 35px;  /* Zeilenhöhe auf die Höhe der Tabellenzeile festlegen */
}
```
Über die Eigenschaft *line-height* erreichst Du die vertikale Zentrierung. Der
Wert, den Du hier angeben musst, entspricht der Höhe der Tabellenzeile.

Ciao
Quaese


----------



## chrislennep (24. Juni 2004)

@ BSA 

Der Autor meiner gelinkten Seite hat auf tuturials ein Tutorial verfasst, aber dieses kann ich wie gesagt nicht bei mir einbauen.

Tutorials ==> CSS => Buttos mit CSS

@ Martys
Hmm, okay den Befehl kannte ich nicht, aber denselben Effekt bekommt man, wenn padding-left und pedding-right auf 50% gesetzt werden.
Das ganze füllt aber nur die Tabelle nach Links und nach Rechts aber nicht nach Oben und Unten.

Wenn du da noch eine Idee parat hast, wäre ich dir sehr dankbar.

Christian


----------



## chrislennep (24. Juni 2004)

Also so sieht mein CSS Abschnitt jetzt aus:


```
a:link {
  font-weight: bold;
  color:#000000;
  text-decoration:none;
  display:block;     /* Als Blockelement festlegen */
  height:100%;       /* Gesamte Zellenhöhe verwenden */
  width:100%;        /* Gesamte Zellenbreite verwenden */
  line-height:35px;  /* Zeilenhöhe auf die Höhe der Tabellenzeile festlegen */ }

a:visited {
  color:#000000;
  font:timesnewroman;
  text-decoration:none;
  font-weight:bold; }

a:hover {
  color:#ffffff;
  font:timesnewroman;
  font-weight:bold;
  text-decoration:none;
  background-color : #000000;
  display: block }
```

Das Ergebnis ist aber nicht so, wie du es geschrieben hast Quaese.
Ich lade die Datei mal hoch, dann könnt ihr den momentanen stand sehen:

css 
html

Also ich seh es gerade im Netz. Es klappt! Ich denke das war die Lösung des Rätsels. Muss ich mir zwar nochmal genau anschauen, aber Opera setzt es richtig um. IE setzt es auch um. Komischer Weise nur bei dem Inet link, auf meinem Rechner setzt er es noch nicht um.

Es hat also ohne JS geklappt. Super! Vielen Dank, tolle Community.


----------



## BSA (24. Juni 2004)

Okay, ich habe jetzt ein Beispiel zusammengebastelt, was du dann nur noch in deine Seite einbauen müsstest.
Ist aber ein Mix aus CSS und JS.

Also:


```
<html>
<head>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table border=1>
 <tr>
  <td style="cursor:hand" onMouseDown="location.href = '#'"
  onmouseover="this.style.backgroundColor='#FF0000'"
  onmouseout="this.style.backgroundColor='#FFFFFF'" >Hallo</td>
 </tr>
</table>
</body>
</html>
```


----------



## MarcusTh (24. Juni 2004)

Hallo,
erste Wortmeldung - hoffe, ich kann weiterhelfen, und mache es richtig:

wenn Du den Code wie folgt ergänzt, dann kommst Du auch ohne die Farbe "rot" aus:

```
onmouseover="this.style.backgroundColor='#000000'; 
this.style.color='#FFFFFF'"
onmouseout="this.style.backgroundColor='#FFFFFF'; 
this.style.color='#000000'"
```

Marcus


----------



## remuen (24. Juni 2004)

Hallo chrislennep

Was Du da gemacht hast, kann nicht funktionieren! Grundsätzlich könntest Du nämlich meinen CSS-Code und die Anwendung nur aus meinem Tutorial kopieren und noch mit den entsprechenden Eigenschaften "füllen" und alles würde funktionieren so wie es das bereits bei vielen anderen tu t 

Erstens: Wenn Du Dir mein Tutorial  anschaust, siehst Du, dass ich nicht mit id's arbeite, sondern mit Klassen. Zweitens: Mittels der CSS-Klasse "menu" weise ich ich der Tabelle zu, dass jeder Link in einem Tabellenfeld ein Block-Level-Element ist und dann je nach Action (hover) resp. Zustand (visited) verschiedene Eigenschaften annimmt.

Dazu wird die Basis-Klasse 


```
table.menu a 
   {
    display: block ;
   hier stehen die CSS-Eigenschaften
   }
```

benötigt. Und hier steht natürlich - wie einige bereits richtig feststellten und im Tutorial  auch erwähnt ist - die Anweisung display:block . Damit  werden die Tabellenfeldern zu sogenannten Block-Elementen, d.h. das ganze Feld ändert sich dann mit den weiteren Anweisungen unten und nicht nur der direkte Hintergrund hinter dem Text..

Nun musst Du wie bei jeder anderen Link-Formatierung auch die Eigenschaften für a:link, a:visitited und a:hover vorgeben, denn sonst ändert sich ja beim Überfahren des Links mit der Maus nichts und ein bereits angeklickter Link wird eben auch nicht als "visited" dargestellt. Daher also zusätzlich das, was ich im Tutorial bereits gezeigt habe: 


```
table.menu a:link 
   {
   hier stehen die Eigenschaften
   }
 table.menu a:visited 
   {
   hier stehen die Eigenschaften
   }
 table.menu a:hover 
   {
   hier stehen die Eigenschaften
   }
```

Die Klasse "menu" weise ich wie im Tutorial dargestellt einfach im Tabellenkopf (<table class="menu">). Die Tabellenlinks verhalten sich nun so wie auf meiner Seite  zu sehen ist - mit einer Ausnahme: Ein gerade aktueller Link wird nicht anders dargestellt.


Ich habe nun zusätzlich eine "Unter-Klasse" für die Links definiert:


```
table.menu TD.down a:link 
   {
   hier stehen die Eigenschaften
   }
 table.menu TD.down a:visited 
   {
   hier stehen die Eigenschaften
   }
 table.menu TD.down a:hover 
   {
   hier stehen die Eigenschaften
   }
```

Diese Unterklasse weise ich nun nicht mehr der gesamten Menü-Tabelle zu, sondern nur dem Feld, das als "gedrückt" dargestellt werden muss, also mit <td class='down'>.

Die Menü-Tabelle sieht dann also so aus:


```
<table class="menu">
   <tr> 
     <td class='down'> <!-- dieser "Button" wird als gedrückt dargestellt -->
       (hier steht der Link) 
     </td>
   </tr>
   <tr>
     <td> <!-- dieser "Button" wird als nicht gedrückt dargestellt -->
       (hier steht der Link) 
     </td>
   </tr>
 </table>
```

Wenn Du nun wilst, dass alles ganz bestimmt nicht funktioniert, musst Du einfach alles wieder nach Deinem Gusto ändern   Soll es jedoch funktionieren, kannst Du das Ganze einfach kopieren, die Eigenschaften für die Links dort einfüllen, wo steht "hier stehen die Eigenschaften" und dann läuft's auch bei Dir.  Die CSS-Klasse für die Tabelle kannst Du ja für einen ersten Test gleich  belassen wie ich das im  Tutorial angegeben habe (ausser dass Du sie bei Verwendung mit einer Tabelle entsprechend umbenennen muss).

Wenn Du's nicht glaubst, dass es so funktioniert, schau Dir den HTML-Code meiner Seite  an, denn ich habe da wirklich nichts anderes gemacht als was ich im Tut und auch hier erklärt habe.

Gruss
René


----------



## remuen (24. Juni 2004)

Also noch eine Anmerkung, nachdem da einige auch Vorschläge angebracht haben: Meine Lösung benötigt nur CSS, während jedoch andere Vorschlage auf JavaScript aufbauen. Nun, jedem das Seine, ich selbst verwende möglichst kein JS, da dann bei ausgeschaltetem JS (und das tun immer mehr User) der ganze Effekt weg ist.

Wie gesagt, jedem das Seine und mir das Meine 

Gruss
René


----------



## chrislennep (26. Juni 2004)

*Vielen Dank!*

Also eigentlich klappt es ja schon, aber trotzdem danke nochmal für die vielen Posts. Ganz besonderen Dank gilb remuen, als Autor des Tutorials, dass er sich so internsiv um eine Lösung gekümmert hat. Danke! Ich werde die Tage auch mal deinen Lösung ausprobieren.

Was JS angeht bin ich derselben Meinung wie remuen. Wegen Viren, Trojaner etc. stellen viele JS aus, oder auch nur deshalb weil man es nicht mögen muss *g*. Deshalb finde ich eine CSS Lösung sinnvoll.

Chrislennep


----------

