schon wieder ein CSS-Problem

[NicNac]

Hi

Ich weiss echt nicht, villeicht bin ich zu müde, vielleicht bin ich nicht geschaffen für CSS, aber immer treffe ich wieder auf nen Fehler, den ich dann sogar statt zu lösen noch verschlimmere...

Folgendes: Ich habe einen Container #navigation definiert. Dieser soll 850px breit sein und Buttons enthalten. Diese Buttons sollen total in CSS gemacht sein(Anmerkung: Ich habe weder Farben noch Text-Tags hier drin, weil alles in nem anderen Sheet ist und für dieses Problem nicht wichtig ist):

#navigation {
height: 36px;
border-width: 1px;
border-style: solid;

text-align: center;
}

#navigation a {
width: auto;
height: 20px;
padding: 2px 15px;
border-width: 1px;
border-style: solid;
margin: 5px;
}

So, laut meines CSS-Wissens (noch kleinen, das geb ich zu) stimmt mein Boxmodell mathematisch. Und das was ich eigentlich möchte ist, dass jeder Button schon vertical-align:center (das es ja nicht mehr gibt, ich aber eben mit dem margin erreichen will) im Container #navigation angezeigt wird. Dem ist leider ÜBERHAUPT nicht so. Jeder Button wird oben angezeigt. Why? Vorhin, als ich mal ne Höhe für #navigation definiert habe, die sogar kleiner war als die von #navigation a, da sahs gut aus. Aber das macht keinen Sinn! Und jeder Browser zeigt momentan irgendwas anderes falsches an. In NS7 überlappen die Button sogar den oberen #navigation-Rand.

Freue mich auf Antworten

PS @Terry:
Falls du das liest, und da bin ich doch davon überzeugt vielen Dank für Deine Unterstützung wegen dem IE 3px Bug, funzt perfekt!

[Terry]

Zitat von NicNac

Hi

Ich weiss echt nicht, villeicht bin ich zu müde, vielleicht bin ich nicht geschaffen für CSS, aber immer treffe ich wieder auf nen Fehler, den ich dann sogar statt zu lösen noch verschlimmere...

Ist nur beim ersten Mal so, dann wird es besser.....

Zu Deinem Problem: gib mal line-height:36px an, dann ist der Text in der Mitte der Leiste.
Und mit margin und padding ist das immer sone Sache, das wird auch manchmal von den Browsern unterschiedlich interpretiert - da hilft nur ausprobieren. CSS ist ein Puzzlespiel!

Tutorial für horizontale Menüs: http://css.maxdesign.com.au/listutor...troduction.htm

Beispiele: http://css.maxdesign.com.au/listamatic/index.htm

[NicNac]

du bist einfach krass immer kennste die lösung. Line-height funktioniert. Aber die grosse Frage: Wieso? Wieso nicht height? Müsste doch logischerweise auch gehen?

Und da du mir gestern gesagt hast, ich soll mich darauf achten korrekt XHTML zu schreiben: Ist es falsch wenn ich diese Links nicht als Liste deklariere sondern einfach <a..>Link1</a> schreibe und per #navigation a {} auf sie zugreife?

[Terry]

height wäre ja nur die Höhe der "Buttons" - die braucht der IE dann auch noch, damit die ganze Fläche klickbar klickbar wird und nicht nur der Text.
line-height ist die Höhe der Textzeile - und da ist der Text dann immer in der Mitte.

Das mit der Liste ist ein bisschen Geschmackssache. Einige (Stu Nicholls z.B.) machen keine, viele andere machen eine. Wenn Du es Dir mal ohne CSS anguckst, dann ist sone Aufzählung der Menüpunkte mit einer Liste ja doch eigentlich ganz logisch, oder?
Aber da hast Du glaub ich freie Hand...... (keine Ahnung, ob die Bestimmungen für Barrierefreiheit da was zu sagen, da hab ich keine Ahnung von....)

[NicNac]

hm ok, überlegs mir mal noch.

also jetzt hab ich ja line-height unter #navigation eingefügt, nicht #navigation a. und vorher hatte ich stattdessen einfach height, was sich ja aber auf den Container bezog und nicht die Buttons. Deswegen müsste es doch einfach gehen. Für mich ist das absolut unlogisch

[Terry]

line-height bezieht sich auf Text innerhalb von #navigation. Ob der nun verlinkt ist oder nicht, spielt dabei keine Rolle....

[NicNac]

ja schon, aber ich dachte vorhin müsse es mit heigth auch gehen, weil ich ja für #navigation a auch einen topmargin definiert habe, deswegen verstehe ich absolut nicht wieso da die Browser nicht anzeigten was ich wollte