Navigationsleiste zentrieren

[Martin Truckenbrodt]

Hallo,
http://www.martin-truckenbrodt.com/cgi/ ... /index.php
Ich habe noch eine zusätzliche horizontale Navigationsleiste eingebaut.
WIe bekomme ich diese Leiste bzw. die Einträge zentriert?
aktuell oveall_header.html

Code: Alles auswählen

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN and S_ENABLE_ZAM-->
			<ul class="linklist zam">
				<!-- IF S_ENABLE_ZAM_SPECIES --><li class="zam"><a href="{U_ZAM_SPECIES}" title="{L_ZAM_SPECIES_EXPLAIN}">{L_ZAM_SPECIES}</a></li><!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_KEEPERS --><li class="zam"><a href="{U_ZAM_KEEPERS}" title="{L_ZAM_KEEPERS_EXPLAIN}">{L_ZAM_KEEPERS}</a></li><!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_OFFERS --><li class="zam"><a href="{U_ZAM_OFFERS}" title="{L_ZAM_OFFERS_EXPLAIN}">{L_ZAM_OFFERS}</a></li><!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_LITERATURE --><li class="zam"><a href="{U_ZAM_LITERATURE}" title="{L_ZAM_LITERATURE_EXPLAIN}">{L_ZAM_LITERATURE}</a></li><!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_LOCATIONS --><li class="zam"><a href="{U_ZAM_LOCATIONS}" title="{L_ZAM_LOCATIONS_EXPLAIN}">{L_ZAM_LOCATIONS}</a></li><!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_LINKS --><li class="zam"><a href="{U_ZAM_LINKS}" title="{L_ZAM_LINKS_EXPLAIN}">{L_ZAM_LINKS}</a></li><!-- ENDIF -->
			</ul>
			<!-- ENDIF -->

aktuell common.css

Code: Alles auswählen

ul.zam {
	clear: both;
	padding-top: 1px;
	margin-top: 1px;
	border-top: 1px solid #FFFFFF;
}

li.zam {
	float: left;
	text-align: center;
}

Danke und Gruß Martin

[Martin Truckenbrodt]

Hallo,
sorry, ich hatte da noch einen kleinen Fehler mit den Berechtigungen. Jetzt sehen auch Gäste die Leiste.

Gruß Martin

[7emper5i]

Hi,

wenn du deine Leiste in das bestehende System integrieren möchtest, müsstest du diese ein wenig anders definieren.
Ich hab selber leider nicht die Zeit, es "mal eben" zu machen, daher geb ich dir ein wenig was zu lesen, dort findest du die Hilfestellung anhand derer du das dann problemlos bewerkstelligen kannst.

Peter Kropff: CSS Elemente

Gruß

[NSF]

Hey,

Also ich würde dir raten "linklist" zuentfernen und eine neue Angabe zuschreiben!

gehe in die common.css und suche:

Code: Alles auswählen

ul.rightside {
	float: right;
	margin-left: 5px;
	margin-right: -5px;
	text-align: right;
}

danach fügst du ein:

Code: Alles auswählen

ul.navi-center {
	text-align: center;
	display: block;
	margin: 0;
}

ul.navi-center li {
	display: block;
	list-style-type: none;
	width: auto;
	margin-right: 5px;
	font-size: 1.1em;
	line-height: 2.2em
}

("navi-center" kannst du auch ohne Probleme umbennen!)

gehe in deine overall_header.html suche:

Code: Alles auswählen

<ul class="linklist zam">

suche in der Zeile:

Code: Alles auswählen

linklist

ersetzte es mit:

Code: Alles auswählen

navi-center

(oder deiner spezifischen (umbenannte) Angabe)

Und Fertig! ^^

Ich hab es getestet, funktioniert super! Sollte auch keinerlei Probleme mit den Farben geben, es sollte die Farben der allgemeinen linkfarbe annehmen.

Mfg NSF

[Martin Truckenbrodt]

Hallo NSF,
Danke für den Code!
Allerdings haut die Sache nicht ganz genau so hin, wie ich es will.
Er macht mir für die neue Leiste leider keine neue Zeile.
Mein aktueller Code:
common.css

Code: Alles auswählen

ul.zam-modules-navbar {
	text-align: center;
	margin: 0;
	border-top: 1px solid #FFFFFF;
	display: block;
}

ul.zam-modules-navbar li {
	width: auto;
	margin-right: 5px;
	font-size: 1.1em;
	line-height: 2.2em;
	float: left;
	font-weight: bold;
	display: block;
	list-style-type: none;
}

overall_header.html

