Link soll ganze Zelle einfärben

[shaq]

Guten morgen allerseits,

mein Problem ist folgendes:
ich habe eine Navigationsleiste (waagerecht!) in einer Tabellenzeile, dabei steht in jeder Zelle ein Link. Ich habe jetzt mittels css diese so angegeben, das sich bei einem hover der Hintergrund einfärbt (also die Backgroundcolor geändert :-))
Jetzt ergibt sich folgendes Problem, eingefärbt wird natürlich nur der Teil der Zelle der sich unmittelbar hinter der schrift des Links befindet. Ich möchte aber eigentlich das sich die ganze zelle färbt. Ursprünglich hatte ich das per JS gelöst (onmouseover='this.bgcolor=...'), ich bin mir aber eigetlich ziemlich sicher das es auch mit purem css gehen müsste, zumal das ganze bei ausgeschaltetem JS ziemlich mies aussieht. Aus diesem Grund habe ich mich mit der CSS Eigenschaft display und block beschäftigt, das funktioniert mit festen breiten und höhen angaben im IE auch sehr gut, aber Browser die die Eigenschaft korrekt interpretieren fügen (wie in Selfhtml dokumentiert) nach jedem block einen Zeilenumbruch ein was das ganze nich wirklich schöner macht.
Nach langem drumherum wäre also die Frage:
Wie mache ich eine Waagerechte Navigation in der jeweils die ganze Zelle von der background-color Eigenschaft des hover eingefärbt wird und wie bei display:block auch der Link ist (also hand cursor etc)?

Ich hoffe das war verständlich :-)

schönen Gruß
shaq

[Jan H.]

Hallo,
Du kannst das <a> Element so gross wie die Zelle machen.

Der Artikel:
http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm
Mouseover-Buttons und -Effekte mit CSS

wird dir weiter helfen.

Gruss, Jan aus Dresden

[shaq]

Hi,
erstmal danke für die prompte Hilfe

Du kannst das <a> Element so gross wie die Zelle machen.

Dann müsste ich ja aber für jeden Link ein eigenes <a> per css bearbeiten...achso ich hätte vielleicht noch erwähnen sollen das di dinger nicht alle gleich groß sind.

Der Artikel:
http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm
Mouseover-Buttons und -Effekte mit CSS

wird dir weiter helfen.

Nicht direkt, das <a> wird dort auch wieder mit display:block bearbeitet, meiner erfahrung nach ist eine angabe von width und height ohne das block wirkungslos, lasse mich da aber gerne belehren.

schönen Gruß
shaq

[Cheatah]

Hi,

Dann müsste ich ja aber für jeden Link ein eigenes <a> per css bearbeiten...

nö, nur den Selektor hinreichend günstig wählen.

Nicht direkt, das <a> wird dort auch wieder mit display:block bearbeitet, meiner erfahrung nach ist eine angabe von width und height ohne das block wirkungslos, lasse mich da aber gerne belehren.

width ist außerhalb eines Block-Elementes nicht definiert. <a> lässt sich jedoch wunderbar in Elemente schachteln, die Inline sind - egal ob per Default oder von Dir so definiert.

Cheatah

[shaq]

Hi,
vielleicht hätte ich zusätzlich zu dem Problem noch erwähnen sollen, das sich meine Fähigkeiten in css auf ein nötiges minimum beschränken und ich daher leider nicht wirklich auf einen Lösungspunkt komme...

nö, nur den Selektor hinreichend günstig wählen.

width ist außerhalb eines Block-Elementes nicht definiert. <a> lässt sich jedoch wunderbar in Elemente schachteln, die Inline sind - egal ob per Default oder von Dir so definiert.

... aber das was du schreibst klingt so als wäre es generell möglich mein problem mit purem css zu lösen, und du diese Lösung wahrscheinlich auch kennst :-) kannst du mir nicht irgendein Tut oder ähnliches ausserhalb von Selfhtml nennen? Ich will ja gar keine fertige Lösung, aber ich hab den css teil von Selfhtml in den letzten Tagen so oft geöffnet das ich ihn nicht mehr sehen kann und gebracht hat er mir leider nichts.

schönen gruß
shaq

[Cheatah]

Hi,

vielleicht hätte ich zusätzlich zu dem Problem noch erwähnen sollen, das sich meine Fähigkeiten in css auf ein nötiges minimum beschränken und ich daher leider nicht wirklich auf einen Lösungspunkt komme...

Du bist hier, um genau dies zu ändern.

... aber das was du schreibst klingt so als wäre es generell möglich mein problem mit purem css zu lösen, und du diese Lösung wahrscheinlich auch kennst :-)

Nein, weil ich Dein Problem nicht im Detail verstanden habe. Gegen Umbrüche bei Block-Elementen gibt es Inline-Elemente drumherum[1], clear und float. Was immer Dein Problem sein mag, ist hiermit vermutlich lösbar.

kannst du mir nicht irgendein Tut oder ähnliches ausserhalb von Selfhtml nennen?

Mehr als SelfHTML und die Dokumentationen beim W3C brauchst Du nicht.

Cheatah

[1] In CSS, nicht in HTML :-)

[MudGuard]

Hi,

width ist außerhalb eines Block-Elementes nicht definiert.

Einspruch.
Auch für replaced-inline-Elemente ist width definiert.
Genauer: width ist definiert für: all elements but non-replaced inline elements, table rows, and row groups

cu,
Andreas

[Cheatah]

Hi,

Einspruch.

angenommen.

Cheatah :-)

[at]

Hallo.

angenommen.

Heißt das nicht "Stattgegeben."?
Ich sollte mal wieder Matlock gucken ;-)
MfG, at

[Jan H.]

Hallo,

Dann müsste ich ja aber für jeden Link ein eigenes <a> per css bearbeiten...achso ich hätte vielleicht noch erwähnen sollen das di dinger nicht alle gleich groß sind.

Nicht direkt, das <a> wird dort auch wieder mit display:block bearbeitet, meiner erfahrung nach ist eine angabe von width und height ohne das block wirkungslos, lasse mich da aber gerne belehren.

Was hast du gegen display:block;?
Ohne zu wissen wie nun dein html teil aussieht ist es natürlich schlecht möglich dir einen genauen tip geben zu können.

Du kannst, wenn du display:block; nimmst das <a> element mit width:100%; und height:100%; versehen oder du kannst auch das <a> element einfach mit padding:...; aufblähen.

Wie es nun passt ist eine frage des html teils.

Gruss, Jan aus Dresden

[shaq]

Hallo,

Was hast du gegen display:block;?

persönlich nix :-)
Das Problem ist, wie ich bereits sagte, das display:block einen Absatz nach dem damit versehenen Element einfügt. und das macht aus meiner waagerechten Navigation eine Senkrechte und das will ich ja grade nicht.

Ohne zu wissen wie nun dein html teil aussieht ist es natürlich schlecht möglich dir einen genauen tip geben zu können.

weiß ich jetzt nicht, ist das so? ich dachte das wäre eigentlich ganz gut erklärt, geht ja einfach nur um eine tabellenzeile in der sich je zelle ein <a> befindet, wie das aussieht wissen wir doch alle oder?

schönen Gruß
shaq

[Jan H.]

Hallo,

Ohne zu wissen wie nun dein html teil aussieht ist es natürlich schlecht möglich dir einen genauen tip geben zu können.
weiß ich jetzt nicht, ist das so?

Ja, sonst hätte ich es nicht geschrieben.

ich dachte das wäre eigentlich ganz gut erklärt, geht ja einfach nur um eine tabellenzeile in der sich je zelle ein <a> befindet, wie das aussieht wissen wir doch alle oder?

Das schon, nur scheint deine beschreibung nicht ganz den tatsachen zu entsprechen.
Wenn sich in jeder zelle ein link befindet werden wohl kaum nach dem einbringen von display:block; alle links untereinander stehen, sie sind ja alle für sich in einer zelle.

Gruss, Jan aus Dresden

[shaq]

Hallo,

Das schon, nur scheint deine beschreibung nicht ganz den tatsachen zu entsprechen.

das weise ich jetzt mal von mir.

Wenn sich in jeder zelle ein link befindet werden wohl kaum nach dem einbringen von display:block; alle links untereinander stehen, sie sind ja alle für sich in einer zelle.

im IE nicht, im Moz, NS, Opera schon :-( sieht etwas zerhackt aus dann.

schönen Gruß
shaq

[Jan H.]

Hallo,

Wenn sich in jeder zelle ein link befindet werden wohl kaum nach dem einbringen von display:block; alle links untereinander stehen, sie sind ja alle für sich in einer zelle.
im IE nicht, im Moz, NS, Opera schon :-( sieht etwas zerhackt aus dann.

Schön.
Du erwartest nach dieser informationsgabe hoffentlich nicht eine antwort darauf warum dass so ist?

Gruss, Jan aus Dresden

[shaq]

Hallo,

Schön.
Du erwartest nach dieser informationsgabe hoffentlich nicht eine antwort darauf warum dass so ist?

Ähhm, tschuldigung aber ich sage dir hier nur wie es ist. Das ist weder meine Schuld noch weiß ich warum es so ist (ausser der typischen ist-halt-von-MS Antwort).
Fakt ist: es passiert und es ist von mir nicht erwünscht daher frage ich hier nach ob jemand das eventuell mal anders gelöst hat.

schönen Gruß
shaq

[Jan H.]

Hallo,

Ähhm, tschuldigung aber ich sage dir hier nur wie es ist. Das ist weder meine Schuld noch weiß ich warum es so ist (ausser der typischen ist-halt-von-MS Antwort).
Fakt ist: es passiert und es ist von mir nicht erwünscht daher frage ich hier nach ob jemand das eventuell mal anders gelöst hat.

Zweifelsfrei handelt es sich um einen fehler in deinem html code und wenn man den nicht kennt kann man nun mal nichts dazu sagen. Daher die bitte doch mal den entsprechenden code zu zeigen.

Gruss, Jan aus Dresden

[MudGuard]

Hi,

Das Problem ist, wie ich bereits sagte, das display:block einen Absatz nach dem damit versehenen Element einfügt.

Was man durch einen geeigneten Wert für die float-Property vermeiden kann.

Ohne zu wissen wie nun dein html teil aussieht ist es natürlich schlecht möglich dir einen genauen tip geben zu können.

Ja, es wäre durchaus sinnvoll, den relevanten HTML-Teil vorzuzeigen, wenn Du weitere Hilfe willst...

cu,
Andreas

[shaq]

Hi,

Ja, es wäre durchaus sinnvoll, den relevanten HTML-Teil vorzuzeigen, wenn Du weitere Hilfe willst...

OK,
der HTML Teil:

<tr class='navBar'>
   <td class='clicked'>Start</td>
   <td class='normal'><a href='index.php?id=2>Verlag</a></td>
   <td class='normal'><a href='index.php?id=3>Programm</a></td>
   <td class='normal'><a href='index.php?id=4>Presse</a></td>
   <td class='normal'><a href='index.php?id=5>Kontakt / Impressum</a></td>
</tr>

Und der relevante CSS-Teil:

.navBar td a{
  font-size:11px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:white;
  background-color:#8E8E8E;
  text-decoration:none;
  }
.navBar td a:hover{
  font-size:11px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  text-decoration:none;
  color:black;
  background-color:#D1D1D1;
  }
.normal{
  font-size:11px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  text-decoration:none;
  background-color:#8E8E8E;
  color: white;
  }

.clicked{
  font-size: 11px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: #D1D1D1;
  text-decoration: none;
  color: black;
  }

Hoffe das hilft euch mir zu helfen *g*.
Also bin weiterhin sehr dankbar für Ideen, Vorschläge etc.

schönen Gruß
shaq

[Jan H.]

Hallo,

<td class='normal'><a href='index.php?id=2>Verlag</a></td>
   <td class='normal'><a href='index.php?id=3>Programm</a></td>
   <td class='normal'><a href='index.php?id=4>Presse</a></td>
   <td class='normal'><a href='index.php?id=5>Kontakt / Impressum</a></td>

Überprüfe mal die zeichen setzung des href="" attributes.
Und dann gebe mal dem selektor .navBar td a{} display:block;padding:10px;, vielleicht geht es ja dann schon in die richtung welche du willst.

Gruss, Jan aus Dresden

[shaq]

Hi,

Überprüfe mal die zeichen setzung des href="" attributes.

Ok ich seh schon, ich hab den letzten >'< mitglöscht als ich die übergeben sessionId rausgenommen habe.

Und dann gebe mal dem selektor .navBar td a{} display:block;padding:10px;,

Ok, das _geht_ in die richtige richtung. Sehr gut ist nur viel zu breit aber das ist ja egal, aber wieso bleiben die jetzt in einer Zeile und vorallem warum sind die selbst wenn ich das padding:10px rausnehmen immernoch so breit??
Ich muss gestehen ich verstehe den zusammenhang nicht.
Aber schonmal herzlichen Dank, das wird doch was.

schönen Gruß shaq

[shaq]

Hi,
Halt nein stop, ich habs. Hatte da noch was falsches vom rumprobieren drin stehen. Mein Fehler sorry.

Alles klar, es klappt wunderbar ich danke auch allen.
Sieht jetzt exakt so aus wie gewünscht.

Wenn jetzt noch jemand sagen könnte warum es jetzt in keinem mir zur verfügung stehenden Browser einen Zeilenumbruch gab...ich meine der ist doch sogar in SELFHTML dokumentiert, daher hatte ich mich auch nicht gewundert als er auftauchte...

Wie gesagt vielen Dank und noch´n schönen Dienstag :-)

schönen Gruß
shaq

[MudGuard]

Hi,

<td class='normal'><a href='index.php?id=2>Verlag</a></td>

Hättest Du den Validator benutzt, hätte der beim < geschrien, da dieses unkodiert im Attributwert des href steht...

cu,
Andreas

[fastix®]

Moin!

Du meinst so wie in:

http://www.diewohnung.de
da ist alles in Zellen...

oder (woran wer wohl gerade baut?:)
http://it-schule.de
die Links sind quasi <div>'s, haben also die Eigenschaft: display:block.

Dann machs einfach so. Die Links als block ohne weitere Angaben in die Zelle. Soll diese eine Höhe oder Breite haben, dann musst Du diese Eigenschaften den Links geben. Rahmen etc. am besten auch.

Ach ja: Netscape 4.x == keine Chance mit diesem Verfahren.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®