 |
|
|
|||||||
Before you post, read our:  |
|
|
Thread Tools | Rate Thread |
|
|
|
|||||||
|
|
|
Thread Tools | Rate Thread |
03-12-2009, 01:38 PM
|
PM User | #1 |
|
Regular Coder  Join Date: Jun 2002
Location: Edinburgh, UK
Posts: 391
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"> </span></li> <li><a href="/customers/index.html" title="Customers"><img src="/images/buttons/customers.png" alt="Customers" /> Customers</a> <span class="navborder"> </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"> </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"> </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"> </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"> </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"> </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> 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;
}
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,
__________________
Rich "An expert is a person who has made all the mistakes that can be made in a very narrow field." Last edited by Badman3k; 03-12-2009 at 02:48 PM.. |
|
|
|
03-12-2009, 02:36 PM
|
PM User | #2 |
|
Regular Coder 
Join Date: Jan 2008
Location: Clemmons, NC
Posts: 910
Thanks: 9
Thanked 187 Times in 184 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"> 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! |
|
|
|
|
03-12-2009, 02:47 PM
|
PM User | #3 |
|
Regular Coder Join Date: Jun 2002
Location: Edinburgh, UK
Posts: 391
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." |
|
|
|
|
03-12-2009, 03:16 PM
|
PM User | #4 |
|
Regular Coder
Join Date: Jan 2008
Location: Clemmons, NC
Posts: 910
Thanks: 9
Thanked 187 Times in 184 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.
|
|
|
|
|
03-12-2009, 03:26 PM
|
PM User | #5 |
|
Regular Coder Join Date: Jun 2002
Location: Edinburgh, UK
Posts: 391
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." |
|
|
|
|
03-12-2009, 03:30 PM
|
PM User | #6 | |
|
Senior Coder  
Join Date: Oct 2008
Location: Everywhere and nowhere...but mostly I'm in Ohio.
Posts: 1,000
Thanks: 9
Thanked 180 Times in 179 Posts
|
Quote:
__________________
See Mediocrity in its Infancy || Seek and you shall find... basically: free web tutorials | free hosting (1) (2)| view your page cross-browser/cross-platform It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
|
|
|
|
|
|
08-19-2009, 08:07 AM
|
PM User | #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 Utili</a></li>
<li><a href="">Locali 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 di Consiglio</a></li>
<li><a href="">Delibere di Giunta</a></li>
<li><a href="">Regolamenti</a></li>
<li><a href="">Altri documenti</a></li>
</ul>
</li>
<li><a href="">Prg Online</a></li>
<li><a href="">Links</a></li>
<li><a href="">Contatti</a></li>
</ul>
<div>
</div>
</div>
</div>
</body>
</html>
Thanks a lot Ciao, Luigi |
|
|
|
|
| Bookmarks |
| Thread Tools | |
| Rate This Thread | |
|
|
