gleichmäßiger Abstand von Anker-Elementen

[fRuNK]

Moin.

Ich habe ein kleines Problem mit meiner Webseite, daß ich trotz langem SelfHTML-Gewälze nicht lösen konnte:

Die fünf Navigations-Anker ganz oben auf meinen Seiten sollen eigentlich nicht so gedrängt stehen, sondern über die ganze Breite (480px) verteilt sein. Idealerweise begänne Anker1 (Home) an "Position 0" und Anker5 (Impressum) endete an "Position 480" des "layoutblock" (siehe formate.css).

Die Zeile p.navigation a { padding-left:1.2em; padding-right:1.2em; } in der .css, zu der mir an anderer Stelle geraten wurde, scheint überhaupt keinen Effekt auf die Anker zu haben...

Weiß jemand Rat?!?

mfG aus Oldenburg:

fRuNK

[Andreas Schneider]

Hallo fRuNK,

Die fünf Navigations-Anker ganz oben auf meinen Seiten sollen eigentlich nicht so gedrängt stehen, sondern über die ganze Breite (480px) verteilt sein. Idealerweise begänne Anker1 (Home) an "Position 0" und Anker5 (Impressum) endete an "Position 480" des "layoutblock" (siehe formate.css).

Ich denke, ganz so, wie Du dir das vorstellst, geht es nicht.
Gib erstmal dem Absatz in dem die Links stehen eine Breite von 100%. Ausserdem kriegt jeder der 5 Links eine Breite von 20%. Anker1 muß dann noch linksbündig und Anker5 rechtsbündig ausgerichtet werden. Jetzt hast Du allerdings das Problem, dass die Abstände zwischen Anker1 und Anker2 bzw. Anker4 und Anker5 größer sind als die Abstände zwischen Anker2 und Anker3 bzw. Anker3 und Anker4. Wenn Du Anker1 und Anker5 allerdings zentriert lässt, haben die Anker zwar gleiche Abstände, aber Du hast links und rechts einen kleinen Rand.

Grüße
Andreas

[Thomas Luethi]

Hallo,

Die Zeile p.navigation a { padding-left:1.2em; padding-right:1.2em; } in der .css, zu der mir an anderer Stelle geraten wurde, scheint überhaupt keinen Effekt auf die Anker zu haben...

Die "andere Stelle" war der alte Thread.
Dort habe ich Dir auch geantwortet: [pref:t=72136&m=417301]
Es klappt offenbar in gewissen Browsern nicht, weil A ein
Inline-Element ist.

Auf einer Testseite habe ich mal versucht, A mit
display:inline-block;
zu formatieren:
http://www.tiptom.ch/tests/fremdes/frunk01.html

Mozilla 1.5 zeigt es so an, wie ich es erwarte.
Der MS IE 6.0 sollte es eigentlich auch koenen,
sagt zumindest:
http://www.quirksmode.org/css/display.html#inlineblock

Dass der erste Link schoen links anfaengt und der letzte
ganz rechts aufhoert, und dass noch dazu die Abstaende
regelmaessig sind, kriegte ich nur mit einem sehr schmutzigen
Trick hin, naemlich mit einem Blind-GIF.
Prinzip: Alle Links (ausser dem ersten) haben links einen
margin von 0.5em.
Mit text-align:justify und genuegend Inhalt bringt man den
Browser dazu, die Woerter "im Blocksatz" auszurichten.
Ohne etwas, das den Inhalt des P-Elements auf zwei Zeilen zwingt,
brachte ich Mozilla allerdings (wohl zurecht) nicht dazu, text-align:justify
anzuwenden.
Hier also die schmutzige "Loesung":
http://www.tiptom.ch/tests/fremdes/frunk02.html

Beide Loesungen sind valides HTML 4.01 Transitional.
Das CSS ist auch valide, wobei der Validator offenbar
display:inline-block;
noch nicht kennt. Es ist halt auch erst CSS 2.1

Gruesse,

Thomas