473,585 Members | 2,569 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

best navigation tabs

76 New Member

I am developing a website. A 2-tier tabbed navigation system is the desgin we are going with. Just for clarification purposes, I will developing the site in ASP.NET.

What do you think the best way to make the 2-tier tabbed navigation system will be? I currently have a prototype developed using CSS/HTML and a touch of javascript. The problem is that this presents horrible formatting issues when working across different web browsers. Disgusting really.

I am honestly considering taking a step back into history and using an image-map to artificially represent tab navigation.

I am very curious as to what the community feels about this. The image-map method will add to page loading times, but isn't this worth it to ensure all my users can view the page properly?

Or am I overlooking a modern method that allows me to accomplish this goal?

Thanks for any and all input/feedback/opinions/recommendations .
Aug 14 '07 #1
8 3074
7,435 Recognized Expert Expert
There are many sites devoted to CSS navigation tabs that don't use javascript and work across all browsers. There is no such thing as cross browser compatibility issues. There are only IE issues. Well, sort of.

Any site that is developed using the W3C standard should have little problem with getting it to work with all browsers, IE always being the exception being old, buggy and non-standards compliant.

I have little time right now to look at others markup but a link would be helpful to give a glance at. Otherwise, you should Google for 'CSS navigation tabs' and CSSPlay and Listamatic (among many others) for some ideas.
Aug 14 '07 #2
76 New Member

Thanks for your input. The two references you have provided are very nice. I will supply my code, but I believe that no matter what ccs code I provide I will run into the same problem.

The problem:

