Drae Posted January 28, 2013 Share Posted January 28, 2013 I've been having some difficulty getting this suckerfish drop-down menu to align its links to the center of the webpage. The container it is held within spans across the viewer's window which is fine. It's the links themselves I am trying to center and they are refusing to align correctly. Here's the CSS and the HTML to go with it at the moment: CSS: #topbar-container{position: absolute;left: 0px;margin: 0%;font-size: 12px; width:100%; text-align: left; white-space:nowrap; padding: 2px 4px 2px 4px; /* This changes the padding on the top topbar options. Goes T, R, B then Left. */} #topbar a:visited, #topbar color: #f5f5f5;text-decoration:none;} #topbar color: #f5f5f5; text-decoration:none;} #topbar ul { margin:0; position:relative; vertical-align: bottom; } #topbar ul ul { z-index:500; display:none; margin:-1em 0 0 -1em; } #topbar ul ul ul { left:100%; } div#topbar cursor:pointer; li:hover ul ul,div#topbar li li:hover ul ul,div#topbar li li li display:none;} div#topbar li:hover ul,div#topbar li li li:hover ul{display:block;} HTML: <div id="topbar-container"><div id="topbar"> {$welcomeblock}<ul> <li><a href="#">Forum Tools</a> <ul> <li><a href=http://sizaelrpg.com/mybb"/search.php">Search</a></li> <li><a href="http://sizaelrpg.com/mybb/search.php?action=getnew">Newest Posts</a></li> <li><a href="http://sizaelrpg.com/mybb/search.php?action=getdaily">Today's Posts</a></li> <li><a href="http://sizaelrpg.com/mybb/memberlist.php">Member List</a></li> <li><a href="http://sizaelrpg.com/mybb/calendar.php">Calendar</a></li> </ul> </li> </ul><!-- NEXT TOPBAR DROP-DOWN /--><ul> <li><a href="#"><img src="http://i6.photobucket.com/albums/y244/j9wolf/COTSkin1/topbar_dragon2.png" title="Get Started!" alt="Get Started!" width="36"></a> <ul> <li><a href=http://chroniclesofthedas.ashkir.com/thread-3.html>Newcomer's Guide</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-2974.html>Playable Races</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-2977.html>Classes & Specialisations</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-419.html>Cannon: Templars</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-158.html>Cannon: Mages</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-2954.html>Account Types</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-418.html>Guide: Profile Creation</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-1793.html>FAQs</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/forum-191.html>MyBB Help</a></li> </ul> </li> </ul><!-- NEXT TOPBAR DROP-DOWN /--> <ul> <li><a href="#">Basics</a> <ul> <li><a href=http://chroniclesofthedas.ashkir.com/thread-417.html>Rules</a></li <li><a href=http://chroniclesofthedas.ashkir.com/thread-1254.html>Setting Overview</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/forum-89.html>Must Reads</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-292.html>Face Claims</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-4550-post-46559.html>Meet the Staff</a></li> </ul> </li> </ul><!-- NEXT TOPBAR DROP-DOWN /--> <ul> <li><a href="#">World Info</a> <ul> <li><a href=http://chroniclesofthedas.ashkir.com/forum-38.html>The World</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-3311-post-41592.html>Lore Index</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-216.html>Canon Info</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-4-post-6136.html>Races</a></li> <li><a href="http://chronicles-of-thedas.deviantart.com/gallery/32325334" target="_blank">Maps of Thedas</a></li> </ul> </li> </ul><!-- NEXT TOPBAR DROP-DOWN /--> <ul> <li><a href="#">Get Involved!</a> <ul> <li><a href=http://chroniclesofthedas.ashkir.com/thread-379-post-1706.html>Player Roster</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-1207-post-8512.html>Faction Roster</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-6-post-15.html>Months & Annums Coding</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-3005-post-34706.html>Individual Writing</a></li> <li><a href=http://chroniclesofthedas.ashkir.com/thread-108.html>Profile Management</a></li> </ul> </li> </ul></ul><!-- TOPBAR CLOSER - PAIRS WITH THE FIRST UL AFTER TH WELCOME BLOCK. DON'T REMOVE. /--></div><!-- CLOSES TOPBAR. DON'T REMOVE. /--></div><!-- CLOSES TOPBAR CONTAINER. DON'T REMOVE. /--> Any help would be greatly appreciated! I'm doing this for some friends and I always seem to have trouble with drop-down menus lol! Link to comment Share on other sites More sharing options...
JoReL Posted January 30, 2013 Share Posted January 30, 2013 i have a similiar dropdown menu with css: #menu { list-style:none; width:1160px; margin:0px auto 0px auto; height:43px; padding:0px 20px 0px 20px;}dropdown_2columns{margin:4px auto; float:left; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none;} <ul id="menu"> <li><a href="#" class="drop">Corporative</a><!-- menu starts--> <div class="dropdown_2columns"><!-- starts 2 column container --> Have you change the position value? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 30, 2013 Share Posted January 30, 2013 Your html, AND your css need to be validated, especially the css, you have missing/misplace closing and opening curly brackets, and until these are sorted out, any solution given would not work anyway. Link to comment Share on other sites More sharing options...
Drae Posted January 30, 2013 Author Share Posted January 30, 2013 (edited) Your html, AND your css need to be validated, especially the css, you have missing/misplace closing and opening curly brackets, and until these are sorted out, any solution given would not work anyway. Thanks, but this is only part of a template and CSS for a MyBB skin I'm working on, so the dividers and such are actually found further down in the template - I'm just concentrating the coding sections given for the menu. Edited January 31, 2013 by Drae Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now