Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post

    Two Row Horizontal Menu Centering...

    I've been working on a horizontal menu system with two rows, the top for the main cats and then the 2nd under it with pages within the cat.

    So far I've got the CSS and HTML to work relatively well, with the hovering and etc. See the below code (which is a full testing page):

    Code:
    <html>
    <head>
    <title>Menu Tester</title>
    </head>
    <body>
    <div id='menu'>
    	<ul>
    		<li><a href="/dashboard.html" title="Home"><img src="/images/buttons/home.png" alt="Home" /> Home</a> <span class="navborder">&nbsp;</span></li>
    		<li><a href="/customers/index.html" title="Customers"><img src="/images/buttons/customers.png" alt="Customers" /> Customers</a> <span class="navborder">&nbsp;</span>
    			<ul>		
    					<li><a href="/customers/add_customer.html" title="Add Customer">Add Customer</a></li>
    					<li><a href="/customers/view_customers.html" title="View Customers">View Customers</a></li>
    					<li><a href="/customers/add_site.html" title="Add Site">Add Site</a></li>
    					<li><a href="/customers/view_sites.html" title="View Sites">View Sites</a></li>
    					<li><a href="/customers/add_contact.html" title="Add Contact">Add Contact</a></li>
    					<li><a href="/customers/view_contacts.html" title="View Contacts">View Contacts</a></li>
    				</ul>
    			</li>
    			<li><a href="/suppliers/index.html" title="Suppliers"><img src="/images/buttons/suppliers.png" alt="Suppliers" /> Suppliers</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/suppliers/add_supplier.html" title="Add Supplier">Add Supplier</a></li>
    					<li><a href="/suppliers/view_suppliers.html" title="View Suppliers">View Suppliers</a></li>
    					<li><a href="/suppliers/add_rep.html" title="Add Rep">Add Rep</a></li>
    					<li><a href="/suppliers/view_reps.html" title="View Reps">View Reps</a></li>
    				</ul>
    			</li>
    			<li><a href="/projects/index.html" title="Projects"><img src="/images/buttons/projects.png" alt="Projects" /> Projects</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/projects/add_project.html" title="Add Project">Add Project</a></li>
    					<li><a href="/projects/view_projects.html" title="View Projects">View Projects</a></li>
    					<li><a href="/projects/view_costs.html" title="Review Project Costs">Review Project Costs</a></li>
    					<li><a href="/projects/view_engineers.html" title="Project Distribution">Project Distribution</a></li>
    					<li><a href="/projects/add_document.html" title="Add Document">Add Document</a></li>
    					<li><a href="/projects/view_documents.html" title="View Documents">View Documents</a></li>
    				</ul>
    			</li>
    			<li><a href="/procurement/index.html" title="Procurement"><img src="/images/buttons/procurement.png" alt="Procurement" /> Procurement</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/procurement/add_order.html" title="Add Order">Add Order</a></li>
    					<li><a href="/procurement/view_orders.html" title="View Orders">View Orders</a></li>
    					<li><a href="/procurement/approve_orders.html" title="Approve Orders">Approve Orders</a></li>
    				</ul>
    			</li>
    			<li><a href="/finance/index.html" title="Finance"><img src="/images/buttons/finance.png" alt="Finance" /> Finance</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/finance/add_invoice.html" title="Add Invoice">Add Invoice</a></li>
    					<li><a href="/finance/view_invoices.html" title="View Invoices">View Invoices</a></li>
    					<li><a href="/finance/add_billed_invoice.html" title="Add Billed Invoice">Add Billed Invoice</a></li>
    					<li><a href="/finance/view_billed_invoices.html" title="View Billed Invoices">View Billed Invoices</a></li>
    				</ul>
    			</li>
    			<li><a href="/admin/index.html" title="Admin"><img src="/images/buttons/admin.png" alt="Admin" /> Admin</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/admin/add_user.html" title="Add User">Add User</a></li>
    					<li><a href="/admin/view_users.html" title="View Users">View Users</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    </body>
    </html>
    Following this I assign the following CSS rules:
    Code:
    #menu {
    	position: absolute;
    	top: 137px;
    	width: 100%;
    	background: url(/images/bg/nav_bg.png) repeat-x;
    	height: 103px;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    #menu ul {
    	padding: 0;
    	margin: 0;
    	margin-left: -1px;
    	list-style-type: none;
    	border: 0;
    	position: relative;
    	top: 0;
    	left: 0;
    	color: #FFFFFF;
    	height: 50px; /* Height of the menu */
    }
    
    #menu ul li {
    	float: left;
    	padding: 0;
    	margin: 0;
    	display: block;
    	float: left;
    }
    
    #menu ul li a {
    	border: 0;
    	text-decoration: none;
    	display: block;
    	height: 35px; /* Height of the menu */
    	padding: 0 12px;
    	padding-top: 15px;
    }
    
    #menu ul li span.navborder {
    	background: url(/images/bg/navitem_border_bg.png) no-repeat;
    	position: absolute;
    	top: 0;
    	padding: 0;
    	margin: 0;
    	width: 1px;
    	height: 100%;
    }
    
    #menu ul li a:hover {
    	border: 0;
    	display: block;
    	background: url(/images/bg/navitem_arrow_bg.png) no-repeat bottom center;
    }
    
    #menu ul li:hover {
    	background: url(/images/bg/navitem_hover_bg.png) repeat-x;
    }
    
    #menu ul li ul {
    	display: block;
    	visibility: hidden;
    	position: absolute;
    	left: 0;
    	top: 50px;
    	height: 50px;
    	margin: 0;
    	color: #142e45;
    }
    
    #menu li:hover ul {
    	visibility: visible;
    	z-index: 100;
    }
    
    #menu li:hover ul li {
    	background: none;
    }
    
    #menu li:hover ul li a:hover{
    	background: none;
    }
    This shows the menu in two rows, with the second ULs hidden until it's parent LI is hovered over.

    My problem is with the end LIs of the top menu, as their ULs are not 'long' enough to reach them thus trying to click one the subpages is impossible. What I would really like to do is have the second ul 'centered' about the center of it's parent LI. However, if this is not possible, making the second UL wider so that I can actually click on the subpages.

    I hope that this is clear, but if not let me know and I'll try again.

    Many thanks in advance,
    Last edited by Badman3k; 03-12-2009 at 02:48 PM.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    First we need to add a DOCTYPE. No chance of your page behaving properly cross-browser if we don't have that:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Menu Tester</title>
    	
    	<style type="text/css">	
    	
    		* {
    			border:0;
    			padding:0;
    			margin:0;
    		}
    	
    		#menu {
    			position: absolute;
    			top: 137px;
    			width: 100%;
    			background: url(/images/bg/nav_bg.png) repeat-x;
    			height: 103px;
    			font-size: 14px;
    			font-weight: bold;
    		}
    		
    		#menu ul {
    			margin-left: -1px;
    			list-style-type: none;
    			position: relative;
    			top: 0;
    			left: 0;
    			color: #FFFFFF;
    			height: 50px; /* Height of the menu */
    		}
    		
    		#menu ul li {
    			float: left;
    		}
    		
    		#menu ul li a {
    			text-decoration: none;
    			display: block;
    			height: 35px; /* Height of the menu */
    			padding: 0 12px;
    			padding-top: 15px;
    		}
    		
    		#menu ul li span.navborder {
    			background: url(/images/bg/navitem_border_bg.png) no-repeat;
    			position: absolute;
    			top: 0;
    			width: 1px;
    			height: 100%;
    		}
    		
    		#menu ul li a:hover {
    			display: block;
    			background: url(/images/bg/navitem_arrow_bg.png) no-repeat bottom center;
    		}
    		
    		#menu ul li:hover {
    			background: url(/images/bg/navitem_hover_bg.png) repeat-x;
    		}
    		
    		#menu ul li ul {
    			display: none;
    			position: absolute;
    			left: 0;
    			top: 50px;
    			height: 50px;
    			color: #142e45;
    			background:#0f0; /* diagnostic background color */
    			width:100%;
    		}
    		
    		#menu li:hover ul {
    			display: block;
    			z-index: 100;
    		}
    		
    		#menu li:hover ul li {
    			background: none;
    		}
    		
    		#menu li:hover ul li a:hover{
    			background: none;
    		}
    
    	</style>
    	
    </head>
    
    <body>
    	
    	<div id='menu'>
    		<ul>
    			<li><a href="/dashboard.html" title="Home"><img src="/images/buttons/home.png" alt="Home" /> Home</a> <span class="navborder">&nbsp;</span></li>
    			<li><a href="/customers/index.html" title="Customers"><img src="/images/buttons/customers.png" alt="Customers" /> Customers</a> <span class="navborder">&nbsp;</span>
    				<ul>		
    					<li><a href="/customers/add_customer.html" title="Add Customer">Add Customer</a></li>
    					<li><a href="/customers/view_customers.html" title="View Customers">View Customers</a></li>
    					<li><a href="/customers/add_site.html" title="Add Site">Add Site</a></li>
    					<li><a href="/customers/view_sites.html" title="View Sites">View Sites</a></li>
    					<li><a href="/customers/add_contact.html" title="Add Contact">Add Contact</a></li>
    					<li><a href="/customers/view_contacts.html" title="View Contacts">View Contacts</a></li>
    				</ul>
    			</li>
    			<li><a href="/suppliers/index.html" title="Suppliers"><img src="/images/buttons/suppliers.png" alt="Suppliers" /> Suppliers</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/suppliers/add_supplier.html" title="Add Supplier">Add Supplier</a></li>
    					<li><a href="/suppliers/view_suppliers.html" title="View Suppliers">View Suppliers</a></li>
    					<li><a href="/suppliers/add_rep.html" title="Add Rep">Add Rep</a></li>
    					<li><a href="/suppliers/view_reps.html" title="View Reps">View Reps</a></li>
    				</ul>
    			</li>
    			<li><a href="/projects/index.html" title="Projects"><img src="/images/buttons/projects.png" alt="Projects" /> Projects</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/projects/add_project.html" title="Add Project">Add Project</a></li>
    					<li><a href="/projects/view_projects.html" title="View Projects">View Projects</a></li>
    					<li><a href="/projects/view_costs.html" title="Review Project Costs">Review Project Costs</a></li>
    					<li><a href="/projects/view_engineers.html" title="Project Distribution">Project Distribution</a></li>
    					<li><a href="/projects/add_document.html" title="Add Document">Add Document</a></li>
    					<li><a href="/projects/view_documents.html" title="View Documents">View Documents</a></li>
    				</ul>
    			</li>
    			<li><a href="/procurement/index.html" title="Procurement"><img src="/images/buttons/procurement.png" alt="Procurement" /> Procurement</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/procurement/add_order.html" title="Add Order">Add Order</a></li>
    					<li><a href="/procurement/view_orders.html" title="View Orders">View Orders</a></li>
    					<li><a href="/procurement/approve_orders.html" title="Approve Orders">Approve Orders</a></li>
    				</ul>
    			</li>
    			<li><a href="/finance/index.html" title="Finance"><img src="/images/buttons/finance.png" alt="Finance" /> Finance</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/finance/add_invoice.html" title="Add Invoice">Add Invoice</a></li>
    					<li><a href="/finance/view_invoices.html" title="View Invoices">View Invoices</a></li>
    					<li><a href="/finance/add_billed_invoice.html" title="Add Billed Invoice">Add Billed Invoice</a></li>
    					<li><a href="/finance/view_billed_invoices.html" title="View Billed Invoices">View Billed Invoices</a></li>
    				</ul>
    			</li>
    			<li><a href="/admin/index.html" title="Admin"><img src="/images/buttons/admin.png" alt="Admin" /> Admin</a> <span class="navborder">&nbsp;</span>
    				<ul>
    					<li><a href="/admin/add_user.html" title="Add User">Add User</a></li>
    					<li><a href="/admin/view_users.html" title="View Users">View Users</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    	
    </body>
    </html>
    Of note:

    1. Added width:100% to the submenu uls in order to get them to stretch full width. Centering them about their parent li would most likely cause the submenu items to wrap to the next line on the rightmost lis, and that would not be good. So from a functionality standpoint, if you're against just having the submenus drop straight down, justifying them left is probably your best bet.
    2. Added a quick and dirty reset to the top of your CSS in order to get rid of all the padding:0 and margin:0 you had on many declarations.
    3. I changed the functional mechanism of your submenus from visibility to display. Visibility has some cross-browser compatibility issues.

    Hope that helps!
    matt | design | blog

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Matt,

    Smashing!

    I know what you're referring to when it comes to the overflow. I think if I want this functionality I'll need to have a JS function to do this that will ensure that the overflow doesn't occur, but at least the css works so if JS were to be disabledf the menu still works.

    I can't believe I didn't think to put the width: 100% in myself! Funny how we sometimes overlook the simple things.

    I'm curious about the compatibility issues you refer to; I've not come across these issues, however I am currently only testing in FF and IE7, as I can ensure that my users only have these browsers. I will be looking to ensure that they work on all browsers for future proofing the system, so thanks for the heads-up.

    Thanks for the help mate, really appreciate it.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    No problem.

    I'm surprised your site works in IE7; I thought IE restricted the use of :hover to link tags, and you have it on your list elements. Hmm. In any case, your site is broken in IE6, but this may not matter to you.

    I've been trying to find some documentation on the cross-browser issues with visibility, and I'm not turning up anything. I seem to remember having some problems with it from that standpoint a while back, though. I think it might have had to do with the functionality of the JavaScript hack you have to use to get :hover to work on non-link elements in IE6. In your case, though, it looks like you could go either way.
    matt | design | blog

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    I'm testing it in IE7 currently and it functions correctly (only a small issue with the css and a logo image that's 'too-big').

    Doesn't surprise me much that it's broken in IE6 - most things are. Since I can ensure that the users are IE7 or above, it's safe to say that I won't have to rebuild the css with many, many hacks.

    Still, thanks again for the help.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by msuffern View Post
    No problem.

    I'm surprised your site works in IE7; I thought IE restricted the use of :hover to link tags, and you have it on your list elements. Hmm. In any case, your site is broken in IE6, but this may not matter to you.

    I've been trying to find some documentation on the cross-browser issues with visibility, and I'm not turning up anything. I seem to remember having some problems with it from that standpoint a while back, though. I think it might have had to do with the functionality of the JavaScript hack you have to use to get :hover to work on non-link elements in IE6. In your case, though, it looks like you could go either way.
    That's what I always heard, but just FYI with a valid doctype (in my case I've only ever tried XHTML strict) I have had success in making IE7 use the hover attribute on the <li> items as well -- even on pages with validation errors. I have no idea if this works for IE6 and lower but for IE7 I can attest to that working...for whatever that's worth.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello everyone,

    I'm trying to make something similar from this code inspiration on two row menus with the only difference to center both menus.... I figured using padding-left: 13.75em; on the first row menu ruins a bit everything... here the test code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>	
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
    	<title>Menu Tester</title>		
    	<style type="text/css">	
    		* {
    			border:0;			
    			padding:0;			
    			margin:0;					
    		}
    		body 
    		{
    			font-size: 0.75em;
    			color: #333;
    		}
    		#container
    		{
    			width: 75em;
    			margin-top: 1.0em;
    			margin-bottom: 1.0em;
    			margin-left: auto;
    			margin-right: auto;
    			padding: 1.0em 1.0em 1.0em 1.0em;
    			text-align: center;
    		}
    		#inside
    		{
    			margin: 0;
    			padding: 0.5em 0 0.5em 0;
    			background: #92b6ff; 
    			text-align: center; 	
    			border: 0.2em dotted green;
    		}
    		#navcontainer
    		{
    			background: #92b6ff;
    			margin-left: auto;
    			margin-right: auto;
    			margin-top: auto;
    			margin-bottom: 0.5em;
    			border: 0.2em dotted black;
    			height: 3.75em;
    			color: #333333;
    			width: 100%;
    		}
    		#menu
    		{
    			font: bold 1.083em verdana, arial, sans-serif;
    			margin-left: auto;
    			margin-right: auto;
    			position: relative;
    			width: 100%;
    			height: 3.75em;
    			border: 0.2em dotted darkblue;
    		}
    		#menu ul
    		{
    			/*margin-left: -0.083em;*/
    			margin: auto auto;
    			padding-left: auto;
    			padding-right: auto;
    			padding-left: 13.75em;
    			list-style-type: none;
    			/*position: relative;*/
    			border: 0.2em dotted magenta;
    			height: 1.75em;
    		}
    		#menu ul li
    		{
    			float: left;
    			padding-left: 0.167em;
    			border: 0.2em dotted brown;
    		}
    		#menu ul li a 
    		{			
    			text-decoration: none;
    			padding-left: 0.167em;
    			padding-right: 0.167em;
    			display: block;
    			height: 1.5em;
    			border: 0.2em dotted orange;
    		}
    		#menu ul li a:hover
    		{
    			display: block;
    			color: #ffa10d; 
    			background: #fff; 
    			border-bottom: 0.167em solid #025f8b;
    		}
    		#menu ul li ul 
    		{			
    			display: none;			
    			position: absolute;
    			/*margin: auto auto;*/
    			/*left: 0em;*/
    			/*top: 1.75em;*/			
    			height: 1.75em;			
    			color: #333333;			
    			background: #92b6ff; /* diagnostic background color */			
    			border: 0.1em dotted red;
    			width: 100%;
    		}				
    		#menu li:hover ul 
    		{			
    			display: block;			
    			z-index: 100;		
    		}				
    		#menu li:hover ul li 
    		{			
    			background: none;		
    		}				
    		#menu li:hover ul li a:hover
    		{			
    			color: #ffa10d; 
    			background: #fff; 
    		}	
    	</style>	
    </head>
    <body>
      <div id="container">		
    	<div id="inside"> <!--BEGIN inside DIV -->
    		<div id="navcontainer">
    			<div id="menu">
    				<ul>
    					<li><a href="" id="current">Home</a></li>
    					<li><a href="">Conoscere</a>
    						<ul>
    							<li><a href="">Cittadina</a></li>
    							<li><a href="">Statistiche</a></li>
    							<li><a href="">Sport</a></li>
    							<li><a href="">Associazioni</a></li>
    							<li><a href="">Informazioni&nbsp;Utili</a></li>
    							<li><a href="">Locali&nbsp;Pubblici</a></li>
    							<li><a href="">Galleria</a></li>
    						</ul>
    					</li>
    					<li><a href="">Servizi</a></li>
    					<li><a href="">Documenti</a>
    						<ul>
    							<li><a href="">Delibere&nbsp;di&nbsp;Consiglio</a></li>
    							<li><a href="">Delibere&nbsp;di&nbsp;Giunta</a></li>
    							<li><a href="">Regolamenti</a></li>
    							<li><a href="">Altri&nbsp;documenti</a></li>
    						</ul>
    					</li>
    					<li><a href="">Prg&nbsp;Online</a></li>
    					<li><a href="">Links</a></li>
    					<li><a href="">Contatti</a></li>
    				</ul>
    			<div>
    		</div>
    	</div>
      </div>
    </body>
    </html>
    if you have a suggest, it's appreciated... :-)

    Thanks a lot
    Ciao,
    Luigi


  •  

    Posting Permissions

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