Advanced Search

Results 1 to 5 of 5

Thread: ddtabmenu positioning trouble

  1. #1
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ddtabmenu positioning trouble

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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.

  3. #3
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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>

  5. #5
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default wow

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

    peace,
    mark

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •