Schönes Menü

Status
Nicht offen für weitere Antworten.

Maximus

Erfahrenes Mitglied
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:
Code:
//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?
 
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
 
versuch ma:

Code:
<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>
 
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!
 
wieder einmal css...

html:

Code:
<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:
Code:
.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...
 
@Simu:

Ja, vielen Dank. Habe mir einen früheren Post von Dir angeschaut und es dann ebenfalls so gelöst. Trotzdem allen BESTEN DANK!
 
das bild steht in ner eigenen spalte, vor dem eigentlichen link:

PHP:
<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:

PHP:
<SCRIPT language=JavaScript>
  global_navigation('P');
</SCRIPT>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück