wendilogic Posted December 27, 2012 Share Posted December 27, 2012 hello all! i have a navigation structure that needs to be exactly 380 pixels wide, and contains 3 top level menu items. The left and right items need to be flush against their respective sides of the table. The center item needs to be equally spaced between the left and right items, not necessarily in the center of the 380 pixels. I've used a table as outlined below, but the center item leans towards the left, so the spacing is not equal on both sides. Currently, each table cell holds its own css ul dropdown menu. The content of these menus is managed by a CMS, so the text can change at any given time, therefore cannot depend on any specific per-item width. Can anyone offer a different way to accomodate these requirements? i've attached an image of this meny structure. my html currently looks something like this: <html><body><table width="380px"><tr><td align="left">About Us</td><td align="center">Members Only</td><td align="right">Events & Education</td></tr></table></body></html> Thanks in advance! Link to comment Share on other sites More sharing options...
Labtec Posted December 27, 2012 Share Posted December 27, 2012 Judging by what you have said you could do this: <?php?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.8.3.js"></script><style type="text/css">td{ border: 1px solid black;}.center{ text-align: center;}.right{ text-align: right;}</style></head><body><table width="380px"><tr><td>About Us</td><td class="center">Members Only</td><td class="right">Events & Education</td></tr></table></body></html> Does this help? If not let me know! Regards, Lab. Link to comment Share on other sites More sharing options...
wendilogic Posted December 27, 2012 Author Share Posted December 27, 2012 Thank you so much for your reply. Unfortunately, your solution produces the exact same result as mine. See here the two intended solutions: http://logicconsulting.net/Pages/nav.html You can see the center item aligns more closely to the left item, and the spacing between the three is not equal. Link to comment Share on other sites More sharing options...
jardrake Posted December 28, 2012 Share Posted December 28, 2012 wendilogic What you are asking is not impossible, but a very messy solution would be required. The best option is how you currently have it. Since each column is different from each other, there is no good way for the middle column to know exactly how to space itself equally from the other two columns that are suppose to be flush with different ends. Link to comment Share on other sites More sharing options...
davej Posted December 28, 2012 Share Posted December 28, 2012 (edited) Sometimes you can cheat very simply with the use of non-blocking space characters. <td align="left">About Us nbsp nbsp nbsp nbsp </td> http://www.w3schools.com/html/html_entities.asp Edited December 28, 2012 by davej 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