hover effekt problem

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • hover effekt problem

    hallo,
    habe folgendes problem:

    in meinem javascript-code:

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    <!--
    .Stil2 {font-size: 11px}
    .Stil6 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }
    .Stil13 {color: #67676B}
    .Stil14 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #67676B;
    	font-weight: bold;
    }
    .menu
    {
    color:#67676B;
    padding:4px;
    }
    
    a.menu:hover
    { 
     color: #FFFFFF;
     background-color:#67676B;
     }
     
    a.menu:activ
    {
    color:#ec6521;
    }
     
    td.menu:hover,.menuhover {
                    background: #67676B;
    				color: #FFFFFF;
    				cellspacing-color:#FFFFFF;
    
    
    }
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: none;
    }
    a:active {
    	text-decoration: none;
    	color: #ec6521;
    }
    body {
    	background-image: url(bilder/karo2.gif);
    }
    -->
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if 
    ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    
        document.MM_pgW=innerWidth; 
    document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || 
    innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    
    function MM_goToURL() { //v3.0
      var i, args=MM_goToURL.arguments; 
    document.MM_returnValue = false;
      for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
    }
    //-->
    </script>
    
            <!--[if IE]>
            <style type="text/css">
    			
    			            .menu {
                    background-color: expression(
                        this.onmouseover = new Function
    ("this.className += ' menuhover';"),
                        this.onmouseout = new Function
    ("this.className = this.className.replace('menuhover', '');")
                    );}
            </style>
            <![endif]-->
    </head>
    
    <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="146" border="0" cellspacing="2" cellpadding="1" >
    
      <tr>
        <td height="30" bgcolor="#EDEEEE" class="menu">
    <div align="left" class="Stil2 Stil6 Stil13" ><strong>
    <a href="#" class="menu" onClick="MM_goToURL
    ('parent.frames[\'mainFrame\']',
    'akt-presse.html');return document.MM_returnValue">Presse</a></strong>
    </div></td>
      </tr>
      <tr>
        <td height="30" bgcolor="#EDEEEE" class="menu">
    <span class="Stil14"><a href="#" class="menu" onClick="MM_goToURL
    ('parent.frames[\'mainFrame\']',
    'akt-archiv.html');return document.MM_returnValue">Pressearchiv</a></span>
    </td>
      </tr>
      <tr>
        <td height="30" bgcolor="#EDEEEE" class="menu">
    <span class="Stil14"><a href="#" class="menu" onClick="MM_goToURL
    ('parent.frames[\'mainFrame\']',
    'akt-bilder.html');return document.MM_returnValue">Bilder</a></span></td>
      </tr>
      <tr>
        <td height="30" bgcolor="#EDEEEE" class="menu">
    <div align="left" class="Stil14"><a href="#" class="menu" onClick="MM_goToURL
    ('parent.frames[\'mainFrame\']',
    'akt-termine.html');return document.MM_returnValue">Termine</a></div></td>
      </tr>
    </table>
    </body>
    </html>

    habe ich folgenden fehler gefunden:

    wenn ich über dem link gehe wechselt wie gewollt hintergrund des
    textes und der
    tabellenzelle, sowie die textfarbe. wenn ich aber en stück rechts
    davon darübergehe
    wechselt nur die tabellenzell den hintergrund und die textfarbe
    bleibt unsichtbar was sehr
    schlecht ist.

    hat jemand ne idee wie ich des lösen könnte?
    falls ja bitte ausführlich erklären, da ich nicht sehr bewandert bin.

    schon mal danke
    Zuletzt geändert von Schumi0815; 24.04.2006, 14:20.

  • #2
    Re: hover effekt problem

    Unsinniges Javascript rausschmeißen, ebenso unsinnige Tabelle auch rausschmeißen, Navigation sinnvoll als Liste auszeichnen und entsprechend formatieren.

    http://css.maxdesign.com.au/listamatic/ liefert Beispiele.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      Re: hover effekt problem

      <p> </p>
      <p> </p>
      <p> </p>
      was ist das denn?



      ansonsten würde ich den css-Code umändern
      Code:
      td.menu:hover {
        background-color:black;
      }
      td.menu:hover a {
        color:white;
      }
      wie du das mit deinem JS vereinbarst darfst du selber gucken :P



      und bitte die langen Zeilen umbrechen, beim Antworten stört die Überbreite auf Auflösung von 1024 doch sehr

      Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

      bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
      Wie man Fragen richtig stellt

      Kommentar


      • #4
        @wahsaga: danke werds mal genauer unter die lupe nehmen, wär
        aber auch sehr dankebar über ne fertiglösung. wie angedeutet bin
        master of copy'n paste.

        PS: was genau is überflüssig?

        @ghostgambler: wenn du des mit menuhover meinst, des muss
        drinbleiben, weil sonst der IE stress macht.
        Zuletzt geändert von Schumi0815; 24.04.2006, 14:20.

        Kommentar


        • #5
          schau dir mal das an, da dürfte auch was für dich dabei sein.

          ps: und vergiß den dw, mit dem lernst du das nie!

          und brich deinen code um!

          gruß
          peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            OffTopic:
            Respekt - dein Code ist über 2 Monitore hinweg gut lesbar

            Kommentar


            • #7
              Original geschrieben von Schumi0815
              wie angedeutet bin master of copy'n paste.
              OffTopic:
              Vergiss nicht, das auf deine Webseite zu schreiben, wo du Webdesign-Leistungen verkaufen willst ...

              PS: was genau is überflüssig?
              Das Javascript zur Erzielung dieses Effektes, und die Tabelle, die keine tabellarischen Daten enthält.
              I don't believe in rebirth. Actually, I never did in my whole lives.

              Kommentar


              • #8
                ähm. ich hab zwar keine ahnung von Javascript, aber wozu brauchst du es bitte für diesen Effekt? das geht doch rein mit CSS genauso. und weitaus einfacher. oder täusche ich mich da jetzt?

                Kommentar


                • #9
                  @all: sorry, war mir nicht bewusst, dass man in diesem forum
                  selbstständig und nicht nur der admin, die einträge verändern
                  darf.


                  @Kropff: danke schaut gut aus, aber darf ich fragen woher du des mit dem dw erkannt hast?

                  Kommentar


                  • #10
                    danke schaut gut aus, aber darf ich fragen woher du des mit dem dw erkannt hast?
                    OffTopic:
                    meine kollegin liebt den auch heiss und innig, den code erkenn ich auf 100 meter entfernung


                    gruß
                    peter
                    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                    Meine Seite

                    Kommentar


                    • #11
                      mich würd interessiern woran du den genau erkennst, weil kann auch selbst html schreiben und find dass er mir verdammt viel zeit erspart und konnte bisher noch keine wirklichen nachteile erkennen.

                      Kommentar


                      • #12
                        function MM_reloadPage
                        function MM_goToURL
                        und konnte bisher noch keine wirklichen nachteile erkennen.
                        wenn du mal mit css auf einem sehr hohen niveau bist, wirst du das verstehen. diese klickibunti-editoren sind einfach viel zu unflexibel.

                        - kennen keine mehrfachzuweisung von klassen
                        - benötigen im layoutmodus mehr platz als zugewiesen wurde
                        - dadurch wird ein pixelgenaues design komplett zerhauen
                        - der quellcode-editor ist eine ktatastrophe
                        - und so weiter und so fort
                        und find dass er mir verdammt viel zeit erspart
                        mir nicht, bin per hand so schnell wie unsere designer mit ihrem dw

                        gruß
                        peter
                        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                        Meine Seite

                        Kommentar


                        • #13
                          hi, danke hat super geklappt, allerdings hab ich n kleines problem,
                          wegen firefox und internet explorer:

                          über "width" kann ich bei ie genau die leistenbreite festlegen bei firefox
                          is ihm der befehl anscheinend egal oder wird durch was anderes ausser
                          kraft gesetzt.

                          Code:
                          <html>
                          <head>
                          <title>Unbenanntes Dokument</title>
                          <style type="text/css">
                          <!--
                          #Layer1 {
                          	position: relative;
                          	left:13px;
                          	top:110px;
                          	z-index:1;
                          }
                          body {
                          	background-image: url(bilder/karo2.gif);
                          }
                          -->
                          </style>
                          </head>
                          
                          <body>
                          	<div id="Layer1">
                          	  <div id="menue1">
                                  <div id="abstand1">
                          
                                    <div id="schalter1">
                          		  <a href="akt-presse.html" 
                          target="mainFrame">Presse</a> 
                          		  <a href="akt-archiv.html" target="mainFrame">Pressearchiv</a>
                          		  <a href="akt-bilder.html" 
                          target="mainFrame">Bilder</a>
                          		  <a href="akt-termine.html" 
                          target="mainFrame">Termine</a>        </div>
                                  </div>
                                </div>
                          </div>
                          	<style>
                          #menue1 {
                          
                          }
                          #menue1 #abstand1 {
                          border: 1px;
                          padding: 10px;
                          }
                          #schalter1 a {
                          color:#67676B;
                          display: block;
                          padding: 10px;
                          text-decoration: none;
                          border: 1px;
                          width: 130px;
                          font-family:Verdana, Arial, Helvetica, sans-serif;
                          text-align: left;
                          font-size:11px;
                          margin: 3px 0;
                          background-color: #EDEEEE;
                          }
                          #schalter1 a:link {
                          color: #67676B; 
                          }
                          
                          .pfeil1
                          {
                          color:#67676B;
                          }
                          #schalter1 a:hover .pfeil1 {
                          color: #000000;
                          }
                          #schalter1 a:visited {
                          color: #67676B;
                          }
                          #schalter1 a:hover {
                          border: 0px ;
                          border-color: ;
                          background-color: #67676B;
                          color: #fff;
                          }
                          #schalter1 a:active {
                          background-color: #67676B;
                          color: #fff;
                          }
                          #schalter1 a .pfeil1 {
                          
                          color: #EDEEEE;
                          }
                          #schalter1 a:hover .pfeil1 {
                          display: inline;
                          color: #67676B;
                          }
                          #menue1 .toc1 {
                          color: #67676B;
                          font-size: 85%;
                          font-weight: bold;
                          margin: 0 5px 5px;
                          }
                          #menue1 .copy1 {
                          color: #67676B;
                          font-size: 80%;
                          font-weight: normal;
                          margin: 5px 0 0;
                          text-align: right;
                          }
                          #menue1 .space1 {
                          font-size: 1px;
                          margin: 3px 0;
                          }
                          
                          
                          
                          
                          
                          
                          
                          
                          
                          }
                          
                          </style>
                          
                          </body>
                          </html>

                          Kommentar


                          • #14
                            Seit wann hätte den <style> an irgendeiner anderen Stelle als innerhalb von <head> etwas verloren ...?
                            I don't believe in rebirth. Actually, I never did in my whole lives.

                            Kommentar


                            • #15
                              welche doctype-defintion hast du?

                              gruß
                              peter
                              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                              Meine Seite

                              Kommentar

                              Lädt...
                              X