Results 1 to 2 of 2

Thread: Centering

  1. #1
    Join Date
    Jan 2014
    Thanked 0 Times in 0 Posts

    Default Centering

    Hello, this might be a simple question, but I am still new to CSS. I used the menu DD offers : .
    What I would like to ask is, how can I center this menu, like position it to the center ?

    Thank You

  2. #2
    Join Date
    Mar 2005
    Thanked 3,244 Times in 3,205 Posts
    Blog Entries


    In the ordinary way. Which in this case for the demo as outlined would be (additions highlighted and red):

    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css3splitmenu.css" />
    <!--[if lte IE 8]>
    /* Hide split menu from IE8 and below */
    div.css3splitmenu {
    		margin-right: 5px;
    div.css3splitmenu > a:after {
    		display: none;
    div.css3splitmenu > input {
    		display: none;
    div.css3splitmenu > ul {
    		display: none;
    <div style="width: 420px; margin: 0 auto;">
    <div class="css3splitmenu">
    <a href="">Dynamic Drive</a> <input type="checkbox" />
    <ul id="t">
    <li><a href="">What's New</a></li>
    <li><a href="">Revised</a></li>
    <li><a href="">DD Forums</a></li>
    <li><a href="">CSS Library</a></li>
    <li><a href="">Image Optimizer</a></li>
    <li><a href="">Gradient Image Maker</a></li>
    <li><a href="">FavIcon Generator</a></li>
    <div class="css3splitmenu">
    <a href="">JavaScript Kit</a> <input type="checkbox" />
    <li><a href="" >Free JavaScripts</a></li>
    <li><a href="">JS Tutorials</a></li>
    <li><a href="">JS Reference</a></li>
    <li><a href="">Web Design Tutorials</a></li>
    <div class="css3splitmenu nocss3splitmenu">
    <a href="">CSS Drive</a>
    <!-- Script below should follow all split menus -->
    <script type="text/javascript">
    ( function(){ // local scope
    	if (!document.querySelectorAll || !document.addEventListener)
    	var uls = document.querySelectorAll('div.css3splitmenu > ul'),
    			docbody = document.documentElement || document.body,
    			checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
    			zindexvalue = 100
    	for (var i=0; i<uls.length; i++){
    		( function(x){ // closure to capture each i value
    			checkboxes<i>.addEventListener('click', function(e){
    				uls[x].style.zIndex = ++zindexvalue
    				for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
    					if (y != x)
    						checkboxes[y].checked = false
    				e.cancelBubble = true
    			checkboxes<i>.addEventListener('blur', function(e){
    				setTimeout(function(), 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
    				e.cancelBubble = true
    		}) (i)
    	docbody.addEventListener('click', function(e){
    		for (var i=0; i<uls.length; i++){
    			checkboxes<i>.checked = false
    Last edited by jscheuer1; 01-11-2014 at 01:54 AM. Reason: add demo
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Resolved Not Centering
    By marain in forum HTML
    Replies: 3
    Last Post: 06-23-2013, 06:30 PM
  2. Centering Nav. Bar.
    By Ron D in forum HTML
    Replies: 2
    Last Post: 02-01-2011, 03:06 AM
  3. Resolved Help centering a div within a div
    By Snot in forum CSS
    Replies: 0
    Last Post: 08-12-2009, 09:38 PM
  4. centering css nav bar
    By nolanbuc in forum CSS
    Replies: 5
    Last Post: 07-02-2008, 12:06 PM
  5. Not centering...
    By alexjewell in forum CSS
    Replies: 2
    Last Post: 08-13-2007, 05:02 PM


Posting Permissions

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