Wie verhindere ich das?

  • Ersteller bastianschroeer
  • Erstellt am
B

bastianschroeer

hallo hallo
ich will mit trennstrichen die menüpunkte einer subnavi abgrenzen.
So etwa: ANFAHRT | KONTAKT | IMPRESSUM
mit css habe ich als begrenzung einfach nen border von 2px eingebaut. funktioniert
eigentlich ganz gut. was mich stört ist, dass die begrenzung auch ganz am anfang auftaucht | ANFAHRT | KONTAKT | IMPRESSUM und dass die striche höher sind als die schrift. kann ich das besser umsetzen? wenn ja wie??
gruß
 

Anhänge

  • Bild 11.png
    Bild 11.png
    2,6 KB · Aufrufe: 187
versuch mal alt+7
 
alt +7 und dannn die schriftgrösse des striches kleiner machen.

der strich IST höher als ein grossbuchstabe.
 
ich versteh nicht ganz. ich beschäftige mich noch nicht so lange mit css. wann soll ich alt + 7 drücken?
 
Du könntest entweder die Schriftgröße der Pipe "|" im Vergleich zum Rest der Navigation verkleinern oder aber einfach einen alternativen, zweiten CSS-Stil für den ersten (oder letzen) Navigationspunkt definieren, der keinen Rahmen hat.
 
Die Strich (Border)höhe gibt man am besten mit Line-hight an
 
Mit der Pipe ( | ) geht es ganz gut - anbei 2 Varianten:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>List Separator</title>
<style type="text/css">
<!--

* {
margin: 0;
padding: 0;
border: 0;
}

h2 {
margin: 2em 0;
}

ul {
list-style-type: none;
}

li {
display: block;
float: left;
}

li.item::after, li.separator {
margin: 0 2em;
font-size: smaller;
color: red;
}

li.item::after {
content: "|";
}
-->
</style>
</head>

<body>

<h2>Variante 1 mit Pseudoelement ::after</h2>
<ul>
<li class="item"><a href="#">ANFAHRT</a></li>
<li class="item"><a href="#">KONTAKT</a></li>
<li><a href="#">IMPRESSUM</a></li>
</ul>

<br style="clear: both" />

<h2>Variante 2 mit extra Listenpunkten</h2>
<ul>
<li><a href="#">ANFAHRT</a></li>
<li class="separator">|</li>
<li><a href="#">KONTAKT</a></li>
<li class="separator">|</li>
<li><a href="#">IMPRESSUM</a></li>
</ul>

</body>
</html>
Zum Vergrößern anklicken....

Via CSS einen Rahmen (border) zu definieren ist bei gewünschter Grössenänderung im Verhältnis zur Schrift m. E. eher aufwendig.


Mackie1957 schrieb:
Die Strich (Border)höhe gibt man am besten mit Line-hight an
Zum Vergrößern anklicken....

unionjacky schrieb:
versuch mal alt+7
Zum Vergrößern anklicken....

achwassolls schrieb:
alt +7 und dannn die schriftgrösse des striches kleiner machen.

der strich IST höher als ein grossbuchstabe.
Zum Vergrößern anklicken....

Zu allen 3 Posts: :kopfkratz:

Ich verstehe die Aussage nicht: Wo ALT+7 versuchen und was definiert die Eigenschaft line-height bezüglich CSS Rahmen? Die gibt es nur für die Festlegung des Zeilendurchschusses -> http://www.css4you.de/Texteigenschaften/line-height.html

2nd
 
überall wo du text einfügen kannst, kannst du auch alt-7 drücken um den | zu erhalten.
 
Ahh, Ihr redet vom Pipe-Zeichen. Da muss man erstmal drauf kommen, wenn lediglich "drück mal alt+7" im Posting steht. Trotz dessen ich den Shortcut seit langem benutze :faint:

2nd
 
Noch eine Möglichkeit:

Zusätzlich zu der Textbox verwendest Du eine zweite div-Box, die innerhalb der ersten liegt und nur die Aufgabe hat, die border darzustellen. Damit ist dann die Stichhöhe von der Textgröße entkoppelt.
 
Wieso Textboxen? Hier geht es um ein Menu und da ist es aktuell usus mit ungeordneten Listen zu arbeiten...

2nd
 
danke 2ndreality!
das klappt ganz gut! wie kann ich denn die abstände zwischen trennstrich und menüpunkt verkleinern? über margin wahrscheinlich. verkleinert man den wert z.b. auf 1em den stimmen die proportionen nicht mehr.
 
mein script sieht so aus:

HTML: 
<div id="logo">
   <ul>
    <li class="item"><a href="#">Anfahrt</a></li>
    <li class="item"><a href="kontakt.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
   </ul>
  </div>

die css-datei
HTML: 
#logo {
  background:url(Bilder/logo.jpg);
  height: 140px;
  width: 710px;
  text-align: right ;
  margin: 0;
}

#logo ul li {
  font-family: arial;
  font-size: 8pt;
  display: inline;
  font-weight: bold;
  list-style-type: none;
  padding: 0 5px 0 5px;
}

#logo li a {
  color: black;
  text-decoration: none;
}


#logo ul {
	margin: 0px;
	padding: 110px 20px 0 0;
	list-style-type: none;
}

#logo ul li a:hover {
	color: white;
	background-color: black;
	text-decoration: none;
}

#logo li.item::after {
margin: 0 2em;
font-size: smaller;
color: black;
}

#logo li.item::after {
content: "|";
}
 
Mackie1957 schrieb:
Die Höhe des border-left oder right.
Zum Vergrößern anklicken....

Hast Du mal eine Quelle für diese Definition?

@bastianschroeer: Ja, mit dem margin änderst Du die Abstände. Eigentlich sollte das gleich bleiben (rechts und links).

Beachte: Das ::after-Pseudoelement funktioniert nicht in allen Browsern, vor allem nicht in den MS-Dingern, deswegen hatte ich Dir oben noch die 2. Variante dazugetan.

2nd
 
Ok hat geklappt. die abstände sind gleich. allerdings noch bei 1em zu groß.
wie bekomme ich sie noch kleiner??
 
Hast Du mal eine Quelle für diese Definition?
Zum Vergrößern anklicken....
Den Code hat mir eine Bekannte für meine Seite gegeben. Woher sie den hat, weiß ich natürlich nicht. Ich weiß nur, dass der funktioniert.
 
OK danke euch allen! es funktioniert so wie gewollt!
 
bastianschroeer schrieb:
Ok hat geklappt. die abstände sind gleich. allerdings noch bei 1em zu groß.
wie bekomme ich sie noch kleiner??
Zum Vergrößern anklicken....

0.5 em z. B. oder 10px ;)

@Mackie1957: line-height macht schon etwas (Zeilenabstand), das hat allerdings nichts direkt mit der border-Breite/Höhe/Länge zu tun.

2nd
 
@Mackie1957: line-height macht schon etwas (Zeilenabstand), das hat allerdings nichts direkt mit der border-Breite/Höhe/Länge zu tun.
Zum Vergrößern anklicken....
Aber anscheinend klappt es ja.
#navbuttons {
width:900px;
height:28px;
background-color:#517193;
}
Zum Vergrößern anklicken....

#navbuttons li {
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
display:inline;
background-color:#517193;
list-style:none;
float:left;
border-right:1px #314459 solid;
padding:0px 20px 0px 20px;
line-height:28px;
}
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten