phpBB.de

Verfasst: **25.11.2012 20:55**

Hallo liebe Community,

ich bin grad dabei unser Forum ein wenig neu zu gestalten und hab auch schon einiges selbst geschafft bzw. über die Suchfunktion hier gelöst. Nun verzweifel ich aber leider doch.
Ich nutze den Style prosilver und verstell dort eben alles in der common.css.

Meine Frage ist nun, wie ich die Navigation unter dem Header umstellen kann, dass dort alles zentriert ist.
Und wie ich eine Navigation über dem Header noch hinbekomme mit individuellen Links.
Und die letzte Frage, wie krieg ich es hin, dass Logo und Suchlfeld auch etwas "besser" zentriert sind.
Ich hab mal ne Fotomontage gemacht, wie es am besten aussehen sollte.

[ externes Bild ]

Das Original sieht so aus: http://mariowiki.net/forum/

Anbei noch der verkürzte Code mit den Veränderungen, die ich schon vorgenommen habe.

Code: Alles auswählen

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
        background-image:url(http://www.mariofans.de/Bilder/design/background.jpg);
  background-repeat:repeat;
  background-attachment:fixed; padding:0px;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
}

/* Main blocks
---------------------------------------- */
#wrap {
   width: 100%;
}

#simple-wrap {
   margin: 0 auto;
  padding: 6px 10px;
   width: 900px;

}

#page-body {
    margin: 0 auto;
    padding: 0 20px;
    clear: both;
    width: 900px;
}

#page-footer {
	clear: both;
   width: 100%;
}

#page-footer h3 {
	margin-top: 20px;
}

#logo {
     display: block;
   width: auto;
   padding: 10px 13px 0 10px;
	text-align: center;
}

a#logo:hover {
	text-decoration: none;
}

/* Search box
--------------------------------------------- */
#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 95px;
	margin-right: 5px;
	display: block;
	float: center;
	text-align: center;
	white-space: nowrap; /* For Opera */
}
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
	text-align: right;
}

.navbar {
   margin: 0 auto;
	background-color: #ebebeb;
	padding: 0 10px;
	text-align: center;
}

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.forumbg {
	background: #ebebeb none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.panel {
	margin-bottom: 4px;
	padding: 0 10px;
	background-color: #f3f3f3;
	color: #3f3f3f;
}

.post {
	padding: 0 10px;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

.post:target .content {
	color: #000000;
}

.post:target h3 a {
	color: #000000;
}
/* Horizontal lists
----------------------------------------*/
ul.linklist {
	display: block;
	margin: 0;
}

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

ul.linklist li.rightside, p.rightside {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	text-align: right;
}

ul.navlinks {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
   margin: 0 auto;
	text-align: center;
}

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

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

/* Content container styles
----------------------------------------*/
.content {
	min-height: 3em;
	overflow: hidden;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #333333;
	padding-bottom: 1px;
}

Vielen Dank für eure Hilfe

Verfasst: **02.12.2012 18:53**

Hallo,

denn legen wir mal los. Im Prosilver, ist die Navigation bzw. die Brotkrüben in dem Container: <div class="navbar">

Eine mögliche Umsetzung, um den container zu zentrieren wäre diese:

Code: Alles auswählen

.navbar {
background-color: #CADCEB;
width: 800px;
margin: 0 auto;
}

Das solltest Du aber so umsetzen:
Innerhalb der Nav-Bat sollte ein wrapper, also ein weiterer container. Dieser wäre so um zu setzen:

Code: Alles auswählen

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

					<ul class="linklist navlinks">
						<li class="icon-home"><a href="./index.php?style=1" accesskey="h">Foren-Übersicht</a> </li>

						<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="Ändere Schriftgröße">Ändere Schriftgröße</a></li>

						
					</ul>

					

					<ul class="linklist rightside">
						<li class="icon-faq"><a href="./faq.php?style=1" title="Häufig gestellte Fragen">FAQ</a></li>
						<li class="icon-members"><a href="./memberlist.php?style=1" title="Zeigt eine vollständige Liste aller Mitglieder an">Mitglieder</a></li><li class="icon-register"><a href="./ucp.php?style=1&mode=register">Registrieren</a></li>
							<li class="icon-logout"><a href="./ucp.php?style=1&mode=login" title="Anmelden" accesskey="x">Anmelden</a></li>
						
					</ul>

					<span class="corners-bottom"><span></span></span>
	</div>
</div>

Die css dazu müsste so aussehen:

Code: Alles auswählen

.navbar_wrapper {
width: 800px;
margin: 0 auto;
}

Damit wäre dieser Teil immer in der Mitte.
Weglassen kannst du den Container aber, weil dein Board ja generell nur ca 900px breit ist, aber: Da du ja den bg als Style mitnutzen möchtest, brauchst du also den bg der immer 100% (101%) ist und darin den wrapper.

Die Navigation oben,ist sehr simpel: Text einsetzen, ich glaube in der viewforum_body.html sollte der code zu finden sein.

Tipp:
Bei mir habe ich auch eine eigene Navigation, diese sieht so aus:

Code: Alles auswählen

	<div class="navbar">
		<div id='cssmenu'>
			<ul>
				<li><a href="{U_INDEX}" accesskey="h"><span>{L_INDEX}</span></a></li>
				
				<li class='has-sub '><a href='#'><span>&Uuml;ber Mich</span></a>
					<ul>
						<!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li><!-- ENDIF --><!-- ENDIF -->
					</ul>
				</li>
			   
			   	<li class='has-sub '><a href='#'><span>Links</span></a>
				  <ul>
					<li><a href="{U_NEWS}" title="{L_NEWS}">{L_NEWS}</a></li>
					<li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
					<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
						<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a></li>
					<!-- ENDIF -->
					<li><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}</li>
					
					<!-- IF not S_IS_BOT -->
						<!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					
					<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
						<!-- IF U_RESTORE_PERMISSIONS -->
							<li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li>
						<!-- ENDIF -->
					<!-- ENDIF -->
						
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
					<!-- ENDIF -->
				  </ul>
			   </li>
			   <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
					<li><!-- IF S_DISPLAY_PM --> <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF --></li>
			   <!-- ENDIF -->
			   <!-- Die Suche Last-Child => Rechts -->
			   	<li>
				<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
						<span id="search-box">
							<form action="{U_SEARCH}" method="get" id="search">
							<fieldset>
								<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
								<input class="button2" value="{L_SEARCH}" type="submit" /><br />
								
							</fieldset>
							</form>
						</span>
					<!-- ENDIF -->
				</li>
			   
			   
			</ul>
		</div>
		
			<ul class="linklist navlinks">
				<!-- BEGIN navlinks --><li><a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a> * </li><!-- END navlinks -->
				<!-- <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li> -->
				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>
	</div>

Die id "<div id='cssmenu'>" ist also komplett neu da nur eben mit den Inhalten die man braucht

Ich hoffe, das dir das weiterhilft

LG

phpBB.de

Prosilver Navileiste zentrieren und extra Headernavigation

Prosilver Navileiste zentrieren und extra Headernavigation

Re: Prosilver Navileiste zentrieren und extra Headernavigati