Thema: Ja Purity

Hi,
wenn mich meine Erinnerung nicht trübt, sollten Änderungen an den Werten von margin und padding von #ja-mainnav da weiterhelfen. Steht in "ja-sosdmenu.css".
Am Besten mal mit Firebug das "MEnü-DIV" anklickern und an den Werten schrauben, bis du was gefunden hast, das passt.
In "template.css" findest du auch die Abstände für das "Raster" der linken/rechten Spalte. Ein Wert von 20% für margin-left und/oder padding-left bei #ja-mainnav wäre mal ein Anfang. Pack das Menü aber nicht zu voll, denn es neigt dazu einfach eine zweite Zeile zu erstellen, wenndie Fensterbreite nicht mehr ausreicht.

CirTap

Hi,
ich hab keine "Nackige" JS-Purity-Installation, kann also deine Änderungen nicht testen oder beäugen. Sorry.
"Fixieren" im Sinne von festen Pixelbreiten für eine der Spalten ist leider nicht drin, denn JA-Purity ist ja vorsätzlich als flexibles Template ausgelegt worden, in dem die linke und rechte Spalte (col-1, col-2) immer eine Breite von 20% der Gesamtbreite des äußeren Kontainer einnehmen.
Das Problem bei derlei flexiblen Templates entsteht nunmal, wenn man einen Rahmen (border) um die verschachtelten DIVs legt, denn nun ergeben die Prozentmaße nicht mehr 100% und je nach Inhalt (oder dessen Abwesenheit) ändert der Browser die Breite der Boxen, damit er "irgendwie" auf seine 100% kommt -- klappt das nicht, erscheinen Scrollbalken oder ganze Spalten brechen um.
Die Kombination von % oder em mit px (bei Breiten, li/re Ränder + Rahmen) führt praktisch immer zu Rundungsfehlern: über/unter einer bestimmten Fensterbreite werden Elemente dann plötzlicherdings nicht mehr akurat ausgerichtet.

Ich hab mich damit auch schon auseinandersetzen dürfen und mich dabei mal wieder im Besonderen mit dem Box-Model des MSIE geplagt. Auf dieser Website ist eine Fassung des finalen Templates auf der Grundlage von JA-Purity zu sehen. Das CSS bzgl. der Breitenangaben ist noch relativ intakt, wenn ich nicht irre. Das CSS fürs Hauptmenü ist mehr oder minder neu geschrieben. Das Hauptmenü ist umrandet und links bündig mit dem rechten Rand des Untermenü, auch umrandet. Es ist also um die Breite der linken Spalte "eingerückt" und somit auch passend über dem Inhalt angeordnet.
Beim Drübermausen im Untermenü, bzw. wenn ein Eintrag aktiv ist, wird dessen weiße Trennlinie zur Rechten "ausgeblendet" um das Ganze ähnlich einem Tab wirken zu lassen -- das war tricky, speziell im IE.
Für den Kontainer habe ich aber zusätzlich eine min-width und min-height eingebaut, um die Zeilenlängen in einem erträglichen Bereich zu halten (Lesefluß), will sagen: die 3 Spalten des Templates sind tatsächlich nur zwischen 840px und 980px Aussenmaß flexibel, dennoch bleibt die ganze Seite vom Besucher skalierbar.

Eine frühere Version des selben Gehacke (Hauptmenü am re. Rand des Untermenü ausrichten, bei optisch "fixer" Breite für die linke Spalte) ist hier zu bewundern :-)

Vielleicht "inspiriert" dich ja eine der Lösungen <g>

CirTap

noch was: nachdem ich das Obige geschrieben habe, viel mir auf und ein, dass du evtl. doch mit Hilfe von max-width und min-width in den diversen Kombis zu #ja-col1 dessen Breite festklopfen kannst, damit es bei zu breiten/schlanken Fenstern nicht ausufert (s. marineart).
Denk auch immer dran, die aktiven "margin" Werte der sich horizontal berührenden Kontainer zu berücksichtigen!
Firefox+Firebug oder Safari 4 können dir hier beim CSS-Testen helfen.

Viel Spaß,
CirTap

Zitat von pixi

Bei Einwände bitte bescheid geben.

"Einwände" wirst du direkt im Browser zu sehen bekommen :-)

Zitat von pixi

Ich werde dann sollte alles gut gehen die weiteren Schritte posten.

... was dann auch nicht wirklich nötig ist.
Du kannst ja am Ende deines (erfolgreichen) Prozesses die geänderten CSS-Dateien bzw. essentiellen Änderungen in eine Datei kopieren und ggf. die index.php (falls ebenfalls geändert) zippen und hier anhängen, damit jemand mit ähnlichem Problem/Wunsch schon mal was zum Spielen hat.

Möchte hier vielleicht nocht erwähnen, dass auch die "index.php" in den Templates der o.g. Websites von mir geändert wurde!