CSS Forum

**SeVeN_corps** · 11-25-2009, 06:39 AM

hey guys having trouble getting this menu bar centered right heres an image of the layout just so you have an idea http://img256.imageshack.us/img256/443/layoutfinal.png baisicly i want to position a spry menu bar verticaly and horizontally centered on the smaller grey bar. if anyone could explain how i go about this or link me to a tutorial that explains exactly how i would position this that would be great.

thanks guys

P.S if you want to have a look at my source code just ask and ill post it thanks

**StylaStyla** · 11-25-2009, 07:44 PM

Hi

link would be ideal. source code would be helpful.

thanks

**SeVeN_corps** · 08:52 PM

unfortunetly i dont have a link as the site is not yet on the net hence why i posted a pic of the layout so you guys get at least some idea of what i hope to achieve.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Inside the NINE</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Inside the nine styles.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="container">
  <div id="banner"></div>
  <div id="navbar">
  <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>


</ul>
</div>
    
  </div><!-- spry vertical close -->
</div><!-- spry horizontal close -->
  </div><!-- navbar  close -->
  
</div><!-- container close -->


</body>

</html>

now heres the CSS code

Code:

@charset "utf-8";
body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: #000;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
	font-size: 12px;
}
#container {
	text-align: center;
	padding: 0px;
	width: 860px;
	height: 2000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#banner {
	background-image: url(images/headder%20test.png);
	text-align: center;
	width: 860px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 204px;
}
#navbar {
	background-image: url(images/navigation%20bar.png);
	height: 89px;
	width: 860px;
}
#navcontainer ul
{
	padding: .2em 0;
	margin: 0;
	list-style-type: none;
	color: transpearant;
	width: 100%;
	font: normal 90% arial, helvetica, sans-serif;
	text-align: center;
}

li {
	display: inline;
	color: #FFF;
}

li a
{
	text-decoration: none;
	color: #FFF;
	padding: .2em 1em;
	border-right: 1px solid #fff;
}

li a:hover
{
background-color: #369;
color: #fff;
}

ive tryed using spry menu bar in dreamweaver ( yes im building this site in dreamweaver CS4 )

baisicly i have no problem horizontally centering the menu bar its vertically im having trouble with.

i need the menu bar centered vertically so that it sits with in the grey rectangle in the image i posted before.

heres a link to a picture to assist visually with what im hoping to achieve
http://img264.imageshack.us/img264/6589/layouthelp.jpg

**SeVeN_corps** · 11-26-2009, 10:39 AM

seriously does any one have any ideas at all ?? or any tutorials that would be perfect for what im trying to achieve ? any help is much appreciated literally

**StylaStyla** · 07:36 AM

Code:

#navcontainer ul
{
    padding: .2em 0;
    margin: 0;
    list-style-type: none;
    color: transpearant;
    width: 100%;
    font: normal 90% arial, helvetica, sans-serif;
    text-align: center;
}

add "margin-top:XXpx;" pixels. Adjust the pixels acordingly to how much you are off by

**SeVeN_corps** · 12-05-2009, 11:22 AM

sorry for the late reply jstylish thanks heaps for that will give it a shot when i get a chance and will let you know how it turns out