Results 1 to 2 of 2

Thread: Centering

  1. #1
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    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 : http://www.dynamicdrive.com/style/cs...rop_down_menu/ .
    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
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css3splitmenu.css" />
    
    <!--[if lte IE 8]>
    
    <style>
    
    /* 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;
    		}
    
    </style>
    
    <![endif]-->
    
    </head>
    <body>
    <div style="width: 420px; margin: 0 auto;">
    <div class="css3splitmenu">
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a> <input type="checkbox" />
    
    <ul id="t">
    <li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
    <li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/">DD Forums</a></li>
    <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
    <li><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></li>
    <li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
    </ul>
    </div>  
    
    <div class="css3splitmenu">
    <a href="http://www.javascriptkit.com">JavaScript Kit</a> <input type="checkbox" />
    
    <ul>
    <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
    <li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
    <li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
    <li><a href="http://www.javascriptkit.com/howto/">Web Design Tutorials</a></li>
    </ul>
    </div>  
    
    <div class="css3splitmenu nocss3splitmenu">
    <a href="http://www.cssdrive.com">CSS Drive</a>
    </div>
    </div>
    
    <!-- Script below should follow all split menus -->
    
    <script type="text/javascript">
    
    ( function(){ // local scope
    
    	if (!document.querySelectorAll || !document.addEventListener)
    		return
    	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
    		}
    	})
    
    })();
    
    
    </script>
    
    </body>
    </html>
    Demo:

    http://home.comcast.net/~jscheuer1/s...tmenu/demo.htm
    Last edited by jscheuer1; 01-11-2014 at 12: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, 05:30 PM
  2. Centering Nav. Bar.
    By Ron D in forum HTML
    Replies: 2
    Last Post: 02-01-2011, 02:06 AM
  3. Resolved Help centering a div within a div
    By Snot in forum CSS
    Replies: 0
    Last Post: 08-12-2009, 08:38 PM
  4. centering css nav bar
    By nolanbuc in forum CSS
    Replies: 5
    Last Post: 07-02-2008, 11:06 AM
  5. Not centering...
    By alexjewell in forum CSS
    Replies: 2
    Last Post: 08-13-2007, 04:02 PM

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
  •