Code: Alles auswählen

			<!-- IF not S_IS_BOT and S_ENABLE_ZAM-->
			<ul class="zam-modules-navbar">
				<!-- IF S_ENABLE_ZAM_SPECIES --><li><a href="{U_ZAM_SPECIES}" title="{L_ZAM_SPECIES_EXPLAIN}">{L_ZAM_SPECIES}</a></li> &bull; <!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_KEEPERS --><li><a href="{U_ZAM_KEEPERS}" title="{L_ZAM_KEEPERS_EXPLAIN}">{L_ZAM_KEEPERS}</a></li> &bull; <!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_OFFERS --><li><a href="{U_ZAM_OFFERS}" title="{L_ZAM_OFFERS_EXPLAIN}">{L_ZAM_OFFERS}</a></li> &bull; <!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_ARTICLES --><li><a href="{U_ZAM_ARTICLES}" title="{L_ZAM_ARTICLES_EXPLAIN}">{L_ZAM_ARTICLES}</a></li> &bull; <!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_LITERATURE --><li><a href="{U_ZAM_LITERATURE}" title="{L_ZAM_LITERATURE_EXPLAIN}">{L_ZAM_LITERATURE}</a></li> &bull; <!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_LOCATIONS --><li><a href="{U_ZAM_LOCATIONS}" title="{L_ZAM_LOCATIONS_EXPLAIN}">{L_ZAM_LOCATIONS}</a></li> &bull; <!-- ENDIF -->
				<!-- IF S_ENABLE_ZAM_LINKS --><li><a href="{U_ZAM_LINKS}" title="{L_ZAM_LINKS_EXPLAIN}">{L_ZAM_LINKS}</a></li><!-- ENDIF -->
			</ul>
			<!-- ENDIF -->

Sobald ich clear: both; beim ul mache, rutscht alles wieder nach links. Allerdings ist dann alles in der neuen extra Zeile.
Gruß Martin

[NSF]

Hey Martin,

Mit einem mehrfachen li-tag klappt eine Zentirerung nicht! Entschuldigung für die falche Versprechung, das es klappt würde -.-

So nun zum funktionierenden Code ^^

overall_header.html

Code: Alles auswählen

		<!-- IF not S_IS_BOT and S_ENABLE_ZAM-->
			<ul class="zam-modules-navbar">
				<li>
					<!-- IF S_ENABLE_ZAM_SPECIES --><a href="{U_ZAM_SPECIES}" title="{L_ZAM_SPECIES_EXPLAIN}">{L_ZAM_SPECIES}</a> &bull; <!-- ENDIF -->
					<!-- IF S_ENABLE_ZAM_KEEPERS --><a href="{U_ZAM_KEEPERS}" title="{L_ZAM_KEEPERS_EXPLAIN}">{L_ZAM_KEEPERS}</a> &bull; <!-- ENDIF -->
					<!-- IF S_ENABLE_ZAM_OFFERS --><a href="{U_ZAM_OFFERS}" title="{L_ZAM_OFFERS_EXPLAIN}">{L_ZAM_OFFERS}</a> &bull; <!-- ENDIF -->
					<!-- IF S_ENABLE_ZAM_ARTICLES --><a href="{U_ZAM_ARTICLES}" title="{L_ZAM_ARTICLES_EXPLAIN}">{L_ZAM_ARTICLES}</a> &bull; <!-- ENDIF -->
					<!-- IF S_ENABLE_ZAM_LITERATURE --><a href="{U_ZAM_LITERATURE}" title="{L_ZAM_LITERATURE_EXPLAIN}">{L_ZAM_LITERATURE}</a> &bull; <!-- ENDIF -->
					<!-- IF S_ENABLE_ZAM_LOCATIONS --><a href="{U_ZAM_LOCATIONS}" title="{L_ZAM_LOCATIONS_EXPLAIN}">{L_ZAM_LOCATIONS}</a> &bull; <!-- ENDIF -->
					<!-- IF S_ENABLE_ZAM_LINKS --><a href="{U_ZAM_LINKS}" title="{L_ZAM_LINKS_EXPLAIN}">{L_ZAM_LINKS}</a><!-- ENDIF -->
				</li>
			</ul>
		<!-- ENDIF -->

common.css

Code: Alles auswählen

ul.zam-modules-navbar {
	text-align: center;
	margin: 30px 0 0 0;
	border-top: 1px solid #FFFFFF;
}

ul.zam-modules-navbar li {
	list-style-type: none;
	width: auto;
	margin-right: 5px;
	font-size: 1.1em;
	line-height: 2.2em
}

Das sollte nun klappen, habs jetzt auch mal mit mehreren Links versucht Du musst es nur noch nach deinen bedürfnissen anpassen, stylemäßig (text-gestallung usw...)

Mfg NSF

[Martin Truckenbrodt]

Hallo NSF,
jetzt haut es schon besser hin!

Vielen Dank!

Gruß Martin

[Cruiser]

ich möchte gerne meine Forenübersicht [ externes Bild ] zentriert haben und habe nach der obrigen Anleitung auch die common.css angepaßt und alles so geändert wie beschrieben. Nur leider wird zentriert sonder nur das Format (Schriftgröße) geändert.
Was mache ich falsch?

(Originale Code)

Code: Alles auswählen

         <div class="clear"></div>
		</div>

		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

[Martin Truckenbrodt]

Hallo Cruiser,
sind die Namen der Classen identisch zwischen denen der html Dateien und denen der css Dateien?

Gruß Martin

[Cruiser]

Ähhhh was