Tabellenfelder als Links

Kir-Kanos

Hallo,
ich habe eine sagen wir x * y große Tabelle, und möchte die einzelnen Tabellenfelder als Links darstellen. Jetzt möchte ich jeweils mit einem mousover effekt die Tabellenfelder so konfigurieren, dass wenn sich die Maus über dem Tabellenfeld befindet, sich der Rahmen dieses Feldes in einen roten verwandelt.

Den Hintergrund kann ich ändern:

PHP

onmouseover="this.style.backgroundColor='#666666'"
onmouseout="this.style.backgroundColor=''"
onclick="javascript:location.href='<?php echo $session->url("xxx.php")?>';" bgcolor="#C0C0C0">

Das klappt einwandfrei, aber wieso bin ich zu dumm, nur den Rahmen zu ändern?

Gruß
Kir

Html-Neuling

hmm du machst es mit JS... und davon hab ich null ahnung ...
CSS willst du nicht nehmen oder?

Kir-Kanos

würd ich auch nehmen, wenn es klappt... nur davon hab ich wiederum keine Ahnung

Ronald

Moin!

Schau mal hier -> http://web306.server3.webplus24.de/demo - ich hab da so etwas eingebaut. Quelltext ist dabei, versuche es zu verstehen oder frage sonst hier wieder nach

G.a.d.M.

Ronald

Html-Neuling

Zitat von Ronald

Moin!

Schau mal hier -> http://web306.server3.webplus24.de/demo - ich hab da so etwas eingebaut. Quelltext ist dabei, versuche es zu verstehen oder frage sonst hier wieder nach

G.a.d.M.

Ronald

na das ist aber doch mit CSS?
er wills doch mit JS machen?! wenn das überhaupt geht ( hab keinen plan von JS )

Ronald

Häh ?

Zitat von Html-Neuling

CSS willst du nicht nehmen oder?

Zitat von Kir-Kanos

würd ich auch nehmen, wenn es klappt... nur davon hab ich wiederum keine Ahnung

Dann kam mein Beispiel und nun schreibst du ..

Zitat von Html-Neuling

na das ist aber doch mit CSS?
er wills doch mit JS machen?! wenn das überhaupt geht ( hab keinen plan von JS )

Brauch ich 'ne Brille, oder du?

Fragt ...

Ronald

Ivanman

So würd das Ganze z.B. mit CSS aussehen!

test.html:

HTML

<html>
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>


<body>


<center>
	<table border="0" width="85%" cellspacing="0" cellpadding="0">
		<tr>
			<td width="35%" align="center"><div class="test" >[url='#']Link #1[/url]</div></td>
			<td></td>
			<td width="35%" align="center"><div class="test" >[url='#']Link #2[/url]</div></td>
			<td></td>
			<td width="35%" align="center"><div class="test" >[url='#']Link #3[/url]</div></td>
		</tr>
		<tr>
			<td>
			</td>
		</tr>
		<tr>
			<td width="35%" align="center"><div class="test" >[url='#']Link #4[/url]</div></td>
			<td></td>
			<td width="35%" align="center"><div class="test" >[url='#']Link #5[/url]</div></td>
			<td></td>
			<td width="35%" align="center"><div class="test" >[url='#']Link #6[/url]</div></td>
		</tr>
	</table>
</center>
</body>
</html>

Alles anzeigen

style.css:

Code

a         
{display: block; 
 font-size: 12px; 
 font-weight:bold; 
 color:#CEDCE3; 
 background-color: #336699;
 border: 2px;
 border-style: solid;
 border-color: #336699;
 text-decoration: none;
}


a:link         
{display: block; 
 font-size: 12px; 
 font-weight:bold; 
 color:#CEDCE3; 
 background-color: #336699;
 border: 2px;
 border-style: solid;
 border-color: #336699;
 text-decoration: none;
}


a:visitet       
{display: block; 
 font-size: 12px; 
 font-weight:bold; 
 color:#CEDCE3; 
 background-color: #336699;
 border: 2px;
 border-style: solid;
 border-color: #336699;
 text-decoration: none;
}


a:active         
{display: block; 
 font-size: 12px; 
 font-weight:bold; 
 color:#CEDCE3; 
 background-color: #336699;
 border: 2px;
 border-style: solid;
 border-color: #FF0000;
 text-decoration: none;
}


a:hover         
{display: block; 
 font-size: 12px; 
 font-weight:bold; 
 color:#CEDCE3; 
 background-color: #336699;
 border: 2px;
 border-style: solid;
 border-color: #FF0000;
 text-decoration: none;
}

Alles anzeigen

Ronald

Ähem ...

Zitat von Ivanman

So würd das Ganze z.B. mit CSS aussehen!

'tschuldige wenn ich dich kritisiere, aber das ist ziemlicher Unfug was du als CSS-Datei geschrieben hast - oder anders gesagt: es geht wesentlich kürzer.

"visitet" gibt es nicht und "focus" fehlt dafür.

Ronald

Ivanman

Sorry dass ich visitet geschrieben hab, heißt natürlich visited. Und ich weiß auch dass es enorm kürzer geht, nur wenn er sich nicht auskennt wollt ich nicht die verkürzte Version schreiben. Obwohls eigentlich egal ist.

pindakaas

eine frage wiso hast du um die links n div mit der klasse test gemacht ?
in deinem css sheet ist soeine Klasse garnicht vorhanden

Ivanman

Ich habs teilweise aus nem Code von ner Seite rauskopiert mit der ich alles mögliche teste! Habs leider übersehn! War auch nicht gedacht um es einfach zu kopieren und fix und fertig zu benutzen, sonder nur mal um zu zeigen wies aussehen kann.

Ronald

Er hätte besser das Ganze gar nicht geschrieben. Es sind noch viel Ungereimtheiten drinnen, die den unbedarften User m.E. mehr durcheinander bringen, als sie ihm helfen.

G.a.d.M.

Ronald

Ivanman

Hab mir grad den Mund zugenäht und werde nach diesem Eintrag auch noch meine Finger von meiner Hand abtrennen um nie wieder Blödsinn zu verzapfen!

Ronald

Na ja....

nur mal zwei Beispiele aus deinem Quelltext:

1. die Tabelle wird mit 85% Breite angegeben. Ich hoffe mal, daß sie in einem Frame abgebildet wird, sont wäre die Navigation bei mir 982 Pixel breit.

2. jede Zelle wird mit 35% angegebn, 3 Zellen nebeneinander. Das macht bei mir 105% und damit 5% mehr, als die Tabelle an sich. Jeder einzelne Link wäre bei mir dann ~ 344 Pixel breit.
Ich meine, das sieht sicherlich gewaltig aus, aber macht es Sinn ?

G.a.d.M.

Ronald

Ivanman

Das weiß ich doch!!! Aber ich hab oben schon geschrieben dass es nicht gedacht war um es in seinen Quellcode einzubauen sondern um ihm nur zu zeigen wie sowas aussehen könnte! Das nächste Mal lad ichs auf meinen Server und geb nur wie du ganz oben nen Link her!

Kir-Kanos

also, haut Euch bitte nicht die Köppe ein...

Ein ganz neuer Newb bin ich nicht, d.h. ich versteh schon, was ihr von mir wollt. Und die Tipps haben geholfen... jetzt will ich das ganze mal umsetzen, und schauen, ob es auch dann in einer eingebetteten Seite klappt.

Danke für die Hilfe

Ronald

Wir hau'n uns nicht, wir diskutieren.

*fg*

Ronald

Tags