Problem mit div-Attributen in Tabelle

Status
Nicht offen für weitere Antworten.

qsrs

Erfahrenes Mitglied
Hallo,

ich möchte mit Hilfe von CSS Button-ähnliche Links darstellen. Das mache ich so:

Code:
#example1 a {
  margin-right: 2px;
  border-style: solid;
  border-color: #FFFFFF;
  border-width: 1px;
  padding: 1px 5px 1px 5px;
  color: #CCCCCC;
  text-decoration: none;
}
#example1 a:hover {
  background-color: #CCCCCC;
  border-style: solid;
  border-color: #000000;
  color: #000000;
}

Die Links gebe ich dann so aus:
Code:
<div id="example1">
<p><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> | <a href="#">Link 5</a></p>
</div>

Der Link hat dann beim Darüberfahren einen Rahmen (links, rechts, oben, unten) und einen Hintergrund, was dann aussieht wie eine Art Button.

Alles funktioniert soweit. Nur wenn ich das Ganze in einer Tabelle darstelle, fehlt die obere und untere Linie. Erst wenn ich vor dem <div> einen Absatz oder einen Zeilenumbruch einfüge, werden diese sichtbar. Das zerstört aber das Ganze Layout der Tabelle.

Gibt es hier eine Lösung? Danke für Antworten.
 
Wahrscheinlich wird die Tabellenzeile kleiner dargestellt als benötigt. Übrigens solltest du das Navigationsmenü als Liste auszeichnen und diese anschließend formatieren.
 
Danke für deine schnelle Antwort. Selbts wenn ich die Tabelle 100px hoch mache, fehlt der obere Rand. Der untere wird dann angezeigt.

Übrigens solltest du das Navigationsmenü als Liste auszeichnen und diese anschließend formatieren.
Das habe ich nicht ganz verstanden.
 
Das Wort Navigationsmenü selbst sagt bereits aus, dass es sich dabei um eine Aufzählung von Punkten handelt, die in einer gewissen Weise untereinander in Beziehung stehen. Wieso dafür als keine Liste nutzen? Siehe dazu auch Listamatic 1 und Listamatic 2.
 
Ja, das macht Sinn. Vielen Dank für den Hinweis. Jetzt funktioniert das Ganze auch problemlos in einer Tabelle.
 
Status
Nicht offen für weitere Antworten.
Zurück