✔ Schönes Menü

[Maximus]

Hi Leute,

ich habe den ganzen Nachmittag damit verbracht, das Menü von http://www.microsoft.com/germany nachzubauen.
Aber leider habe ich es nicht ganz geschafft. Vielleicht kann mir
ja von Euch jemand helfen:

So habe ich es bisher gelöst:

//print "<table width=\"180\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">";
	//print "<td><img src=\"Bilder/menue_top.gif\" width=\"180\" height=\"30\"></td>";
	//print "<tr>";
    //print "<td onMouseOver=\"this.bgColor='FFFFCC';\" onMouseOut=\"this.bgColor='#FFFFFF';\"><a href=\"$menu_1_url\">$menu_1_text</td>";
  	//print "</tr>";
  	//print "<tr>";
    //print "<td  onMouseOver=\"this.bgColor='FFFFCC';\" onMouseOut=\"this.bgColor='#FFFFFF';\"><a href=\"$menu_2_url\">$menu_2_text</td>";
  	//print "</tr>";
  	//print "<tr>";
    //print "<td  onMouseOver=\"this.bgColor='FFFFCC';\" onMouseOut=\"this.bgColor='#FFFFFF';\"><a href=\"$menu_3_url\">$menu_3_text</td>";
  	//print "</tr>";
  	//print "<tr>";
    //print "<td  onMouseOver=\"this.bgColor='FFFFCC';\" onMouseOut=\"this.bgColor='#FFFFFF';\"><a href=\"$menu_4_url\">$menu_4_text</td>";
  	//print "</tr>";
  	//print "<tr>";
    //print "<td b onMouseOver=\"this.bgColor='FFFFCC';\" onMouseOut=\"this.bgColor='#FFFFFF';\"><a href=\"$menu_5_url\">$menu_5_text</td>";
  	//print"</tr>";
	//print "</table>";

Dummerweise sind da noch folgende Fehler:
1.) Wie bekomme ich es hin, dass der ich nur einen Rand um die gesamte Tabelle bekomme und nicht um die einzelnen Zellen?
2.) Der Mouseover-Effekt verändert ja die Zellenfarbe. Aber zusätzlich soll er noch den Zellenrand ändern. Wie geht das?

 

[Mr. FISHMAN]

ich mach das immer so:

Variante 1:

<table>
<tr>
<td>
<table border=0>
//eigentliche Tabelle
</table>
</td>
</tr>
</table>

Jezze kannst dann der äußeren Tab nen Rahmen geben oder du machst:

border=0 cellpadding=1 bgcolor=#000000
cellpadding gibt dann die dickte des rahmens an!

grtz MrF

 

[Maximus]

Aber damit bekommt man nicht annähernd so etwas hin, wie das Beispiel-Menü!

 

[Mr. FISHMAN]

versuch ma:

<table width="100" cellspacing="0" cellpadding="0" border="0">
<tr><td bgcolor="#00C0FF">Bild</td></tr>
<tr><td>
<table width="100%" bgcolor="#000000" cellpadding="1" cellspacing="0" border="0" >
<tr><td>
<table cellspacing="0" cellpadding="0" align="center" width="100%" border="0" bgcolor="#ffffff">
<tr><td>
  <table border="0" width="100%" onMouseOver="this.bgColor='#00C0FF';" onMouseOut="this.bgColor='#FFFFFF';">
   <tr><td valign="top"><img src="" height="20" width="20" ></td><td valign="middle">Blablabla</td></tr>
  </table>
</td></tr>
<tr><td>
  <table border="0" width="100%" onMouseOver="this.bgColor='#00C0FF';" onMouseOut="this.bgColor='#FFFFFF';">
   <tr><td valign="top"><img src="" height="20" width="20" ></td><td valign="middle">Blablabla</td></tr>
  </table>
</td></tr>
</tr>
<tr><td><hr width="80%"></td></tr>
<tr><td>
  <table border="0" width="100%" onMouseOver="this.bgColor='#00C0FF';" onMouseOut="this.bgColor='#FFFFFF';">
   <tr><td valign="top"><img src="" height="20" width="20" ></td><td valign="middle">Blablabla</td></tr>
  </table>
</td></tr>
<tr><td>
  <table border="0" width="100%" onMouseOver="this.bgColor='#00C0FF';" onMouseOut="this.bgColor='#FFFFFF';">
   <tr><td valign="top"><img src="" height="20" width="20" ></td><td valign="middle">Blablabla</td></tr>
  </table>
</td></tr>
</table>
</td></tr></table>
</td></tr></table>

 

[Mr. FISHMAN]

ach und das mit dem link:

<table border="0" width="100%" onMouseOver="this.bgColor='#00C0FF';" onMouseOut="this.bgColor='#FFFFFF';" onMouseDown="document.location='http://fishman.de';">

kannst auch onClick="" nehmen!

 

[simu]

wieder einmal css...

html:

<ul class="menu">

     <li>

          <h1>test</h1>

     </li>

     <li>

          <a href="testlink">test</a>

     </li>

     <li>

          <a href="testlink">test</a>

     </li>

     <li>

          <a href="testlink">test</a>

     </li>

</ul>

css:

.menu {
width:120px;
background-color:#fff;
color:#000;
border:1px solid #eee;
list-style-type:none;
padding:0; }

.menu li {
display:block;
padding:0;
margin:0; }

.menu h1 {
display:block;
font-size:1.1em;
width:110px;
background-color:#eee;
color:#000;
margin:0;
padding:5px; }

.menu a {
display:block;
width:108px;
background-color:#fff;
color:#000;
border:1px solid #fff;
margin:0;
padding:5px; }

.menu a:hover {
background-color:#ddd;
color:#000;
border:1px solid #bbb; }

Farben und Schrift kann selbstverständlich angepasst werden...

 

[Maximus]

@Simu:

Ja, vielen Dank. Habe mir einen früheren Post von Dir angeschaut und es dann ebenfalls so gelöst. Trotzdem allen BESTEN DANK!

 

[Daniel Mannheimer]

nochmal ne frage dazu:

wie wird bei Micro$oft die ganze Zeile eingefärbt, also auch das pic im TD vor dem link?

 

[THE REAL TOOLKIT]

Nee.
Ist einfach so das das Bild immer ne größere Sichtbarkeit hat als ein Hintergrund.

 

[Daniel Mannheimer]

das bild steht in ner eigenen spalte, vor dem eigentlichen link:

<TR>
<TD vAlign=top><IMG height=21 alt="" src="/germany/library/images/navigation/ico_office_xp.gif" width=31></TD>
<TD><A class=navtext href="http://www.microsoft.com/isapi/gomscom.asp?target=/germany/office/">Office</A></TD>
<TD><IMG height=1 alt="" src="/germany/1ptrans.gif" width=5></TD>
</TR>

da läuft aber noch javascript mit rein, wie ich grad gesehn hab:

<SCRIPT language=JavaScript>
  global_navigation('P');
</SCRIPT>