Probleme mit CSS, es geht um eine Navigation!

Fragezeichen

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: collapse; border-color: #000000; border-width: 2; background-color: #007DAD">
        <TBODY>
        <TR>
          <TD vAlign=top>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse: collapse">
              <TBODY>
              <TR>
                <TD class=LinkOut id=tdnews onmouseover=MenuEnter(tdnews) 
                onclick="javascript:top.dj9812u3jeq02.main.navigate('url_z.b._test.html')" 
                onmouseout=MenuLeave(tdnews)>[url='url']Linkname[/url]</TD></TR></TBODY></TABLE>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=LinkOut id=tdrl onmouseover=MenuEnter(tdrl) 
                onclick="javascript:top.dj9812u3jeq02.main.navigate('url_z.b._test.html')" 
                onmouseout=MenuLeave(tdrl)>[url='url']Linkname[/url]</TD></TR></TBODY></TABLE>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=LinkOut id=tdstd onmouseover=MenuEnter(tdstd) 
                onclick="javascript:top.dj9812u3jeq02.main.navigate('url_z.b._test.html')" 
                onmouseout=MenuLeave(tdstd)>[url='url']Linkname[/url]</TD></TR></TBODY></TABLE>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse: collapse">
              <TBODY>
              <TR>
                <TD class=LinkOut id=tdct onmouseover=MenuEnter(tdct) 
                onclick="javascript:top.dj9812u3jeq02.main.navigate('url_z.b._test.html')" 
                onmouseout=MenuLeave(tdct)>[url='url']Linkname[/url]</TD></TR></TBODY></TABLE>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse: collapse">
              <TBODY>
              <TR>
                <TD class=LinkOut id=tdgb onmouseover=MenuEnter(tdgb) 
                onclick="javascript:top.dj9812u3jeq02.main.navigate('url_z.b._test.html')" 
                onmouseout=MenuLeave(tdgb)>[url='url']Linkname[/url]</TD></TR></TBODY></TABLE>
</BODY></HTML>

Alles anzeigen

Hier der Java Script COde:

Code

<!--
function MenuEnter(barId) {barId.className = "Menu";}
function MenuLeave(barId) {barId.className = "LinkOut";}


var wait = 100;
var message = "Name der Homepage";
function typew()
 {
window.status= message;	
setTimeout("typew()", wait);
 }
typew();
// -->

Alles anzeigen

Hier der CSS Code:

Code

