Link Problem

seeyoursite

Ich haben vollgendendes Problem und zwar ich habe ich eine Tabelle wo sich Links befinden.
Ich möchte das beim Hover efekt vor dem Link (1.Spalte) eine Grafik angezeigt wird. Und das beide Spalten die Hintergrund farbe ändern.

Geht das überhaupt?

Code

<table border="0" cellspacing="0" cellpadding="0" width="157" >
	<tr>
		<td class="menu_rot" width="16"></td>
		<td class="menu_rot" width="141">
		[url='index.htm']Startseite[/url]</td>
	</tr>
	<tr>
		<td class="menu_weiss" width="16"></td>
		<td class="menu_weiss" width="141"></td>
	</tr>
	<tr>
		<td class="menu_rot" width="16"></td>
		<td class="menu_rot" width="141">Test</td>
	</tr>
	</table>

Alles anzeigen

::RMB::

jup geht mit CSS hab das auch kürzlich gemacht.
Im head Breich

Code

<style type="text/css">
a:hover { font-weight:bold; } /* Hover für Links */ 


/* Für das Menü */
td.menu { background-image:url(images/obutton.png); padding:1px; border-spacing:0px; font-weight:normal; }
td.menu:link    { background-image:url(images/obutton.png); }
td.menu:hover   { background-image:url(images/obutton2.png); }


</style>

Alles anzeigen

deine Tabelle

Code

<table border="0" cellspacing="0" cellpadding="0" width="157" >
   <tr>
      <td class="menu" width="16"></td>
      <td class="menu" width="141">
      [url='index.htm']Startseite[/url]</td>
   </tr>
   <tr>
      <td class="menu" width="16"></td>
      <td class="menu" width="141"></td>
   </tr>
   <tr>
      <td class="menu" width="16"></td>
      <td class="menu" width="141">Test</td>
   </tr>
   </table>

Alles anzeigen

du kannst oben (css) auch mehrere machen z.b. menu menurot etc.
anstatt background-image nimmst du background-color und schreibst deine Werte rein z.B.

Code

a:hover { font-weight:bold; } /* Hover für Links */ 


/* Für das Menü */
td.menu { background-color:#000000; padding:1px; border-spacing:0px; font-weight:normal; }

td.menu ist das normale das aktiv ist td.menu:hover ist das wenn die Maus drüber ist und td.menu:link ist das wenn die Maus über dem Link ist also die Veränderung des Linktextes.

seeyoursite

Ich meine das so. Wie im bild das weiss ist der hover efekt.

::RMB::

anstatt nur das kleine Kreuz als Bild zu nehmen würde ich jetzt mal die ganze länge als Bild machen
und ein zweites wenn es nicht aktiv ist.
aber beide gleichgross.

seeyoursite

Danke für die schnelle Hilfe. Nur ein kleines Prob. gibt es noch der doofe ie zeigt das nicht an Firefox aber schon.

Code

<tr>
		<td class="menu" width="157" colspan="2">
		[url='index.htm']Ihr Vorteile[/url]</td>
	</tr>

CSS

Code

td.menu {  
 background-color: #cbded2; 
 height: 18px;
 font-family: Verdana; 
 font-weight: normal;
 color:#000000; 
 font-size: 13px; } 
A.menu {
 font-family: Verdana; 
 font-weight: normal;
 color:#000000; 
 font-size: 13px;
 text-decoration: none
}
A.menu:hover {
 font-family: Verdana; 
 font-weight: normal;
 color:#000000; 
 font-size: 13px;
 text-decoration: none
}
td.menu:link    { background-image:url(images/menu_gruen.gif); } 
td.menu:hover   { background-image:url(images/menu_weiss.gif); }

Alles anzeigen

seeyoursite

Problem mit dem Browser behoben:

code]<script language="JavaScript">
<!--
// Browsererkennung
if (navigator.userAgent.indexOf("Firefox") > 0){ document.write("<LINK REL=\"stylesheet\" HREF=\"style.css\" TYPE=\"text/css\">");}

if (navigator.userAgent.indexOf("MSIE") > 0 &&
navigator.userAgent.indexOf("Opera") < 0){ document.write("<LINK REL=\"stylesheet\" HREF=\"style_ie.css\" TYPE=\"text/css\">");}

// --> </script>[[/code]

Aber jetzt habe ich noch ein großes problem mit den link efekten.

Siehe bilder

Code

.menu_rot {
 
 height: 24px;
 font-family: Verdana; 
 font-weight: bold;
 color:#ffffff; 
 font-size: 14px;
}
td.menu_rot {background-color: #cf0909;}
td.menu_rot:link { background-color: #cf0909;}
td.menu_rot:hover    { background-image:url(images/menu_gruen.gif); color:#cf0909;  }


A.menu_rot {color: #ffffff; text-decoration: none}
A.menu_rot:hover   {color: #cf0909; text-decoration: none}

Alles anzeigen

::RMB::

mach doch

Code

td.menu_rot {background-color: #cf0909; color:#990000;}

Farbwert halt noch anpassen.

seeyoursite

es soll so wie die zweite zelle mal aussehen. nur ist noch kein link drinf oben ja.

::RMB::

welche Farbe soll der Link normal haben? - Weisss
welche beim Hover??

seeyoursite

es soll so aussehen wie bei "Das Produkt". nur da fehlt der link weil wie du siehst macht er beim hover in der td nicht die schrift rot.

::RMB::

mach doch im xxx.a:hover font-color: Farbe;

seeyoursite

Code

td.menu_rot {background-color: #cf0909; color:#ffffff;}
td.menu_rot:link { background-color: #cf0909; color:#ffffff;}
td.menu_rot:hover    { background-image:url(images/menu_gruen.gif); color: #cf0909; }


A.menu_rot {color: #ffffff; text-decoration: none}
A.menu_rot:hover   {color: #cf0909; text-decoration: none}

das ding soll wenn ich in der td bin NICHT über den link bin schon so machen als ob ich drüber wäre sprich so wie bei "Das Produckt".

das muss doch möglich sein.

::RMB::

Ich verstehe irgendwie nicht was du genau meinst.
Willst du wenn du über dem Link bist den Hover effekt oder auch wenn du in der td bist?

userschweiz

Ich habe, glaube ich, ein ähnlich gelagertes Problem mit der Navigationsleiste. Im Firefox alles super aber im MS IE ist sie viel weniger hoch. Hier zu sehen http://www.tradingmonk.com/testlauf.html

Hättet Ihr da einen Tip?

Sorry, dass ich keinen helfenden Beitrag zu Eurem Problem liefern kann. Danke im Voraus für etwaige Tips.

userschweiz

Ups, habe Hilfe erhalten. Sieht jetzt bei beiden Browsern gleich aus. Zu sehen unter dem gleichen Link. Sorry für die Belästigung....

seeyoursite

Ich habe das Problem jetzt so gelöst.

Code

A.menu_rot {
				display:block;
				width:142px;
				height: 20px;
				padding:4px 3px 2px 12px;
				border-collapse:collapse;
				color: #ffffff;
				text-decoration:none; 
				font-variant: normal; 
				font-weight: bold;
				font-size: 14px; 
				letter-spacing: 1px; 
				background-color: #cf0909;
			}


A.menu_rot:hover{
				background-color: #cbded2;
				color: #cf0909;
			}

Alles anzeigen

Also nur test

Tags