How do I set up these nav tabs.

[dvdljns]

I am trying to set up some nav tabs acroos the top of a webpage but the only page I can find is in tables. Which does not help. here's a link to the like I want. I am hoping someone can show me a page like them in div's.
Or will explain how to do it.

http://www.heaphydesigns.com/index.php

 

[BabyJeffy]

Some nice examples here:

http://www.simplebits.com/bits/tab_rollovers.html

http://www.simplebits.com/bits/css_tabs.html

http://www.simplebits.com/bits/minitab_shapes.html

And a different way of doing 2 level horizontal menus:

http://www.duoh.com/csstutorials/2levelmenu/index.html

Hope they get you started.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[dvdljns]

I bookmarked them they will be usefull but I do not think they will work in this case. check out the link and look at the navbar below the logo. Heres what the auther said about them.

Hi,
You like the navbar? The images one at the top of the screen? That
took quite a while! Basically, for each image link, there are 5
seperate images. The mouse over image, the angle to the left and the
angle to the right, and the selected angle left and right.
I've then used mousover events and assigned each link an ID so that the
java script function also changes images to the left and right. This
would have been way simpler had I not had angles in the images!

The navbar is presented in a table with 0 cellpadding and cellspacing.
No CSS was used to display it.

Hope that helps!

It would if I was setting it up in tables but I have never tried anything that hard in divs before. I have been looking for something similar in divs but I do not think there is. Sliding doors is the closest I can find.But it is placing the images that is holding me up I have always used lists before not navbars. Untill I can find an example of setting up this navbar the layout is over my head.
Thank you for the links.

 

[BillyRayPreachersSon]

How many images and what coding you require depending on how you wanted the very left and right ends to look.

If you wanted to keep it really simple, you could get away with 1 image (the "slash"), placed at the left of every anchor (using CSS with background-image and a text-indent or margin).

If you want it to work in IE 5.0/Win, you'll have to use some float trickery (IE 5.0/Win ignores margin/padding/text-indent on inline elements unless they are floated / absolutely positioned).

However - whatever you go with, my one piece of advice: do NOT do as the original site does, and make the hover colour virtually illegible against the background colour of the "tabs". I find it hard to believe that any "web design" company could miss something so obvious, given how fussy designers normally are about these things.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[dvdljns]

I am thinking two images.maybe when I learn more I will go back and try for all five.

 

[Vragabond]

Why would you use a terrible technique (that prides itself in the fact that it ignores the most useful styling directives of using css) if there are better ones around. A list apart's Sliding doors sure is one that would provide the same thing with much better code.

 

[dvdljns]

Why would you use a terrible technique (that prides itself in the fact that it ignores the most useful styling directives of using css)

He used tables that's why he did not use css. I plan on useing divs which means I will have to find a way to do it with css and get the same effect. With sliding doors I do not think I can use the slanted images. It is not a terrible technique. It actually is a pretty creative way to do it. look at his website. I beleive the end result speaks for itself. It is a good looking site.

I will have time to setup my inline lists tomorrow and then I can play around with it and see what I can do. I want that navbar though. I cannot find anything else like it out there.
Maybe I do not understand enough about sliding doors and it will turn out they do work.

 

[dvdljns]

Why would you use a terrible technique (that prides itself in the fact that it ignores the most useful styling directives of using css)

He used tables that's why he did not use css. I plan on useing divs which means I will have to find a way to do it with css and get the same effect. With sliding doors I do not think I can use the slanted images. It is not a terrible technique. It actually is a pretty creative way to do it. look at his website. I beleive the end result speaks for itself. It is a good looking site.

I will have time to setup my inline lists tomorrow and then I can play around with it and see what I can do. I want that navbar though. I cannot find anything else like it out there.
Maybe I do not understand enough about sliding doors and it will turn out they do work.