CSS, Tabellen und Links

[jkhkhvbjkhv]

Moin, habe da mal eine Frage.

Wie kann ich es verwirklichen, wenn ich auf einer Internetseite in einer Tabelle (Zellen) das Menü eingerichtet habe, und möchte quasi nicht nur, dass der Link selber eine Hintergrundfarbe annimmt, sondern die ganze Zellen-Ebene.

Des Weiteren sollte man nicht nur auf den Link klicken können, sondern allgemein in der ganzen Zelle.



Hoffe Ihr versteht was ich meine. Anders kann ich es irgendwie nicht erklären.

Denke mal, dass es mit CSS möglich ist. Oder?

Gruß Niko

 

[Gubbie]

<a style="width:100%;height:100%;background-color:red;color:white;" href="fvdf.html">Link</a>

vielleicht?

edit: geht nicht...

edit 2:

so:

<a style="position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:red;color:white;" href="fvdf.html"">Link</a>

 

[stoebe]

Ohne es vorher ausprobiert zu haben, versuch ich's mal...


Was die Hintergrundfarbe der Zelle betrifft:

td { background-color: #000000 }

Und schließlich, dass die ganze Zelle verlinkt ist:

<table>
<tr>
<a href="index.htm"><td>Beispieltext</td></a>
</tr>
</table>

Kann dir nicht sagen, ob es funktioniert (denke auch nicht, dass es das tut).
Evtl. schau ich mal nach und editiere bei Gelegenheit. Viel Glück.


Grüße,

stoeb :E

 

[stoebe]

<a style="width:100%;height:100%;background-color:red;color:white;" href="fvdf.html">Link</a>

vielleicht?

edit: geht nicht...

edit 2:

so:


<a style="position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:red;color:white;" href="fvdf.html"">Link</a>

Das ist nicht annähernd das, was er möchte...

 

[jkhkhvbjkhv]

Danke für die Antwort. Habe aber die Lösung durch Probieren.

text-decoration: none;
font-size: 14px;
color: #00CC33;
font-family: Arial, Helvetica, sans-serif;
height:42px;
display:block;
vertical-align:middle;
line-height:42px;
left:5px;
padding-left:5px;

Damit hat es geklappt.

Gruß Niko

 

[Gubbie]

Das ist nicht annähernd das, was er möchte...

?? Muss er doch nur in die Betreffende zelle schreiben?

 

[stoebe]

Alles klar, viel Spaß..

 

[jkhkhvbjkhv]

<a style="width:100%;height:100%;background-color:red;color:white;" href="fvdf.html">Link</a>

vielleicht?

edit: geht nicht...

edit 2:

so:

Ne dann ist ja nur die Hintergrundfarbe von der Schrift definiert. Aber nicht von der Tabelle.

 

[Timotheus]

Hallo,

lege eine neue Klasse an. Z.B. direkt in deiner html Datei so:

<style type="text/css">
.tablink {background-color:#BED0FC; }
</style>

ansonsten nur den Teil mit .tablink ... in deine separate css Datei.

Dann fügst die bei der Zelle folgendes ein:

<td class="tablink"> Link </td>

Um es aber auch zu sagen, zu Layoutzwecken sollten eigenltich keine Tabellen genutzt werden. Angenommen du definierst ein Box für dein Menü. Dann könntest die ganz einfach mit

<p style="background-color:#BED0FC;">Link 1</p>
<p style="background-color:#BED0FC;">Link 2</p>

zwei Linkeinträge in diesem Menü erzeugen. Um es zunächst nicht ganz auf CSS umzustellen, kannst Du ja eine Zelle deiner Layouttabelle als Menü lassen und fügst dort das Beispiel mit den <p ..> ... </p> ein.

EDIT: Wenn es die ganze Tabelle sein soll:

<table style="background-color:#BED0FC;"> ... </table>

Gruß, Tim.

 

[stk]

Moin,

das entscheidende ist, das Du aus einem inline-Element (in dem Fall dem <a>) mittels display:block ein Blocklevel-Element machst. Erst damit erreichst Du das umliegende paddings auch Bestandteil des Links und damit clickable werden.

Im übrigen solltest Du ernsthaft darüber nachdenken anstelle eines Tabellenkonstruktes für die Menüstruktur eine semantisch korrekte <ul> herzunehmen. Mittels li {float:left; list-style: none;} bekommst Du die Einträge ohne Punkte nebeneinander und kannst dann via width, height, margin und padding das Ausrichten und Formatieren anfangen.

Gruß Stefan

 

[Timotheus]

@ stk

Toller Tipmit der Liste. Hab ich so auch noch nicht gesehen. Ist aber sehr einfach und zielführend. Kann Dich leider nicht mehr mit Karma bewerten, da erst andere User bedacht werden müssen.

EDIT: Jetzt geht es doch. Gestern noch nicht.:-D

Gruß, Tim.

 

[stk]

Moin,

wer sich's mit Listenbasierten Menüs einfach machen will, nimmt das hier:

http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp

Gruß Stefan

 

[Timotheus]

Hallo,

hab da ein Problem mit dem display:block; und natürlich IE. Bevor ich ein neues Thema aufmache, probier ich es erstmal hier.

Also hab ein Menu gebastelt mit <ul><li> usw und in der css dem link <a> display:block; verpasst, damit der Bereich um die eigentliche Schrift auch clickable wird. Beim firefof klappt das wunderbar, leider beim IE nicht. Hab zunächst gedacht, es liegt an meiner (falschen) css Notation, aber selbst wenn ich allen links <a> das display:block; verpasse, funktioniert es im IE nicht. Ich gebe Euch mal den Quellcode:

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zahnarztpraxis Dr. Blablabla</title>
<link rel="stylesheet" type="text/css" href="format.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body class="schrift"><div id="rahmen">

<div id="kopf"><h1>Zahnarztpraxis Dr. Blablabla</h1></div>

<ul id="menu">
<li><a id="aktuell" href="index.html">Start</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="leistung.html">Leistungen</a></li>
<li><a href="anfahrt.html">Anfahrt</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>

<div id="inhalt">
<--Irgendein Text, aus Platzgründen gelöscht-->
</div>

</div></body>
</html>

und format.css

a {text-decoration:none; color:blue;}
a:visited {text-decoration:none; color:blue;}
body {font-size: 100.01%;}
ul#menu {float:left; width:8em; margin:0; padding:0;}
ul#menu li {list-style:none; margin:0; padding:0; border-bottom:1px dotted royalblue; }
ul#menu a {padding:0.5em; text-indent:1em; display:block;}
ul#menu a#aktuell {colorrange;}
ul#menu a:hover {background-color:royalblue; color:white;}
div#rahmen {margin: 0 auto; width:800px;}
div#kopf {width:100%; border-bottom:1px solid royalblue; padding:0.5em; text-align:right;}
div#kopf h1 {font-size:1.8em; font-family:vivaldi,verdana;}
div#inhalt {margin-left: 10em;}
.schrift {font-family: verdana, sans-serif;}

Hab schon ne Weile im Netz gesucht, aber nichts passendes gefunden. Vielleicht kann mir einer helfen.

Schon mal vielen Dank und liebe Grüße, Tim.

 

[stk]

Moin,

hmm, bei mir tut's im IE einwandfrei - Cache gelöscht?

präzisiere: IE6 ist ok, 5.5 auch, 5.0 tanzt etwas aus der Reihe, aber nichts für das ich mir 'nen extra Kopf machen würde.

Gruß Stefan

 

[Timotheus]

Erstmal danke für deine Mühe stk.

Ich hab es getestet hier im Büro mit dem IE 6 auf Windows XP Prof und zuhause mit dem IE 6 auf Windows XP Home. Mit beiden ging es nicht richtig. Der Link funktionierte nur, wenn ich auf die Schrift kam. Mit Firefox 1.5 hat es auf beiden Systemen funktioniert.

Bin gerade noch im büro und habe eben mal alles geköscht im IE, aber leider verändert sich das Verhalten nicht. Hab die Seite einmal aus dem Netz und einmal über einen lokalen ApacheServer auf Windows getestet und jeweils ein negatives Ergebnis.

Weiß auch nicht mehr weiter.

Gruß, Tim.