Once I create the tabs and add some content to the page, the page loads are ugly. CSS requires that the tabs be created from unordered lists (some people would consider this an advantage, because the list provides working links to a user even if they do not have css enabled). Unfortunately, my co-workers disagree here, primarily because in between page loads the unordered list briefly appears. The brief appearance gives the site a very amature feel to it. I have a very primative example of my early work on this site that demonstrates my point (http://www.dajunkyard. com/USGtestserver/humanResources/home.html). First off, these tabs only look good in IE7. But regardless how you view them, when you click a new tab you can see the list briefly appear.

Again, I can imagine the only way to avoid this would be to create non-css tabs. Do you agree?

Thanks again,
Aug 15 '07 #3
7,435 Recognized Expert Expert
Once I create the tabs and add some content to the page, the page loads are ugly.
I don't know what you mean by this except right now your link does not display correctly, if that's what you mean.
CSS requires that the tabs be created from unordered lists
CSS does not require that but I guess you mean the general method is done this way.
(some people would consider this an advantage, because the list provides working links to a user even if they do not have css enabled).
Count me in though who doesn't have CSS enabled except Lynx users? Count me as a Lynx user, too :)
...in between page loads the unordered list briefly appears.
I know some have had this problem but I don't recall the issue. Never had it myself but I think it was a js "onload" problem? Just don't remember.
First off, these tabs only look good in IE7.
Now, now. They look bad in Firefox.
...when you click a new tab you can see the list briefly appear.
I don't see that in Firefox. Validate your html and css for a few errors in both, including a missing end tag.
I can imagine the only way to avoid this would be to create non-css tabs. Do you agree?
No and, if you use js, then you run into the more likely problem someone has their js turned off. Not that I think there is anything wrong with using js.

Look into those other sites. Be a little wary of CSSPlay because Stu's markup sometimes gets rather convoluted. Listamatic is very good. I'll try to look up my markup, if it helps, but I'm ramping up for a huge project next week and feel bad I have had to ignore/drop the ball for a few other posters lately.

Keep posting your questions.
Aug 15 '07 #4
76 New Member
Hey Doc,

Well I took your advice, and it was very much appreciated. I put together a simple tabbed menu. It looks great in my IE7 and Firefox 2 browsers, but it looks and acts like crap in IE6 :(. My co-workers all have IE6 installed on their systems, of course we will update them one day -- but this is still a shame.

http://www.dajunkyard. com/USGtestserver/hr/template.html

The above link is what I have put together.

CSS tabs are the bane of my existence.

For quick reference the source code is as follows:

Expand|Select|Wrap|Line Numbers
  1. <!--
  4. #globalnav {
  5.     position:relative;
  6.     float:left;
  7.     width:100%;
  8.     padding:0 0 1.75em 1em;
  9.     margin:0;
  10.     list-style:none;
  11.     line-height:1em;
  12.     font-family:Arial, Helvetica, sans-serif;
  13.     font-size:12px;
  14. }
  16. #globalnav LI {
  17.     float:left;
  18.     margin:0;
  19.     padding:0;
  20. }
  22. #globalnav A {
  23.     display:block;
  24.     color:#465D7E;
  25.     text-decoration:none;
  26.     text-align:center;
  27.     font-weight:normal;
  28.     background-image:url(tab_light.gif);
  29.     background-repeat:no-repeat;
  30.     background-position:center;
  31.     margin:0;
  32.     padding:2em 3em 1em 3em;
  33.     width:100px;
  34.     height:20px;
  35. }
  37. #globalnav A:hover,
  38. #globalnav A:active,
  39. #globalnav A.here:link,
  40. #globalnav A.here:visited {
  41.     background-image:url(tab_dark.gif);
  42.     font-weight:bold;
  43. }
  45. #globalnav A.here:link,
  46. #globalnav A.here:visited {
  47.     position:relative;
  48. }
  50. /*subnav*/
  52. #globalnav A.subhere:link,
  53. #globalnav A.subhere:visited {
  54.     background:#F9EE40;
  55.     font-weight:bold;
  56.     text-decoration:underline;
  57. }
  59. #globalnav A.subhere:link,
  60. #globalnav A.subhere:visited {
  61.     position:relative;
  62.     z-index:102;
  63. }
  65. #globalnav UL {
  66.     position:absolute;
  67.     left:0;
  68.     top:3.5em;
  69.     float:left;
  70.     background:#F9EE40;
  71.     width:100%;
  72.     margin:0;
  73.     padding:0.25em 0.25em 0.25em 1em;
  74.     list-style:none;
  75.     border-top:10px solid #F9EE40;
  76.     border-bottom:10px solid #F9EE40;
  78. }
  80. #globalnav UL LI {
  81.     float:left;
  82.     display:block;
  83.     margin-top:1px;
  84. }
  86. #globalnav UL A {
  87.     background:#F9EE40;
  88.     color:#465D7E;
  89.     font-weight:normal;
  90.     display:inline;
  91.     margin:0;
  92.     padding:0 1em;
  93.     border:0;
  94. }
  96. #globalnav UL A:hover {
  97.     background:#F9EE40;
  98.     text-decoration:underline;
  99.     font-weight:normal;
  100. }
  101. #globalnav UL A:active {
  102.     background:#F9EE40;
  103.     font-weight:normal;
  104. }
  105. #globalnav UL A.here:link {
  106.     background:#F9EE40;
  107.     font-weight:normal;
  108. }
  109. #globalnav UL A.here:visited {
  110. }
  112. -->
  113. </style>
  115. </head>
  117. <body>
  118. <ul id="globalnav">
  119.   <li><a href="#">EMPLOYEE</a></li>
  120.   <li><a href="#">ABOUT USG</a></li>
  121.   <li><a href="#" class="here">DEPARTMENTS</a>
  122.     <ul>
  123.       <li><a href="#">Home</a></li>
  124.       <li><a href="#">Sales</a></li>
  125.       <li><a href="#">Support</a></li>
  126.       <li><a href="#">IT</a></li>
  127.       <li><a href="#" class="subhere">Marketing</a></li>
  128.       <li><a href="#">Accounting</a></li>
  129.       <li><a href="#">HR</a></li>
  130.     </ul>
  131.   </li>
  132.   <li><a href="#">LOCATIONS</a></li>
  133.   <li><a href="#">CONTACT</a></li>
  134.   <li><a href="#">CAREERS</a></li>
  135. </ul>
  136. </body>
  137. </html>
Aug 16 '07 #5
7,435 Recognized Expert Expert
I'm wondering if IE is inheriting higher level styles to that one. Haven't looked yet.

