How center

tommie
Donor
Posts: 34
Joined: Sun Jan 30, 2011 11:48 am
Flag: Netherlands

How center

Post by tommie »

Hi Space,

How can i center de menu ???

Image

thnx , Tommie

Top
User avatar
spaceace
Site Owner
Posts: 989
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada

Re: How center

Post by spaceace »

i worked on that for a few hours trying to get it to center and can't remember off the top of my head exactly what i changed to get it. but here's my menu.css and menu.html. just change the menu.html to how you need it for your forum.

menu.css
Code: Select all
/* Bluespace Menu
---------------------------------------- */

.nav_menu {
	text-align: center;
	width: auto;
	height: 30px;
	margin: -3px 0 3px 0;
	background: #1AC5CD;
	-webkit-border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.4)), color-stop(30%,  rgba(0, 0, 0, 0.2)));
	background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
}

.menu, .menu ul {
	list-style: none;
}

.menu {
	position: relative;
	width: auto;
	padding: 0 10px;
	height: 30px;
	background: #1AC5CD;
	z-index: 10;
	display: inline-block;
	-webkit-border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0.4)), color-stop(30%,  rgba(0, 0, 0, 0.2)));
	background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
}

.menu li {
	float: left;
}

.menu li a {
	clear: both;
	float: left;
	display: block;
	font: normal 12px/30px verdana, sans-serif;
	color: #D69A4A;
	text-decoration: none;
	padding: 0 10px;
	text-shadow: 0 0 8px #000000, 0 0 8px #000000, 0 0 8px #000000, 0 0 4px #000000;
}


* html .menu li a:hover {
	background: #891111;
	color: #FFFFFF;
}

.menu li a:hover,
.menu li:hover > a {
	background: #006666;
	color: #1AC5CD;
	text-shadow: 0 0 8px #000000, 0 0 8px #000000, 0 0 8px #000000, 0 0 4px #000000;
	text-decoration: none;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.4)), color-stop(30%,  rgba(255, 255, 255, 0.2)));
	background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0));
	-webkit-border-top-right-radius:5px;
	-webkit-border-top-left-radius:5px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-topleft:5px;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
}

.menu table {
	border-collapse: collapse;
	padding: 0;
	margin: 0 0 -1px 0;
	border: 0;
}

.menu div.holder {
	max-width: 720px;
	opacity: 0.92;
	alpha(opacity=92);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=92);
	height: 0;
	top: 30px;
	position: absolute;
	overflow: hidden;
	-webkit-transition: height 0.8s linear;
}

.menu div.slide {
	background: #006666;
	max-width: 670px;
	padding: 0 15px 15px;
	border: 1px solid #555555;
	position: relative;
	top: -300px;
	-webkit-border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	-moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6);
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1)), to(rgba(50, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 0.4)), color-stop(20%,  rgba(50, 0, 0, 0.2)));
	background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.4) 10%, rgba(50, 0, 0, 0.2) 20%, rgba(50, 0, 0, 0));
	-webkit-transition: top 0.8s linear;
}

.menu div.slide dl {
	float: left;
	width: 200px;
}

.menu :hover div.p1 {
	height: 275px;
}

.menu :hover div.p2 {
	height: 127px;
}

.menu :hover div.p3 {
	height: 136px;
}

.menu :hover div.p4 {
	height: 228px;
}

.menu :hover div.slide {
	top: 0px;
}

.menu li .slide dl {
	padding: 0;
	margin: 0;
}

.menu li .slide dl dt {
	float: left;
	font-family: verdana, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-decoration: underline;
	padding: 10px 0 0;
	margin: 0;
	height: 18px;
	line-height: 18px;
	color: #1AC5CD;
}

.menu li .slide dl dd {
	padding: 0;
	margin: 0;
}

.menu li .slide dl dd a {
	background: transparent;
	height: 18px;
	line-height: 18px;
}

* html .menu li .slide dl dd a:hover {
	background: transparent;
}

#info .clear {
	clear: left;
}

