phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

Navigationsleiste zentrieren

https://www.phpbb.de/community/viewtopic.php?t=208818

Seite 1 von 2

Navigationsleiste zentrieren

Verfasst: 22.08.2010 21:50
von 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

Re: Navigationsleiste zentrieren

Verfasst: 23.08.2010 17:35
von Martin Truckenbrodt
Hallo,
sorry, ich hatte da noch einen kleinen Fehler mit den Berechtigungen. Jetzt sehen auch Gäste die Leiste.

Gruß Martin

Re: Navigationsleiste zentrieren

Verfasst: 23.08.2010 18:33
von 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ß

Re: Navigationsleiste zentrieren

Verfasst: 23.08.2010 22:03
von 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

Re: Navigationsleiste zentrieren

Verfasst: 24.08.2010 20:57
von 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

Re: Navigationsleiste zentrieren

Verfasst: 24.08.2010 21:36
von 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

Re: Navigationsleiste zentrieren

Verfasst: 24.08.2010 22:23
von Martin Truckenbrodt
Hallo NSF,
jetzt haut es schon besser hin! :)

Vielen Dank!

Gruß Martin

Re: Navigationsleiste zentrieren

Verfasst: 23.03.2011 15:10
von 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>

Re: Navigationsleiste zentrieren

Verfasst: 23.03.2011 18:21
von Martin Truckenbrodt
Hallo Cruiser,
sind die Namen der Classen identisch zwischen denen der html Dateien und denen der css Dateien?

Gruß Martin

Re: Navigationsleiste zentrieren

Verfasst: 23.03.2011 18:26
von Cruiser
Ähhhh was :lol:
Alle Zeiten sind UTC+02:00
Seite 1 von 2

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de