You should put everything in lower case. html doesn't care but xhtml and css does. I'm not saying it will fix anything but you need to get used to it.
Aug 16 '07 #6
76 New Member
I am not rushing you at all, I just thought I'd post some more input based on your feedback:

1. the CAPS are just the text displayed on the tabs. This is due to a request from my graphics desginer (the age old designer vs developer conflict :D). You really think I should stress changing the html text to lowercase? Or are you referencing some code that I overlooked?

2. If you were to view my above code (quickly accessed by the link I provided above) in IE6 you would experience the following problems:

A. When the top tabs are rolled over they "blink" or disappear before displaying their rollover state.

B. The background of the secondary navigation fails to stretch across the screen. In fact, it stops short and is not even as wide as the primary navigation tabs.

These are the only two problems. I am hoping that there is an alternative to solving problem A--as opposed to updating IE :P. Problem B I am sure I can resolve on my own.

Thanks again Doc.
Aug 16 '07 #7
7,435 Recognized Expert Expert
I'm the one that's stressing. Prepping for a huge project next week. Thought I wouldn't have to do anything till next week but...here I am stressing.

I saw B but didn't look for A.

The 'blinking' is caused by changing the font to bold while the previous state is not bold. I don't recall IEs bug on this.

I wouldn't stress changing the current stuff to lower case (attributes and elements and properties) but you should make it the norm in your shop.
Aug 16 '07 #8
76 New Member
All sounds great Doc. Thanks again for all your help on this. Good luck on your project.
Aug 17 '07 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Dan V. | last post by:
What do you recommend to use for saving time and get great results for making image and css buttons on a site? Also top tabs like for navigation. Separate question maybe is what is the best tool for menus? Expandable...etc. thanks.
by: Bazza Formez | last post by:
Hi, This is very much a newbie type question ... I have downloaded the code for the TimeTracker app which is one of the Starter Kits at www.asp.net & trying to figure out exactly how it works so that I can build something similar myself. In my new app I would like to employ the same method to navigate between pages that is used when a...
by: Jack Russell | last post by:
I want to add navigation buttons to a tabcontrol (somewhat like excel) How do I get the "tabs" to offset to the right so that I can draw the buttons on the left? TIA -- Remove norubbish to reply direct Jack Russell
by: pixelwiz | last post by:
Hi, I am a designer working with an external .NET programmer. We are trying to figure out the best way to implement at tab style horizontal menu similar to http://www.telerik.com/r.a.d.controls/Menu/Examples/Design/Robotic/DefaultCS.aspx and http://www.sportsline.com/ We are not sure what part would have to be done in CSS, what part...
by: robert.waters | last post by:
Hello, I have a main form that is maximized when my application loads; this main form contains links to all other forms. I've had to specify the Popup property of these other forms, so that they are not maximized when they load. Unfortunately, this seems to have had the consequence of removing them from the Windows taskbar, which makes...
by: pbd22 | last post by:
Hi. I am building a bit of a "learn-as-you-go" web site. I have tabs that change based on what page the user is on. The problem is, I have been using a javascript doOnLoad function to recognize the page the user is on and, then, provide the correct tabs. This depends on a normal URL, such as http://www.mysite.com/index.html. But, as I...
by: daJunkCollector | last post by:
The following code creates some very nice tabs. However, the I click the tab it displays specified text below the button. I want the tab to execute a page change, so I can use the tabs for my page's primary navigation. Is there a simple change I can make so that click the tab causes the current URL to change? Thanks <script...
by: daJunkCollector | last post by:
Hey all, I am using .NET 2.0 to create a website. My boss/designer desires a tabbed navigation system. I am placing the tabs on a master page and I will load the other pages based on the tab that is clicked. So far, so good. The problem comes down to how do I make my tabs. The obvious answer is CSS or a third-party navigation builder...
by: thephatp | last post by:
I cannot figure this out for the life of me. I want to monitor where a user navigates to in IE, and I've found code that will do this beautifully for the first tab in an IE7 browser. (In IE6, the code was awesome, worked perfectly). However, I cannot seem to get it to work in any tabs that are created in the browser. This is unacceptable for...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.