#info img {
	display: block;
	margin: 0 auto;
}
menu.html
Code: Select all
<div class="nav_menu">
	<ul class="menu">
		<!-- IF not S_IS_BOT -->
			<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>
			<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
				<li><a href="{U_REGISTER}"><strong>{L_REGISTER}</strong></a></li>
			<!-- ENDIF -->
		<!-- ENDIF -->
		<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<!-- IF S_DISPLAY_PM -->
				<li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li>
			<!-- ENDIF -->
			<li><a href="#">{L_PROFILE}<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<div class="holder p1">
					<div class="slide">
						<dl>
							<dt>{L_USERS}</dt>
								<dd><a href="{U_PROFILE}">{L_PROFILE}</a></dd>
							<!-- IF U_MCP -->
								<dt>{L_MODERATORS}</dt>
									<dd><a href="{U_MCP}">{L_MCP}</a></dd>
									<!-- IF U_MCP_FORUM -->
										<dd><a href="{U_MCP_FORUM}">{L_MODERATE_FORUM}</a></dd>
									<!-- ENDIF -->
									<!-- IF U_MCP_TOPIC -->
										<dd><a href="{U_MCP_TOPIC}">{L_MODERATE_TOPIC}</a></dd>
									<!-- ENDIF -->
									<!-- IF U_MCP_POST -->
										<dd><a href="{U_MCP_POST}">{L_MODERATE_POST}</a></dd>
									<!-- ENDIF -->
							<!-- ENDIF -->
							<!-- IF U_ACP -->
								<dt>{L_ADMINISTRATORS}</dt>
									<dd><a href="{U_ACP}">{L_ACP}</a></dd>
							<!-- ENDIF -->
							<!-- IF U_STK -->
								<dt>{L_STK}</dt>
									<dd><a href="{U_STK}" title="{L_STK}">{L_STK}</a></dd>
							<!-- ENDIF -->
						</dl>
						<br class="clear" />
					</div>
				</div>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		<!-- IF U_RESTORE_PERMISSIONS -->
			<li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li>
		<!-- ENDIF -->
		<!-- ENDIF -->
		<li><a href="#">{L_FORUM}<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div class="holder p1">
				<div class="slide">
					<dl>
						<dt>{L_INFORMATION}</dt>
							<dd><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></dd>
								<!-- IF S_DISPLAY_MEMBERLIST -->
									<dd><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></dd>
								<!-- ENDIF -->
						<!-- IF not S_IS_BOT and U_MARK_FORUMS or U_MARK_TOPICS -->
								<!-- IF not S_IS_BOT and U_MARK_FORUMS -->
									<dd><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></dd>
								<!-- ENDIF -->
								<!-- IF not S_IS_BOT and U_MARK_TOPICS -->
									<dd><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a></dd>
								<!-- ENDIF -->
						<!-- ENDIF -->
					</dl>
					<br class="clear" />
				</div>
			</div>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<!-- IF S_DISPLAY_SEARCH -->
		<li><a href="#">{L_SEARCH}<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<div class="holder p1">
					<div class="slide">
						<dl>
							<dt>{L_SEARCH_FOR}</dt>
									<!-- IF S_USER_LOGGED_IN --><dd><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></dd><!-- ENDIF -->
									<!-- IF S_LOAD_UNREADS --><dd><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></dd><!-- ENDIF -->
									<!-- IF S_USER_LOGGED_IN --><dd><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></dd><!-- ENDIF -->
									<dd><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></dd>
									<dd><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></dd>
								<!-- IF not S_IN_SEARCH -->
									<dt>{L_SEARCH_ADV}</dt>
										<dd><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a></dd>
								<!-- ENDIF -->
						</dl>
						<br class="clear" />
					</div>
				</div>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<!-- ENDIF -->
	<!-- IF S_DONATE_ENABLED -->
		<li><a href="{U_DONATE}" title="{L_DONATE_EXPLAIN}">{L_DONATE}</a></li>
		<!-- IF S_DONATE_LIST_ENABLED -->
			<li><a href="{U_DONATE_LIST}" title="{L_DONORS_EXPLAIN}">{L_DONORS}</a></li>
		<!-- ENDIF -->
	<!-- ENDIF -->
	<li><a href="{U_DOWNLOADCENTRE}" title="{L_DOWNLOADCENTRE}">{L_DOWNLOADCENTRE}</a></li>
	<li><a href="{U_TRACKER}" title="{L_TRACKER}">{L_TRACKER}</a></li>
	<li><a href="{U_LINKS}" title="{L_LINKS_PAGE}">{L_LINKS}</a></li>
	<!-- IF TOTAL_MODERATOR_REPORTS --><li><a href="{U_MODERATOR_REPORTS}">{TOTAL_MODERATOR_REPORTS}</a></li><!-- ENDIF -->
	<!-- IF TOTAL_MODERATOR_POSTS --><li><a href="{U_MODERATOR_APPROVE_POSTS}">{TOTAL_MODERATOR_POSTS}</a></li><!-- ENDIF -->
	<!-- IF TOTAL_MODERATOR_TOPICS --><li><a href="{U_MODERATOR_APPROVE_TOPICS}">{TOTAL_MODERATOR_TOPICS}</a></li><!-- ENDIF -->
	<!-- IF TOTAL_MODERATOR_PMS --><li><a href="{U_MODERATOR_PMS}">{TOTAL_MODERATOR_PMS}</a></li><!-- ENDIF -->
</ul>
</div>
if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Need hosting? Click this text to check out ICDSOFT
Top
tommie
Donor
Posts: 34
Joined: Sun Jan 30, 2011 11:48 am
Flag: Netherlands

Re: How center

Post by tommie »

Thanx Man

It's working great work thanks for this :D
Top

Return to “Style Questions and Support”