CSS - Test Your CSS Skills Number 27

[Wall_e]

OK, thanks! I must test this as soon I fund some good cross browsing css menu.

Maybe i misunderstod that example, maybe "HOME" that have red color is the active one

[YuriKolovsky]

@Wall_e
Mine and Stu's cross browser CSS menus are the only pure CSS cross browser menus available, the other menus rely on javascript for older browser support.

[Wall_e]

I have playing around now with that menu on thinkhtml as a beginning but can’t find where to change width for top/column and for drop-down. It seems that column have same width value as drop-down and vice versa.

space between title is very bigg and want less space between them and have other value for width on dropdown.

I can’t change value for title-columns and dropdowns with different value?

[YuriKolovsky]

you can change the dropdown links width to be larger than the title width
just make them larger in width, then remove the extra width with negative margins, so the width is the same but it looks much wider.

[Wall_e]

Do you mean in css or in html? I try change every value for width in css but nothing happens with columns width or dropdown links with. Where exactly do I change? If you can set column width to 250px and dropdown link to say 350px would be nice. Just to make it easy to find it later and where i nead change.

.nav a {
    width:9em; /*same as width*/
}
.nav ul li {
/*force ie8 to float-drop*/
    max-width:9em; /*same as width*/
}
/*set the sublink left shift width here (same as width)*/
.nav ul ul {
/*move the sublinks to the side, so they dont overlap*/
    left:9em; /*same as width*/
}
.nav li.reversed ul { /*reverse the direction of sublinks for the last dropdown*/
    left:auto;
    right:9em; /*same as width*/
}
/*add the negative value of "width - 1px" here (because css can't do math)*/
/*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
.nav a {
/*makes the links very thin, so that the sublinks can hide inside the main link*/
/*!IMPORTANT: if you want a width of 9em, then you will have to change the value below to 8.937em (because: 9 - 0.063 = 8.973)*/
    margin-right:-8.937em; /*make this width - 1px*//*or width - 0.063em (0.063 = 1px)*/
}

/*<customized width and positioning>*/
/*ONE*/
.nav .link.one {
    margin-right:20px;
}
.nav .link.one, 
.nav .one a {
    width:11em;
}
.nav .one ul li {
    max-width:11em;
}
.nav .one ul ul {
    left:11em;
}
.nav .one a {
    margin-right:-10.937em; /*11 - 0.063 = 10.937em (0.063 = 1px)*/
}
/*TWO*/
.nav .link.two {
    margin-right:20px;
}
.nav .link.two, 
.nav .two a {
    width:3em;
}
.nav .two ul li {
    max-width:3em;
}
.nav .two ul ul {
    left:3em;
}
.nav .two a {
    margin-right:-2.937em; /*3 - 0.063 = 2.937em (0.063 = 1px)*/
}
/*THREE*/
.nav .link.three {
    margin-right:2px;
}
.nav .link.three, 
.nav .three a {
    width:9em;
}
.nav .three ul li {
    max-width:9em;
}
.nav li.reversed.three ul { /*this is because its reversed*/
    right:9em; /*same as width*/
}
.nav .three a {
    margin-right:-8.937em;
}
/*</customized width and positioning>*/




/*HEIGHT*/
.nav {
    height:1.563em; /*you could remove this and clear the float differently, but to me this makes the most sense*/
}
.nav a {
    padding:.2em 0; /*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
}
.nav a.main {
    height:1.563em; /*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
    line-height:1.563em; /*not really necessary, but in this specific case it vertically centers the main link text*/
    overflow:hidden; /*making it more bulletproof*/
    padding:0; /*remove the padding that was applied above*/
}
.nav ul {
    padding-top:1.563em; /*persistent background trick*/
    margin-top:-1.563em; /*persistent background trick*/
}
.nav ul ul {
    position:relative; /*so that it can be moved top/left*/
    top:-1.563em; /*this is the sole reason why the main links must have a fixed height*/
}


/*Dropper Dropdown*/
/*supports up to 4 sub-levels in IE5-7, more can be added*/
/*modern browsers already support any amount of sublevels*/
/*made by Timo Huovinen*/

