zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Menü - Trennlinie zwischen Menüpunkten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.12.2008, 04:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.12.2008
Beiträge: 3
RedBaron befindet sich auf einem aufstrebenden Ast
Standard Horizontales Menü - Trennlinie zwischen Menüpunkten

Hallo,

ich habe ein Problem mit einem horizontalen Menü, bei dem die einzelnen Menüpunkte mit einer vertikalen Trennlinie (wie eine Pipe |) abgegrenzt werden.

Mein Problem ist, dass diese Trennlinie, wenn ich sie mit border definiere, viel zu hoch ist und somit wesentlich größer als der Text der Links. Das liegt meiner Meinung nach daran, da sich die Höhe an das Element angleicht. Auf jeden Fall sieht es nicht gut aus.

Gibt es eine Möglichkeit die Höhe dieser Linie zu reduzieren? Mein Ziel wäre es, eine Trennlinie mit Border zu erstellen, die von der Art genau so wie eine normale Pipe aussieht und auch genau so groß ist.

Warum ich nicht gleich die Pipe nehme? Das Menü wird dynamisch durch ein CMS generiert. Wenn ich die Pipe verwende, so habe ich nach dem letzten Menüpunkt rechts auch noch einen Trennlinie. Wenn ich das mit CSS hinbekomme, kann ich den letzen Menüpunkt anders stylen und die Trennlinie kommt weg.

Beispiel:

Menüpunkt 1 | Menüpunkt 2 | Menüpunkt 3 |

Ziel:

Menüpunkt 1 | Menüpunkt 2 | Menüpunkt 3

Hat vielleicht jemand einen Tipp von euch? Ich stehe momentan ziemlich an.

Danke schon mal.

LG;
RB

Geändert von RedBaron (20.12.2008 um 04:16 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.12.2008, 04:29
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von RedBaron Beitrag anzeigen
Gibt es eine Möglichkeit die Höhe dieser Linie zu reduzieren?
li floaten und a mit display: block; und geringer line-height. Falls das nicht reicht, kommt die Linie als Grafik.

Zitat:
Zitat von RedBaron Beitrag anzeigen
Warum ich nicht gleich die Pipe nehme?
Vor allem weil derartige Deko nicht ins Markup gehört

Zitat:
Zitat von RedBaron Beitrag anzeigen
Wenn ich das mit CSS hinbekomme, kann ich den letzen Menüpunkt anders stylen und die Trennlinie kommt weg.
Das letzte li braucht dafür eine ID.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.12.2008, 11:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.12.2008
Beiträge: 3
RedBaron befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
li floaten und a mit display: block; und geringer line-height. Falls das nicht reicht, kommt die Linie als Grafik.
float und display:block hatte ich schon dabei. habs jetzt mit der line-height versucht. leider klappt das nicht so wie gewünscht.

außerdem brauche ich die line-height im "normalen" sinn, da dieses menü auch über zwei zeilen geht.

werds mal mit einer grafik probieren.

danke für die tipps!

edit: mit der linie als grafik hat das wunderbar funktioniert. danke nochmal!

Geändert von RedBaron (20.12.2008 um 11:47 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.12.2008, 18:25
Benutzer
neuer user
 
Registriert seit: 22.05.2006
Beiträge: 79
träumer befindet sich auf einem aufstrebenden Ast
Standard

Weil ich's selber gerade wo so mache...so sollte es mit Schrift gehen, wenn's ein normale Textlink-Menü ist:
<a href="http://www.">Link1</a>
|
<a href="http://www.">Link2</a>
|
<a href="http://www.">Link3</a>
|
........
Mit Zitat antworten
  #5 (permalink)  
Alt 21.12.2008, 18:46
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

@träumer: Nein, dass ist der falsche Weg.

Horizontales Menü => Liste.
| => Deko = gehört in die CSS-Datei.

Den Rest hat Heiko schon gesagt.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #6 (permalink)  
Alt 21.12.2008, 18:49
Benutzer
neuer user
 
Registriert seit: 22.05.2006
Beiträge: 79
träumer befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Hinweis, dann würdest du es also nicht so wie bei der andern Seite machen, wo du mir grade geholfen hast?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fliesendes horizontales Menü 100% Breite Overtone CSS 0 01.05.2010 17:19
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
trennlinie zwischen 2 unterschiedlich hohen Blockelementen wuschba CSS 4 02.11.2007 15:51
Trennlinie bei Leerzeile im Menü Liebei CSS 2 29.08.2007 15:14
Horizontales Menü ohne Zwischenraum Xavier CSS 4 16.09.2005 10:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:18 Uhr.