[CSS] Zeilenumbrüche werden nicht ignoriert

[mirage228]

Hallo,

Ich versuche gerade eine neue Navigationsleiste für meine Webseite erstellen, welche unter dem Logo, also horizontal dargestellt wird.

Die Navigation wird per PHP in einen DIV-Kontainer included:

Code:

  <div class="bluebox">
    <? include($navbar); ?>
  </div>

Die navbar.htm sind dann so aus:

Code:

[url="load.php?get=news/lanews.php"]News[/url]
[url="load.php?get=guestbook/labook.php"]Gästebuch[/url]
[url="./forums/"]Forum[/url]
[url="load.php?get=disclaimer.php&link=link.php"]Links[/url]

Wie man sieht, ist jeder Nav.-Eintrag in einer eigenen Zeile, sprich mit Zeilenumbrüchen dazwischen.

Hier die CSS Defs:

Code:

.bluebox {
  font-size: 8pt;
  font-family: Verdana;
  vertical-align: top;
  background-color: #6D91A9;

  padding: 0px;
  border-width: 1px;
  border-style: solid;
  border-color: #B5C7DE;
}

a.navilink:link, a.navilink:visited, a.navilink:active {
  display: inline;   
  color: White;
  text-decoration: none;  
  font-family: Verdana;
  font-weight: bold;
  font-size: 10pt;
  width: 125px;
  padding: 3px 0px 3px 0px;
  border-right: 1px solid #B5C7DE;
  text-align: center;
}

a.navilink:hover {
  color: White;
  text-decoration: none;   
  background-color: #024C7F;
  font-family: Verdana;
  font-weight: bold;
  font-size: 10pt;
  width: 125px;                 
  padding: 3px 0px 3px 0px;   
  text-align: center;
}

Das Problem ist nun, dass die Zeilenumbrüche in der navbar.htm, nicht wie in HTML üblich, ignoriert werdne, sondern einen kleinen Whitespace erzeugen (s. Anhang). Setze ich nun alle Links (<a>) in eine Zeile, geht es wie gewünscht.

Wie kann ich die Zeilenumbrüche ignorieren lassen, sodass ich nicht die gesamte Navigation in eine Zeile quetschen muss?
(Die Zeilenumbrüche per PHP zu ersetzen hat mir Chakotay1308 schon vorgeschlagen, diese Lösung halte ich jedoch für etwas umständlich - es muss doch auch irgendwie mit HTML / CSS gehen?)

mfG
mirage228

[semo]

versuch es mal mit
  white-space      : nowrap;

[Thorben77]

Zitat von mirage228:

Es muss doch auch irgendwie mit HTML / CSS gehen?

So wie Du es bisher gemacht hast, gibt es glaub ich keine Lösung, außer der "einzeiligen" .

Du kannst die ganze Navigation aber als Liste schreiben.

Code:

<div class="bluebox">
  <ul id="nav">[*]
      [url="..."]News[/url]
    [*]
      [url="..."]G&auml;stebuch[/url]
    [*]
      [url="..."]Forum[/url]
    [*]
      [url="..."]Links[/url]
    [/list]</div>

In im Stylesheet dann entweder:

Code:

ul#nav li {
  display: inline;
}

oder

Code:

ul#nav li {
  float: left;
}

(Musst mal ein bisschen rumexperimentieren, kann sein, dass eins nicht ganz so toll funktioniert.)

[Mystic]

Zeilenumbrüche werden in den meisten Fällen in Leerzeichen umgewandelt und sind so weit ich weiß nicht ignorierbar.

Folg Thorbens Vorschlag, das ist meiner Meinung nach die beste Lösung.

[Thorben77]

Noch ein kleiner Nachtrag:

Zitat von Mystic:

Zeilenumbrüche werden in den meisten Fällen in Leerzeichen umgewandelt

Das ist auch gut so, sonst gäbe es bei sowas

Code:

  Text
  Text
  Text
</p>

Probleme. Würde da der Zeilenumbruch nicht durch ein Leerzeichen ersetzt, käme sowas raus: TextTextText und nicht Text Text Text .

[CalganX]

Hi,
ich möchte gerade noch den Tipp anmerken, den ich David noch per ICQ gegeben habe:

Code:

a.navilink:link {
  /* ... */
  margin-left: -5px;
}

Wenn man für das erste Element irgendwie das rausnimmt und den Wert anpasst, dann sollte es auch wunderbar funktionieren und richtig aussehen.

Chris

[Mystic]

Das ist dann doch aber davon abhängig, dass Leerzeichen 5px breit sind?