ddtabmenu positioning trouble

**markdlv77** · 10-17-2007, 02:02 PM

1) Script Title: DDTABMENU

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

3) Describe problem:

I would like to center my page (so that high resolution users can see the entire screen without scrollbars) using css. I've done this with this code:

<style type="text/css">
#container {position: absolute; left: 50%; width: 750px; margin-left: -375px; border: 0px; background-color: silver;}
#content {margin-top: 20px;}
#nav {position: fixed; top: 0; width: 750px; border-top: 2px solid black; border-bottom: 1px solid black;}
</style>

This throws the javascript off a bit so that the drop down menus come down 125px (i'm guessing) to the right of where they need to be. Any ideas?

Also, I love the dropdowntabs.js file! I really want to know exactly HOW it was written, are there any threads you know of explaining it in detail? Or maybe even someone who could explain it line by line? Thank you, God bless.

peace,
mark

**ddadmin** · 10-17-2007, 10:15 PM

Hmm aren't you talking about DD Drop Down Tabs? If so, by center, are you trying to center the CSS tabs on the page, since there is no "container" for this script actually. If so, in Example #2 on the DD demo page, centering the tabs is as easy as setting "text-align:center" inside its .css file. For some of the other CSS tabs, it's a lot harder, due to them being float:left.

**markdlv77** · 10-18-2007, 02:42 AM

Ah.. yes, I am talking about dd drop down tabs - sorry about that. But I'm not talking about the tabs themselves unfortunately. The actual dropdown menus are what are coming up 125px off. I think showing you the entire code may help a bit:

Code:

<html>
	<head>
		<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js"></script>

		<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />

		<style type="text/css">
			td {padding=2px;}
			#container {position: absolute; left: 50%; width: 750px; margin-left: -375px; border: 0px; background-color: silver;}
			#content {margin-top: 20px;}
			#nav {position: fixed; top: 0; width: 750px; border-top: 2px solid black; border-bottom: 1px solid black;}
		</style>
	</head>

	<body bgcolor = #888888>
		<div id="container">
			<div id="nav">
				<div id="colortab" class="ddcolortabs">
					<ul>
						<li><a href="" title="Home"><span>Home</span></a></li>
						<li><a href="" title="About" rel="dropmenu1_a"><span>About</span></a></li>
						<li><a href="" title="Contact"><span>Contact</span></a></li>
						<li><a href="" title="Audio" rel="dropmenu2_a"><span>Audio</span></a></li>
						<li><a href="" title="Links"><span>Links</span></a></li>
					</ul>
				</div>

				<div class="ddcolortabsline">&nbsp;</div>


				<!--1st drop down menu-->
				<div id="dropmenu1_a" class="dropmenudiv_a">
					<a href="">Brief</a>
					<a href="">Prices</a>
					<a href="">Open Slots</a>
				</div>

				<!--2nd drop down menu-->
				<div id="dropmenu2_a" class="dropmenudiv_a">
					<a href="">Beginners</a>
					<a href="">Intermediate</a>
					<a href="">Advanced</a>
				</div>

				<script type="text/javascript">
				tabdropdown.init("colortab", 3)
				</script>
			</div>

			<div id="content">
				<center>
					<table border=0>
						<tr>
							<td style="padding=40px;">Left Side</td>
							<td style="padding=40px;"><img src="" width=300px height=200px /></td>
							<td style="padding=40px;">Right Side</td>
						</tr>
					</table>
				
					<hr /><p>Bottom</p>
				</center>
			</div>
		</div>
	</body>
</html>

You may be able to test that and see what I'm talking about.. the dropdown menus pop up uncomfortably to the right. THank you for your quick reply! God bless

peace,
mark

**ddadmin** · 10-18-2007, 11:15 AM

Try moving the HTML for the drop down tabs so it's outside any container elements beside the BODY, in this case, the DIV with id="nav":

Code:

<html>
	<head>
		<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js"></script>

		<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />

		<style type="text/css">
			td {padding=2px;}
			#container {position: absolute; left: 50%; width: 750px; margin-left: -375px; border: 0px; background-color: silver;}
			#content {margin-top: 20px;}
			#nav {position: fixed; top: 0; width: 750px; border-top: 2px solid black; border-bottom: 1px solid black;}
		</style>
	</head>

	<body bgcolor = #888888>
		<div id="container">
			<div id="nav">
				<div id="colortab" class="ddcolortabs">
					<ul>
						<li><a href="" title="Home"><span>Home</span></a></li>
						<li><a href="" title="About" rel="dropmenu1_a"><span>About</span></a></li>
						<li><a href="" title="Contact"><span>Contact</span></a></li>
						<li><a href="" title="Audio" rel="dropmenu2_a"><span>Audio</span></a></li>
						<li><a href="" title="Links"><span>Links</span></a></li>
					</ul>
				</div>

				<div class="ddcolortabsline">&nbsp;</div>

			</div>

			<div id="content">
				<center>
					<table border=0>
						<tr>
							<td style="padding=40px;">Left Side</td>
							<td style="padding=40px;"><img src="" width=300px height=200px /></td>
							<td style="padding=40px;">Right Side</td>
						</tr>
					</table>
				
					<hr /><p>Bottom</p>
				</center>
			</div>
		</div>

				<!--1st drop down menu-->
				<div id="dropmenu1_a" class="dropmenudiv_a">
					<a href="">Brief</a>
					<a href="">Prices</a>
					<a href="">Open Slots</a>
				</div>

				<!--2nd drop down menu-->
				<div id="dropmenu2_a" class="dropmenudiv_a">
					<a href="">Beginners</a>
					<a href="">Intermediate</a>
					<a href="">Advanced</a>
				</div>

				<script type="text/javascript">
				tabdropdown.init("colortab", 3)
				</script>
	</body>
</html>

**markdlv77** · 10-22-2007, 01:45 AM

ah HA!!!! Genius! Thank you so much - you guys are GREAT!! God bless!

peace,
mark

Thread: ddtabmenu positioning trouble

Thread Tools

Search Thread

ddtabmenu positioning trouble

wow

Bookmarks

Bookmarks

Posting Permissions