Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Shift CSS Menu over??? how??? 1

Status
Not open for further replies.
i3iz

i3iz

Technical User
Jan 3, 2005
30
0
0
US
The menu i created does not center, it sits 83.333px from the left side of the screen.

HOW DO I CENTER THE MENU?


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
a {
	color:#FFFFFF;
	}
body {
	background-color:#000;
    behavior: url(csshover.htc);} /* WinIE behavior call */
navwhite a, navwhite {
	font: normal 11px verdana;
	color: #ffffff;}
div#nav {
	font: normal 11px verdana;
	color: #ffffff; float: left; margin: 0px 0px 0 83.333px;
  	background: #0000CC; border: 1px solid #AAA;}
div#nav ul {margin: 0; padding: 0; background: #0000CC;
  border: 1px solid #CCC; border-width: 0 1px;}
div#nav ul.level1 li {position: relative; list-style: none; margin: 0;
  float: left; width: 83.333px; line-height: 15px;}
div#nav ul.level2 li {position: relative; list-style: none; margin: 0;
  float: left; width: 160px; line-height: 10px;}
div#nav li:hover {background: #0000dd;}
div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #0000ff;}
div#nav li a {display: block; padding: 5px 0 5px 10px;
  text-decoration: none; width: 160px;}

div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; width: 160px;
  display: none;}
div#nav ul ul li {border-bottom: 1px solid #CCC;}
div#nav li.submenu li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu li.submenu:hover {background-color: #0000ff;}
div#nav li.submenu li.submenu:hover {background-color: #0000ff;}
div#nav ul.level1 li.submenu:hover ul.level2, 
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
div#nav ul.level2 {top: 25px; left: 0px;}
div#nav ul.level3 {top: -1px; left: 160px;
  border-top: 1px solid #CCC;}
</style>
</head>
<body> 
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td height="83" width="750" bgcolor="#FFFFFF" align="left" valign="top"><a href="[URL unfurl="true"]http://www.pacificcoastchurch.org/new/"[/URL] target="_top"><img border="0" src="../images/pc2.jpg" width="750" height="83"></a></td>
  </tr>
</table>

	<div id="nav">
<ul class="level1"> 

	  <li><a class="navwhite" href="#">Home</a></li> 
	  <li><a class="navwhite" href="#">Services</a></li>
	  <li><a class="navwhite" href="#">Events</a></li>
	  <li class="submenu"><a class="navwhite" href="#">Ministries</a>
		<ul class="level2">
		  <li class="submenu"><a class="navwhite" href="#">Test</a>
		  	<ul class="level3">
				<li><span  class="navwhite"><a href="#">Test</a></span></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Singles</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">Audio</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Digital Audio Sermons</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">Test</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Elder Care</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">Test</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Couples &amp; Mixed</a></li>
				<li><a class="navwhite" href="#">Women's Groups</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">Hospitality</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Greeters</a></li>
				<li><a class="navwhite" href="#">Information Booth</a></li>
				<li><a class="navwhite" href="#">Traffic</a></li>
				<li><a class="navwhite" href="#">Refreshments</a></li>
				<li><a class="navwhite" href="#">Ushers</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">Missions</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Short-Term Missions</a></li>
				<li><a class="navwhite" href="#">2005 Missions Speakers</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">One on One Discipleship</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Test</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">Teaching</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Prep&bull;Step</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">Children's</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Nursery &amp; Preschool</a></li>
				<li><a class="navwhite" href="#">1st-6th Grade</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Special Needs</a></li>
			</ul>
		  </li>
		  <li class="submenu"><a class="navwhite" href="#">Youth</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
			</ul>
		  </li>
	  <li class="submenu"><a class="navwhite" href="#">Men's</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Discipleship</a></li>
				<li><a class="navwhite" href="#">Bible Study</a></li>
				<li><a class="navwhite" href="#">Special Events</a></li>
			</ul>
		  </li>
	  <li class="submenu"><a class="navwhite" href="#">Women's</a>
		   	<ul class="level3">
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Bible Study</a></li>
				<li><a class="navwhite" href="#">Test</a></li>
				<li><a class="navwhite" href="#">Special Events</a></li>
			</ul>
		  </li>
		</ul>
    </li>  
	  <li><a class="navwhite" href="#">Directions</a></li>
	  <li><a class="navwhite" href="#">Resources</a></li>
	  <li class="submenu"><a class="navwhite" href="#">Leaders</a>
	  	<ul class="level2">
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
			<li><a class="navwhite" href="#">Test</a></li>
		</ul>
	  </li>
	  <li><a class="navwhite" href="#">Beliefs</a></li>
	  <li><a class="navwhite" href="#">Contact</a></li> 
</ul> 
</div><br />

</body>
</html>
 
Sort by date Sort by votes
You specified:
Code: 
div#nav {
font: normal 11px verdana;
color: #ffffff; float: left; margin: 0px 0px 0 83.333px;
which floats it to the left then puts a left margin of 83.333px.

What do you WANT it to do?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
i want it to be centered. But i want each float to be 83.333px to the right of the previous one... does changing the margins in this line affect the rest of the menu?

--i3iz
Technical Newbie
 
Upvote 0 Downvote
Yes. They're all in the same DIV.

Although you override that margin for
Code: 
div#nav ul.level1 li {position: relative; list-style: none; [COLOR=red]margin: 0;[/color]
float: left; width: 83.333px; line-height: 15px;}
Hmmm...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
ok so now i just put the below list into a table and removed the other margin. Turns out the float was doing all of the work.

New problem is the fact that on windows IE it inherits some of the values. So
instead of Level1 = 83.333px, it is actually 160, and level2 and level3 are also 160px.

Can anyone help me with get this too look fine on IE Win?

I am on a mac, and all the browsers show it fine. Viewing it on win/IE it looks way different.

Ideas?

--i3iz
Technical Newbie
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

RosieGp
  • Locked
  • Question
How to read string of 0s and 1s 1
Replies
3
Views
131
LyndonOHRC
LyndonOHRC
brk1221
  • Locked
  • Question
Preview in browser - no css
Replies
3
Views
63
spamjim
spamjim
FALCONSEYE
  • Locked
  • Question
Error: no known VMs. (check for corrupt jvm.cfg file) !!! How I Fixed It !!!
Replies
0
Views
152
FALCONSEYE
FALCONSEYE
samiotis1949
  • Locked
  • Question
Spry menu given me a headache
Replies
0
Views
42
samiotis1949
samiotis1949
lollieleaver
  • Locked
  • Question
Dreamweaver CS4 - how can I make an Access database downloadable from my site?
Replies
2
Views
48
lollieleaver
lollieleaver

Part and Inventory Search

Sponsor

Back
Top