Ergebnis 1 bis 4 von 4

Thema: Probleme mit CSS, es geht um eine Navigation!

  1. #1
    Fragezeichen
    Gast

    Standard Probleme mit CSS, es geht um eine Navigation!

    Hallo,

    Ich habe mehrere Fragen:

    1. ich habe eine Navigation mit 5 Menüpunkten. Wenn ich welche ergänze funktioniert die Animation nicht mehr richtig. Also ich habe folgende Animation: wenn man über den Menüpunkt geht, wird die Zelle mit orange, also die Schrift komplett umrandet. Was muss ich machen damit es einwanfrei funktioniert?

    2. Wie ändere ich die Farbe des Kastens, der die Schrift bei einem MouseOver umrandet? Ich finde den Code in der Datei nicht.

    3. Ich habe in der Tabelle weiße Ränder von den Zellen und weiß nicht wie ich sie wegkriege, bzw in der selben Farbe wie die Tabelle. Es liegt nicht an den Zelleneigenschaften!

    Hier mein HTML Code:

    Code:
    <HTML>
    <HEAD>
    <TITLE>Navi</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <META content=NOINDEX,FOLLOW name=ROBOTS><LINK href="menu-o-Dateien/homepage.css" type=text/css rel=stylesheet>
    <SCRIPT language=JavaScript src="menu-o-Dateien/menu.js"></SCRIPT>
    
    
    <TBODY>
      <TR>
        <TD vAlign=top>
          <TABLE class=MenuOut cellSpacing=0 cellPadding=2 width=140 border=0 style="border-collapse&#58; collapse; border-color&#58; #000000; border-width&#58; 2; background-color&#58; #007DAD">
            <TBODY>
            <TR>
              <TD vAlign=top>
                <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse&#58; collapse">
                  <TBODY>
                  <TR>
                    <TD class=LinkOut id=tdnews onmouseover=MenuEnter&#40;tdnews&#41; 
                    onclick="javascript&#58;top.dj9812u3jeq02.main.navigate&#40;'url_z.b._test.html'&#41;" 
                    onmouseout=MenuLeave&#40;tdnews&#41;>Linkname</TD></TR></TBODY></TABLE>
                <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                  <TBODY>
                  <TR>
                    <TD class=LinkOut id=tdrl onmouseover=MenuEnter&#40;tdrl&#41; 
                    onclick="javascript&#58;top.dj9812u3jeq02.main.navigate&#40;'url_z.b._test.html'&#41;" 
                    onmouseout=MenuLeave&#40;tdrl&#41;>Linkname</TD></TR></TBODY></TABLE>
                <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                  <TBODY>
                  <TR>
                    <TD class=LinkOut id=tdstd onmouseover=MenuEnter&#40;tdstd&#41; 
                    onclick="javascript&#58;top.dj9812u3jeq02.main.navigate&#40;'url_z.b._test.html'&#41;" 
                    onmouseout=MenuLeave&#40;tdstd&#41;>Linkname</TD></TR></TBODY></TABLE>
                <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse&#58; collapse">
                  <TBODY>
                  <TR>
                    <TD class=LinkOut id=tdct onmouseover=MenuEnter&#40;tdct&#41; 
                    onclick="javascript&#58;top.dj9812u3jeq02.main.navigate&#40;'url_z.b._test.html'&#41;" 
                    onmouseout=MenuLeave&#40;tdct&#41;>Linkname</TD></TR></TBODY></TABLE>
                <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse&#58; collapse">
                  <TBODY>
                  <TR>
                    <TD class=LinkOut id=tdgb onmouseover=MenuEnter&#40;tdgb&#41; 
                    onclick="javascript&#58;top.dj9812u3jeq02.main.navigate&#40;'url_z.b._test.html'&#41;" 
                    onmouseout=MenuLeave&#40;tdgb&#41;>Linkname</TD></TR></TBODY></TABLE>
    </BODY></HTML>


    Hier der Java Script COde:
    Code:
    <!--
    function MenuEnter&#40;barId&#41; &#123;barId.className = "Menu";&#125;
    function MenuLeave&#40;barId&#41; &#123;barId.className = "LinkOut";&#125;
    
    var wait = 100;
    var message = "Name der Homepage";
    function typew&#40;&#41;
     &#123;
    window.status= message;	
    setTimeout&#40;"typew&#40;&#41;", wait&#41;;
     &#125;
    typew&#40;&#41;;
    // -->

    Hier der CSS Code:
    Code:
    BODY &#123;
    	SCROLLBAR-FACE-COLOR&#58; rgb&#40;0,0,0&#41;; FONT-SIZE&#58; 12px; SCROLLBAR-HIGHLIGHT-COLOR&#58; rgb&#40;255,255,255&#41;; SCROLLBAR-SHADOW-COLOR&#58; rgb&#40;82,133,184&#41;; SCROLLBAR-3DLIGHT-COLOR&#58; rgb&#40;100,100,100&#41;; SCROLLBAR-ARROW-COLOR&#58; rgb&#40;0,0,0&#41;; SCROLLBAR-TRACK-COLOR&#58; rgb&#40;255,255,255&#41;; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR&#58; #ffffff
    &#125;
    P &#123;
    	FONT-WEIGHT&#58; normal; FONT-SIZE&#58; 12px; COLOR&#58; #000000; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif
    &#125;
    A &#123;
    	FONT-WEIGHT&#58; normal; FONT-SIZE&#58; 12px; COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    A&#58;hover &#123;
    	FONT-WEIGHT&#58; normal; FONT-SIZE&#58; 12px; COLOR&#58; #ff3300; TEXT-DECORATION&#58; underline
    &#125;
    .MainTable &#123;
    	BORDER-RIGHT&#58; #6699cc 1px solid; BORDER-TOP&#58; #6699cc 1px solid; FONT-SIZE&#58; 12px; BORDER-LEFT&#58; #6699cc 1px solid; WIDTH&#58; 98%; COLOR&#58; #000000; BORDER-BOTTOM&#58; #6699cc 1px solid; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION&#58; none
    &#125;
    .MainTable2 &#123;
    	BORDER-RIGHT&#58; #6699cc 1px solid; BORDER-TOP&#58; #6699cc 1px solid; FONT-SIZE&#58; 12px; BORDER-LEFT&#58; #6699cc 1px solid; WIDTH&#58; 98%; COLOR&#58; #000000; BORDER-BOTTOM&#58; #6699cc 1px solid; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION&#58; none
    &#125;
    .orangeTable &#123;
    	BORDER-RIGHT&#58; #ff9933 1px solid; BORDER-TOP&#58; #ff9933 1px solid; FONT-SIZE&#58; 12px; BORDER-LEFT&#58; #ff9933 1px solid; WIDTH&#58; 100%; COLOR&#58; #000000; BORDER-BOTTOM&#58; #ff9933 1px solid; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION&#58; none
    &#125;
    .RedLine &#123;
    	BORDER-RIGHT&#58; #ff9933 1px solid; BORDER-TOP&#58; #ff9933 1px solid; FONT-SIZE&#58; 3px; BORDER-LEFT&#58; #ff9933 1px solid; WIDTH&#58; 100%; COLOR&#58; #000000; BORDER-BOTTOM&#58; #ff9933 1px solid; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION&#58; none
    &#125;
    .CFooter &#123;
    	BORDER-RIGHT&#58; #cacaca 1px solid; BORDER-TOP&#58; #cacaca 1px solid; FONT-SIZE&#58; 9px; BORDER-LEFT&#58; #cacaca 1px solid; WIDTH&#58; 98%; BORDER-BOTTOM&#58; #cacaca 1px solid; BACKGROUND-COLOR&#58; #e1e1e1
    &#125;
    .red1 &#123;
    	FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 12px; COLOR&#58; #ff3300; TEXT-DECORATION&#58; none
    &#125;
    .kop &#123;
    	FONT-WEIGHT&#58; normal; FONT-SIZE&#58; 18px; COLOR&#58; #ff6600; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION&#58; none
    &#125;
    .link1 &#123;
    	FONT-SIZE&#58; 12px; COLOR&#58; #0066ff; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION&#58; none
    &#125;
    .text &#123;
    	FONT-SIZE&#58; 12px; COLOR&#58; #000000; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION&#58; none
    &#125;
    .link2 &#123;
    	FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 12px; COLOR&#58; #ff6600; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION&#58; none
    &#125;
    .TopInfo &#123;
    	FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 12px; COLOR&#58; #ffffff; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR&#58; #6699cc; TEXT-DECORATION&#58; none
    &#125;
    .Menu &#123;
    	BORDER-RIGHT&#58; #484848 1px solid; BORDER-TOP&#58; #484848 1px solid; PADDING-LEFT&#58; 6px; FONT-SIZE&#58; 12px; PADDING-BOTTOM&#58; 3px; BORDER-LEFT&#58; #484848 1px solid; CURSOR&#58; hand; PADDING-TOP&#58; 1px; BORDER-BOTTOM&#58; #484848 1px solid; BACKGROUND-COLOR&#58; #ff9900
    &#125;
    .MenuOut &#123;
    	BORDER-RIGHT&#58; #6699cc 1px solid; BORDER-TOP&#58; #6699cc 1px solid; BORDER-LEFT&#58; #6699cc 1px solid; BORDER-BOTTOM&#58; #6699cc 1px solid; BACKGROUND-COLOR&#58; #fcfcfc
    &#125;
    .MenuOutHeader &#123;
    	BORDER-RIGHT&#58; #484848 1px solid; PADDING-RIGHT&#58; 6px; BORDER-TOP&#58; #484848 1px solid; BORDER-LEFT&#58; #484848 1px solid; BACKGROUND-COLOR&#58; #dddddd
    &#125;
    .MenuOutHeaderText &#123;
    	PADDING-LEFT&#58; 10px; FONT-SIZE&#58; 12px; COLOR&#58; red
    &#125;
    .LinkOut &#123;
    	BORDER-RIGHT&#58; #fcfcfc 1px solid; BORDER-TOP&#58; #fcfcfc 1px solid; PADDING-LEFT&#58; 6px; FONT-SIZE&#58; 12px; BORDER-LEFT&#58; #fcfcfc 1px solid; CURSOR&#58; hand; PADDING-TOP&#58; 1px; BORDER-BOTTOM&#58; #fcfcfc 1px solid
    &#125;
    .MenuOut TD.LinkOut &#123;
    	BORDER-RIGHT&#58; #fcfcfc 1px solid; BORDER-TOP&#58; #fcfcfc 1px solid; PADDING-LEFT&#58; 6px; FONT-SIZE&#58; 12px; PADDING-BOTTOM&#58; 3px; BORDER-LEFT&#58; #fcfcfc 1px solid; CURSOR&#58; hand; PADDING-TOP&#58; 1px; BORDER-BOTTOM&#58; #fcfcfc 1px solid
    &#125;
    .Menu A &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .Menu A&#58;hover &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .Menu A&#58;visited &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .Menu A&#58;active &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .MainTable2 A &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .MainTable2 A&#58;hover &#123;
    	COLOR&#58; red; TEXT-DECORATION&#58; none
    &#125;
    .MainTable2 A&#58;visited &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .MainTable2 A&#58;active &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .LinkOut A &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .LinkOut A&#58;hover &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .LinkOut A&#58;visited &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .LinkOut A&#58;active &#123;
    	COLOR&#58; black; TEXT-DECORATION&#58; none
    &#125;
    .linx &#123;
    	FONT-WEIGHT&#58; normal; FONT-SIZE&#58; 12px; COLOR&#58; #000000; FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif
    &#125;
    Ich denke in diesem Code ist eine menge überfüssiges Zeug drin. Was davon brauche ich wirklich?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Fragezeichen
    Gast

    Standard

    Also wäre echt nett wenn mir jemand helfen würde! Danke!!!

  3. #3
    Samurai
    Registriert seit
    04.05.2004
    Ort
    @Home
    Beiträge
    208
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    kann man die seite irgendwo anschauen???
    Gruss Joel

  4. #4
    Fortgeschrittene/r
    Registriert seit
    14.10.2003
    Ort
    Germany
    Beiträge
    194
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wozu denn mit JavaScript, wenn's auch mit purem CSS geht??

    Hier nur mal als Beispiel auf die Schnelle:

    Tabelle mit Links

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>css-navi</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="author" content="Ed Home">
    <meta name="generator" content="PHASE V HTML EDITOR">
    
    <style type="text/css">
    <!--
    body &#123;
       SCROLLBAR-FACE-COLOR&#58; rgb&#40;0,0,0&#41;;
       FONT-SIZE&#58; 12px;
       SCROLLBAR-HIGHLIGHT-COLOR&#58;rgb&#40;255,255,255&#41;;
       SCROLLBAR-SHADOW-COLOR&#58; rgb&#40;82,133,184&#41;;
       SCROLLBAR-3DLIGHT-COLOR&#58; rgb&#40;100,100,100&#41;;
       SCROLLBAR-ARROW-COLOR&#58; rgb&#40;0,0,0&#41;;
       SCROLLBAR-TRACK-COLOR&#58; rgb&#40;255,255,255&#41;;
       FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif;
       BACKGROUND-COLOR&#58; #ffffff
    &#125;
    table &#123;
    border&#58; 5px ridge silver;
    background-color&#58; #007DAD;
    width&#58;150px;
     &#125;
    
    td &#123;
    BACKGROUND-COLOR&#58;#6699cc;
    border&#58;5px dashed blue;
    width&#58;100%;
    margin&#58;5px;
    padding-left&#58;7px;
     &#125;
    
    a &#123;
     FONT-FAMILY&#58; Verdana, Arial, Helvetica, sans-serif;
     font-size&#58;11px;
     BACKGROUND&#58; #6699cc;
     color&#58; black;
     TEXT-DECORATION&#58;none;
     width&#58;140px;
     height&#58;13px;
     display&#58;block;
     padding&#58;2px;
    &#125;
    a&#58;link &#123;color&#58;black;&#125;
    a&#58;focus &#123;background&#58;orange;&#125;
    a&#58;visited &#123; color&#58;black; &#125;
    a&#58;hover, a&#58;active &#123; background&#58;orange; color&#58;blue;&#125;
    a&#58;active &#123; background&#58;orange; color&#58;red;&#125;
    -->
    </style>
    </head>
    <body>
     <table>
     <thead>
        <tr>
          <th>Link Menu
        </th>
      </tr>
     </thead>
        <tfoot>
         <tr>
          <td>  </td>
        </tr>
         </tfoot>
    
    <tbody>
        <tr>
     <td>Linkname 1</td>
    </tr>
    <tr>
     <td>Link 2</td>
    </tr>
    <tr>
     <td>Linkname 3</td>
    </tr>
    <tr>
     <td>Linkname 400</td>
    </tr>
    <tr>
     <td>Linkname 5</td>
    </tr>
    <tr>
     <td>Linkname 6</td>
    </tr>
    <tr>
     <td>Linkname 70</td>
    </tr>
    <tr>
     <td>Linkname 8...</td>
    
      </tr>
       </tbody>
         </table>
    
    
     
    
    </p>
     
    
    </p>
     
    
    </p>
     
    
    </p>
      
      
    
     This Page Is Valid HTML 4.01 Transitional!</p>
    
    </body>
    </html>

Ähnliche Themen

  1. Probleme mit Navigation
    Von Cbot im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 03.03.2008, 17:21
  2. Navigation geht net
    Von El im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 04.04.2007, 20:00
  3. Dingend gesucht: Eine KOMPASS-NAVIGATION :-)
    Von Neela im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 11.07.2006, 08:57
  4. Probleme in Navigation!
    Von beNNi im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 24.05.2006, 05:34
  5. Wie macht man sich eine gut aussehende Navigation?
    Von Michael_A im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 14.05.2006, 08:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •