display: block - Problem

[Carl]

Hi

ich hab versucht mit hilfe von display: block einen überroll-effekt für links zu erstellen. Es klappt eigentlich ganz gut, bis auf ein paar kleinigkeiten, die ich nicht gelöst bekomme.

Wenn ich auf http://test.freie-geister.de/index.php geht und dann auf einen der dunkel unterlegten links, merkt ihr, dass sich die größe der tabellenzeile ändert. Das soll sie aber nicht. Weiterhin sorgt das display: block dafür, dass die schrift nicht mittig in der Zelle hockt, sondern etwas nach oben verschoben wird. Der einsatz von padding-top bewirkt allerdings wieder den "vergrößerungseffekt".
Die css-file findet sich in http://test.freie-geister.de/formate.css.
Wäre schön, wenn mir jemand paar tipps geben könnte, was ich da besser machen kann.

Gruss
Carl

[Heiner]

Hallo,

Dein Quellkode weist Fehler auf: http://validator.w3.org/check?uri=http%3A%2F%2Ftest.freie-geister.de%2Findex.php

Wenn ich auf http://test.freie-geister.de/index.php geht und dann auf einen der dunkel unterlegten links, merkt ihr, dass sich die größe der tabellenzeile ändert. Das soll sie aber nicht.

Bei mir ändert sich da nix. Ich nutze den Konqueror 3.1.0.

Weiterhin sorgt das display: block dafür, dass die schrift nicht mittig in der Zelle hockt, sondern etwas nach oben verschoben wird. Der einsatz von padding-top bewirkt allerdings wieder den "vergrößerungseffekt".

Bei mir sieht es eigentlich recht mittig aus.

Die css-file findet sich in http://test.freie-geister.de/formate.css.
Wäre schön, wenn mir jemand paar tipps geben könnte, was ich da besser machen kann.

Schau mal, dass Du den Validator nutzt, um den Quellkode zu säubern. Das wirkt manchmal schon Wunder.

Grüße,
Heiner

[TorstenA]

Hallo,

ich hab versucht mit hilfe von display: block einen überroll-effekt für links zu erstellen. Wenn ich auf http://test.freie-geister.de/index.php geht und dann auf einen der dunkel unterlegten links, merkt ihr, dass sich die größe der tabellenzeile ändert.

Ich meine, dass hier der Einsatz einer Tabelle zu den von dir beschriebenen Problemen führt. Diese Tabelle ist allerdings nach meiner Meinung überflüssig. Deine Links sind doch bereits Blocklevel-Elemente, wozu brauchst du da noch die Tabelle? Also versuche ganz einfach mal, die Tabelle rauszuschmeißen, das Ganze könnte vereinfacht etwa so aussehen:

-- CSS Datei --
a.navbar:link {
  display:block;
  width:100px;
  color:#000;
  background-color:#fff;
  ...
}
a.navbar:hover {
  color:#fff;
  background-color:#000;
  ...
}

-- HTML-Datei --
...
<a class="navbar" href="#">Menü 1</a>
<a class="navbar" href="#">Menü 2</a>
...

Siehe: http://css.fractatulum.net/sample/hov2format2.htm

Solltest du allerdings auf die Tabelle nicht verzichten wollen, könntest du die Tabellenzellen statt der Links mit einem Hover-Effekt versehen. Das wäre allerdings keine besonders gute Lösung, da der Hover-Effekt nicht in allen Browsern funktionieren wird.

Hoffe es hilft
Torsten

[Heiner]

Nur ein Gedanke: Sollte man um wirklich sauberes HTML zu erhalten die Links nicht in eine Liste (ul + li) setzen?

Heiner

[TorstenA]

Hallo,

Nur ein Gedanke: Sollte man um wirklich sauberes HTML zu erhalten die Links nicht in eine Liste (ul + li) setzen?

Das würde ich der Fantasie des OP überlassen wollen. Wichtig ist in der Variante Strict, dass die Anker von einem Blocklevel-Element umschlossen werden, ein einfacher unformatierter  p-Tag genügt.

Viele Grüße
Torsten

[Carl]

Hi

danke, das hat geholfen. Ich hab es jetzt in ein div-tag gepackt.

Gruss
Carl