Navigation zentrieren

[Soniyx]

Genau das ist das Problem, an dem ich derzeit auch sitze.
Ich habe die Vermutung, das in der CSS etwas verhindert, das die Navigation mit Grafiken mittig platziert wird. Lass ich die Grafiken (Klassenzuordnung) weg, ist die Navigation zentriert. Werde mir die Klassen nochmal genau ansehen, vielleicht sehe ich da einen Fehler.

Habe beim Ersteller gerade folgendes gefunden:

Unfortunately, with CSS, it's currently impossible to centre an unordered list when its display is set to block: this is what is used to create the rollover effect. And so, if you wanted to center the elements, you'd have to use standard images rather than a list, which would then remove the rollover effect, unless you used javascript to reproduce it.

Nun, soll heissen, das für den Roll-Over-Effekt ein Befehl in der CSS benötigt wird. Dieser verhindert gleichzeitig, das sich die Navigation zentrieren lässt. Will man diesen Effekt auch in der zentrierten Version haben, müsste man Javascript benutzen.

[Soniyx]

Habe mir gerade mal die Stelle mit dem Hinweis des Erstellers in der stylesheet.CSS angesehen, die für die Navigation zuständig ist und dabei ist mir folgendes aufgefallen:

Code: Alles auswählen

/* Navigation
 --------------------- */

#menu {
	padding: 8px 0 0 14px;
	
}

.faq, .ucp, .members, .search, .nonewpms, .newpms, .mcp { 
	float: left; 
	display: block; 
	width: 107px; 
	height: 50px;
	margin: 0 10px 0 10px;

display steht derzeit auf block:

block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.

ich habe mir mal gedacht, dieses durch inline-block zu ersetzen:

inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element" wie img. Dieser Wert wird erst mit CSS 2.1 eingeführt.

Dabei habe ich noch "float" folgend verändert (kann auch gelöscht werden):

Code: Alles auswählen

float: center;

damit war die Navigation zentriert und der Hover-Effekt ist geblieben. Aber ein Problem gab es bei mir noch: durch diese Änderung sind die "Forenübersicht" und der Abmelden-Button nach unten gerutscht, was dann nicht mehr zum Design passte.
Für die Verschiebungen habe ich beim margin den unteren Teil um 14 hochgeholt.

Am Ende muss der Code so aussehen:

Code: Alles auswählen

/* Navigation
 --------------------- */

#menu {
	padding: 8px 0 0 14px;
	
}

.faq, .ucp, .members, .search, .nonewpms, .newpms, .mcp { 
 	float: center;
	display: inline-block;
	width: 107px; 
	height: 50px;
	margin: 0 10px -14px 10px;
}

Einen Spoiler habe ich hier noch nicht gefunden, sonst hätte ich das da rein gepackt.
Danke euch trotzdem für eure Mühen und Lösungsvorschläge. Das Ergebnis könnt ihr euch auf http://evergreen-board.ath.cx ansehen.