subzero_ch: Bei MouseOver -> CSS-Änderung - Zellen verschieben sich

Hallo zusammen,

vorausschicken muss ich, das ich ein tatsächlicher Newbe in Sachen Coding bin. Und auch erst seit kurzem vom Frontpage *Duck-und-wegrenn* zum Dreamweaver gewechselt habe.

Das mir unerklärliche Phänomen ist auf meiner sich im Aufbau befindenden Page zu bestaunen...

Was ich eigentlich wollte:
Bei Mouse-Over: Wechsel des "Font-Weight" zu "Bold", und bei Mouse-Out wieder zurück.

Meine Ausführung sieht auf die Tag's bezogen folgender massen aus:

<table width="1000px" align="center">  
      <tbody><tr class="Menü">  
        <td width="125" height="16" valign="middle" onmouseover="className='Menu_2'" onmouseout="className='Menü'">portrait </td>  
        <td width="125" height="16" valign="middle" onmouseover="className='Menu_2'" onmouseout="className='Menü'">natur </td>  
        <td width="125" height="16" valign="middle" onmouseover="className='Menu_2'" onmouseout="className='Menü'">situation</td>  
        <td width="125" height="16" valign="middle" onmouseover="className='Menu_2'" onmouseout="className='Menü'">try</td>  
        <td width="125" height="16" valign="middle"> </td>  
        <td width="125" height="16" valign="middle" onmouseover="className='Menu_2'" onmouseout="className='Menü'">about</td>  
        <td width="125" height="16" valign="middle" onmouseover="className='Menu_2'" onmouseout="className='Menü'">comment</td>  
        <td width="125" height="16" valign="middle" onclick="MM_openBrWindow('book.html','Book','width=1000,height=700')">book</td>  
      </tr>  
    </tbody></table>

Die Class sehen momentan so aus:

}  
.Menü {  
	font-family: Tahoma, Geneva, sans-serif;  
	font-size: 12px;  
	font-style: normal;  
	line-height: normal;  
	font-weight: normal;  
	font-variant: normal;  
	color: #FFF;  
	position: absolute;  
}

bzw.

  
}  
.Menu_2 {  
	font-family: Tahoma, Geneva, sans-serif;  
	font-size: 12px;  
	font-style: normal;  
	line-height: normal;  
	font-weight: bold;  
	font-variant: normal;  
	color: #FFF;  
	position: absolute;  
}

Was sich mir in der Code-Ansicht noch das Herzen höher schlagen liess, enpuppte sich in dem Entwurf und auf dem Server als fiese Jagd nach den angehenden Buttons... Der unschöne Effekt des "Kommt wir verstecken uns alle auf der linken Container-Seite" wird euch wohl aufgefallen sein...

Achherjeh, bis in diese frühen Morgenstunden quälte ich mich und gelange nun mit dem Hilferuf an euch.

Ich hoffe euch alle nötigen Informationen übergeben und die Regeln eures Forums erfüllt zu haben.

Über jeglichen Tipp zur Lösung bin ich euch auch bereits im Voraus dankbar.

lg
subzero_ch

  1. onmouseover="className='Menu_2'" onmouseout="className='Menü'"

    Wer bekommt denn hier die Klassen Menü/Menu_2 zugewiesen? Wenn du nichts weiter festlegst wird eine Variable dem window-Objekt zugewiesen, und das Browserfenster soll doch wohl nicht diese Klassen bekommen?

  2. @@subzero_ch:

    nuqneH

    Was ich eigentlich wollte:
    Bei Mouse-Over: Wechsel des "Font-Weight" zu "Bold", und bei Mouse-Out wieder zurück.

    (1) Die ist oft unsinnig, da der Text dadurch unterschiedlich breit ist und evtl. fett mehr Zeilen einnimmt als normal, was zu äußerst unschönem Umspringen führt.

    (2) Es ist unsinnig, dafür JavaScript einzusetzen. Das geht mit CSS mit der <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Pseudoklasse :hover>.

    (3) Es ist unsinnig, 'table' für etwas anderes als tabellarische Daten zu missbrauchen. Ein Menü ist eine _Liste_ von Links:

    <ul>  
      <li><a href="portrait">Portrait</a></li>  
      <li><a href="natur">Natur</a></li>  
      <li><a href="situation">Situation</a></li>  
      <li><a href="try">Try</a></li>  
      <li><a href="about">About</a></li>  
      <li><a href="book">Book</a></li>  
    </ul>
    

    Die Menüpunkte bekommst du per 'float: left' oder 'display: inline' nebeneinander, die Bullets per 'list-style: none' weg, 'margin'/'padding' auf genehme Werte setzen – voilà!

    Sämtliche Darstellungsangaben gehören ins Stylesheet, nicht in (missbilligte) HTML-Attribute @width, @height, @valign.

    Meine Ausführung sieht auf die Tag's bezogen folgender massen aus:

    Tags? Der Plural im Deutschen nie mit Apostroph.

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    1. @@Gunnar Bittersmann:

      nuqneH

      <li><a href="portrait">Portrait</a></li>

      Oops, ganz vergessen, auf http://forum.de.selfhtml.org/archiv/2009/7/t188567/#m1255902 zu verweisen. Bei dir dann "lowercase".

      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    2. Herzlichen Dank für die Ausführungen.

      (1) Die ist oft unsinnig, da der Text dadurch unterschiedlich breit ist und evtl. fett mehr Zeilen einnimmt als normal, was zu äußerst unschönem Umspringen führt.

      Vorhaben wurde geändert, nun wird eine andere Schriffarbe auftauchen.

      (2) Es ist unsinnig, dafür JavaScript einzusetzen. Das geht mit CSS mit der <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Pseudoklasse :hover>.

      Werde ich heute Abend probieren so umzusetzen.

      (3) Es ist unsinnig, 'table' für etwas anderes als tabellarische Daten zu missbrauchen. Ein Menü ist eine _Liste_ von Links:

      <ul>

      <li><a href="portrait">Portrait</a></li>
        <li><a href="natur">Natur</a></li>
        <li><a href="situation">Situation</a></li>
        <li><a href="try">Try</a></li>
        <li><a href="about">About</a></li>
        <li><a href="book">Book</a></li>
      </ul>

      
      >   
      > Die Menüpunkte bekommst du per 'float: left' oder 'display: inline' nebeneinander, die Bullets per 'list-style: none' weg, 'margin'/'padding' auf genehme Werte setzen – voilà!  
        
      Luxus! Danke, wurde auch von einigen anderen reklamiert.  
        
      
      > Sämtliche Darstellungsangaben gehören ins Stylesheet, nicht in (missbilligte) HTML-Attribute @width, @height, @valign.  
        
      Werde ich korrigieren.  
        
      
      > > Meine Ausführung sieht auf die Tag's bezogen folgender massen aus:  
      >   
      > [Tags](http://meiert.com/de/publications/articles/20060924/)? Der Plural im Deutschen [nie mit Apostroph](http://de.wikipedia.org/wiki/Apostrophitis).  
        
      ;) Werde mich bemühen.  
        
      Gebe am Abend bekannt wie erfolgreich ich deine Tipps umgesetzt habe
      
    3. Herzlichen Dank für die Hilfe!

      Hat alles funktioniert!