BODY {
	SCROLLBAR-FACE-COLOR: rgb(0,0,0); FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: rgb(255,255,255); SCROLLBAR-SHADOW-COLOR: rgb(82,133,184); SCROLLBAR-3DLIGHT-COLOR: rgb(100,100,100); SCROLLBAR-ARROW-COLOR: rgb(0,0,0); SCROLLBAR-TRACK-COLOR: rgb(255,255,255); FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #ffffff
}
P {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
A {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ff3300; TEXT-DECORATION: underline
}
.MainTable {
	BORDER-RIGHT: #6699cc 1px solid; BORDER-TOP: #6699cc 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #6699cc 1px solid; WIDTH: 98%; COLOR: #000000; BORDER-BOTTOM: #6699cc 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.MainTable2 {
	BORDER-RIGHT: #6699cc 1px solid; BORDER-TOP: #6699cc 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #6699cc 1px solid; WIDTH: 98%; COLOR: #000000; BORDER-BOTTOM: #6699cc 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.orangeTable {
	BORDER-RIGHT: #ff9933 1px solid; BORDER-TOP: #ff9933 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #ff9933 1px solid; WIDTH: 100%; COLOR: #000000; BORDER-BOTTOM: #ff9933 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.RedLine {
	BORDER-RIGHT: #ff9933 1px solid; BORDER-TOP: #ff9933 1px solid; FONT-SIZE: 3px; BORDER-LEFT: #ff9933 1px solid; WIDTH: 100%; COLOR: #000000; BORDER-BOTTOM: #ff9933 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.CFooter {
	BORDER-RIGHT: #cacaca 1px solid; BORDER-TOP: #cacaca 1px solid; FONT-SIZE: 9px; BORDER-LEFT: #cacaca 1px solid; WIDTH: 98%; BORDER-BOTTOM: #cacaca 1px solid; BACKGROUND-COLOR: #e1e1e1
}
.red1 {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ff3300; TEXT-DECORATION: none
}
.kop {
	FONT-WEIGHT: normal; FONT-SIZE: 18px; COLOR: #ff6600; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.link1 {
	FONT-SIZE: 12px; COLOR: #0066ff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.text {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.link2 {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ff6600; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.TopInfo {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #6699cc; TEXT-DECORATION: none
}
.Menu {
	BORDER-RIGHT: #484848 1px solid; BORDER-TOP: #484848 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 3px; BORDER-LEFT: #484848 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: #484848 1px solid; BACKGROUND-COLOR: #ff9900
}
.MenuOut {
	BORDER-RIGHT: #6699cc 1px solid; BORDER-TOP: #6699cc 1px solid; BORDER-LEFT: #6699cc 1px solid; BORDER-BOTTOM: #6699cc 1px solid; BACKGROUND-COLOR: #fcfcfc
}
.MenuOutHeader {
	BORDER-RIGHT: #484848 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #484848 1px solid; BORDER-LEFT: #484848 1px solid; BACKGROUND-COLOR: #dddddd
}
.MenuOutHeaderText {
	PADDING-LEFT: 10px; FONT-SIZE: 12px; COLOR: red
}
.LinkOut {
	BORDER-RIGHT: #fcfcfc 1px solid; BORDER-TOP: #fcfcfc 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; BORDER-LEFT: #fcfcfc 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: #fcfcfc 1px solid
}
.MenuOut TD.LinkOut {
	BORDER-RIGHT: #fcfcfc 1px solid; BORDER-TOP: #fcfcfc 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 3px; BORDER-LEFT: #fcfcfc 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: #fcfcfc 1px solid
}
.Menu A {
	COLOR: black; TEXT-DECORATION: none
}
.Menu A:hover {
	COLOR: black; TEXT-DECORATION: none
}
.Menu A:visited {
	COLOR: black; TEXT-DECORATION: none
}
.Menu A:active {
	COLOR: black; TEXT-DECORATION: none
}
.MainTable2 A {
	COLOR: black; TEXT-DECORATION: none
}
.MainTable2 A:hover {
	COLOR: red; TEXT-DECORATION: none
}
.MainTable2 A:visited {
	COLOR: black; TEXT-DECORATION: none
}
.MainTable2 A:active {
	COLOR: black; TEXT-DECORATION: none
}
.LinkOut A {
	COLOR: black; TEXT-DECORATION: none
}
.LinkOut A:hover {
	COLOR: black; TEXT-DECORATION: none
}
.LinkOut A:visited {
	COLOR: black; TEXT-DECORATION: none
}
.LinkOut A:active {
	COLOR: black; TEXT-DECORATION: none
}
.linx {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

Alles anzeigen

Ich denke in diesem Code ist eine menge überfüssiges Zeug drin. Was davon brauche ich wirklich?

Fragezeichen

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

joel

kann man die seite irgendwo anschauen???

Ed Home

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

Hier nur mal als Beispiel auf die Schnelle:

Tabelle mit Links

HTML

<!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 {
   SCROLLBAR-FACE-COLOR: rgb(0,0,0);
   FONT-SIZE: 12px;
   SCROLLBAR-HIGHLIGHT-COLOR:rgb(255,255,255);
   SCROLLBAR-SHADOW-COLOR: rgb(82,133,184);
   SCROLLBAR-3DLIGHT-COLOR: rgb(100,100,100);
   SCROLLBAR-ARROW-COLOR: rgb(0,0,0);
   SCROLLBAR-TRACK-COLOR: rgb(255,255,255);
   FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
   BACKGROUND-COLOR: #ffffff
}
table {
border: 5px ridge silver;
background-color: #007DAD;
width:150px;
 }


td {
BACKGROUND-COLOR:#6699cc;
border:5px dashed blue;
width:100%;
margin:5px;
padding-left:7px;
 }


a {
 FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
 BACKGROUND: #6699cc;
 color: black;
 TEXT-DECORATION:none;
 width:140px;
 height:13px;
 display:block;
 padding:2px;
}
a:link {color:black;}
a:focus {background:orange;}
a:visited { color:black; }
a:hover, a:active { background:orange; color:blue;}
a:active { background:orange; color:red;}
-->
</style>
</head>
<body>
 <table>
 <thead>
    <tr>
      <th>Link Menu
    </th>
  </tr>
 </thead>
    <tfoot>
     <tr>
      <td>  </td>
    </tr>
     </tfoot>


<tbody>
    <tr>
 <td>[url='#']Linkname 1[/url]</td>
</tr>
<tr>
 <td>[url='']Link 2[/url]</td>
</tr>
<tr>
 <td>[url='#']Linkname 3[/url]</td>
</tr>
<tr>
 <td>[url='#']Linkname 400[/url]</td>
</tr>
<tr>
 <td>[url='#']Linkname 5[/url]</td>
</tr>
<tr>
 <td>[url='#']Linkname 6[/url]</td>
</tr>
<tr>
 <td>[url='#']Linkname 70[/url]</td>
</tr>
<tr>
 <td>[url='#']Linkname 8...[/url]</td>


  </tr>
   </tbody>
     </table>




 


</p>
 


</p>
 


</p>
 


</p>




 This Page Is Valid HTML 4.01 Transitional!</p>


</body>
</html>

Alles anzeigen

Tags