.nav li {
    float:left; /*fixes several IE related bugs, and allows for clearing*/
}
.nav ul {
    float:left; /*necessary for float drop*/
}
.nav ul li {
    clear:left; /*must clear the floated list item inside sublist*/
}
.nav a {
    position:relative; /*needs to have a position, to be above the rest*/
    display:block;
}
.nav a.main {
    float:left; /*necessary for float drop*/
    margin-top:10000px; /*bring the links back into view*/
}
.nav .link,
.nav .sub {
    margin-top:-10000px; /*hide the links and their containers, opera has low upper limits*/
}
.nav ul {
    margin-bottom:-5000px; /*avoid any interaction between the sub's, can be any large size*/
}
/*the main trick, removes the negative right-margin and causes float drop*/
.nav a:hover,
.nav a:focus,
.nav a:active{
    margin-right:0;
}

/*OPERA fix*/
.nav ul:hover {
    clear:left; /*fix for opera sublinks flickering on :hover*/
}
/*background no longer needed*/
.nav ul ul {
    background:transparent;
}


/*IE5-6 + 7 bug fixes*/
.nav .sub {
    width:100%;
}
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.
it seems that this indexes the links together as one? does not happen for everyone, but im leaving it just in case.*/
a, a:hover, a:active, a:focus {}
</style>

[YuriKolovsky]

I will help out tomorrow, can't do it today as its much too late for me to work.

[Wall_e]

No problems.

It is too late here also. Night time and I should go to bed and sleep

One questions, are you sure this menu work with different browser? I tested first some original code that was linked to from thinkhtml "Float-Drop menu", just copy and pasted that code into html page but didn’t work in IE8 with Windows 7. Everything just jumped around. That customization code from thinkhtml you linked to worked better on IE8.

[RyanReese]

Yes this definately works in different browsers
IE6/7/8
FF2+
Opera9+
Safari 2+
Chrome 2+

Probably just about every browser (the above is just what I have)

[YuriKolovsky]

@Wall e
sorry that i couldn't help on friday, but was too busy that day.
here is a sample of how the dropdown can be customized to your sizes:
multilevel.subsized.html

[Stomme poes]

Timo, is that on Dave Morton's server?

[YuriKolovsky]

Off Topic:

Timo, is that on Dave Morton's server?

Yep

[Wall_e]

Thanks.

Width works now I think..but had some trouble with sublevel after some change. I tested change column width from 250px to 100px , and for dropdown from 350px to 150px (some value with -1px less).

But, sublevel stop working after this only change. what’s wrong or went wrong?

[YuriKolovsky]

change all the values of 350 to 150
and all the values of 250 to 100
and the (some values - 1px)

use Ctrl+F to find the 350 and the 250 values, because some are also present lower down.

[Wall_e]

What are you think of this http://www.grc.com/menu2/invitro.htm
Anyone have experience with this menu?

YuriKolovsky, thank you, I will test again.

[Rayzur]

What are you think of this http://www.grc.com/menu2/invitro.htm
Anyone have experience with this menu?

No first hand experience with it but at first glance I see it uses tables nested in comments for IE6.

It is just a similar version of Stu's menu which they give credits to at the bottom of the page.

[Wall_e]

I got this work YuriKolovsky. Thanks for a great css menu. I only made some change with width but I hope it works with other browser than IE8 also anyway.

@Rayzur, I tested that menu before I fund stu's and yuriKolovsky menu but it was too hard to customize I think. For me anyway.

Otherwise it great menu and I really believe it is 100% cross browser menu after what I read on that site.

[YuriKolovsky]

@wall e
you can test your menu to see if it works in IE6-7 by using IE Tester

so that you dont have to guess if it works or not.
if you have problems with it your can PM me and ill help out.

[YuriKolovsky]

I mean usually on a website there are 4 areas

the header
the navigation
the content
the footer

the footer is usually handled with a list
the content is done with hn and p and list (and others)
the navigation is a list
and the header is done with..? what is it done with?
what tag do i use for the logo text? for the login buttons? (another list??) for the extra notes in the head?

or should i just move to html5...?