Zur Navigation

Trennlinien zwischen Links in WP-Menü

1 Martin

Hallo,
ich möchte auf http://test.martin-dierks.de/karmahoroskop.html im linken Menü (ein WP-Menü in Menü-Widget) dünne weiße Trennstriche zwischen den Links, genau wie im obreen Menü, nur eben horizontal verlaufend. Damit wird es dem oberen Menü ähnlicher und ich kann die Listenpunkte weglassen. Ob das gut aussieht, wird sich zeigen.

Sehe ich es richtig, dass das mit border-style/width/colour geht, indem ich nur einen unteren Rahmen in weiß und dünn für die Links definiere?
Bin ich da auf dem richtigen Weg oder gibt es auch andere, flexiblere Wege (wenn ich dann z.B. den Strich links und rechts offen halten will)?

Martin

14.11.2010 20:26 | geändert: 14.11.2010 20:28

2 Jörg

Ja, die Linien kannst du gut mit border(-bottom) definieren.

(wenn ich dann z.B. den Strich links und rechts offen halten will)

Meinst du damit einen Außenabstand zum Rand der Sidebar? den kannst du mit margin definieren.

14.11.2010 20:48 | geändert: 14.11.2010 20:50

3 Martin

Zitat von Jörg
Ja, die Linien kannst du gut mit border(-bottom) definieren.

(wenn ich dann z.B. den Strich links und rechts offen halten will)

Meinst du damit einen Außenabstand zum Rand der Sidebar? den kannst du mit margin definieren.


Ja, zum linken und rechten Rand der SB:
SB/linkerRand ... ____________ ... SB/rechterRand

Mit margin wird die ganze SB wieder breiter, nur den Strich kann man wohl nicht kürzen oder den Effekt irgendwie optisch herstellen, also dass es so aussieht (auch wenn der Strich gleich lang bleibt)?


Martin

15.11.2010 17:03

4 Jörg

Mit margin wird die ganze SB wieder breiter

Ja, die Gesamtbreite eines Elementes ergibt sich immer aus width + 2 * padding + 2 * border + 2 * margin. Wenn du die Angabe für width entsprechend kleiner machst, sollte die Gesamtbreite wieder stimmen.

15.11.2010 17:13

5 Martin

Habs jetzt mal probeweise im Firebug gemacht und festgestellt, dass bei den Links, die über 2 Zeilen gehen, leider jede Zeile einen eigenen Rahmen - und damit Unterstrich - bekommt und nicht der gesamte zweizeilige Link einen.

Da ich nicht an Links über 2 Zeilen vorbeikomme, hat sich das wohl erledigt. Einfach eine zusätzliche weiße Linie nach jedem Link einfügen (ohne border) kann man wohl nicht?

Alternativ fände ich eine farbliche Hervorhebung der Links innerhalb der Sidebar wie auf www.theosis.com schön, eine weiße Linie ist da unter jedem Link auch zu sehen. Wie schwer ist das zu realisieren (mit z.T. zweizeiligen Links)?

Martin

15.11.2010 23:13 | geändert: 15.11.2010 23:16

6 Jörg

Ich würde den <li> die border zuweisen, nicht den <a> - dann sollte es nur eine Rahmenlinie geben.

Wenn du wie auf der genannten Seite einen Hover-Effekt über den Links verwenden möchtest, musst du den <a> die Eigenschaft display:block und eine feste width zuweisen, damit dei Hintergrundfarbe überall die gesamte Breite einnimmt.

15.11.2010 23:27

7 Martin

Danke, ich werde es mal probieren. Du scheinst dich wirklich mit allem bestens auszukennen.

Martin

17.11.2010 14:18 | geändert: 17.11.2010 14:19

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]