CSS wizardry behind on Yahoo & MSN

Nice Box Technique...

[soquinn]

Anyone now the CSS wizardry behind the style and technique used by yahoo and msn to highlight where you are on their search box like; web, images, news... etc. It’s a box with an arrow pointing down?

[moltar]

It's not a matter of CSS. It's more a JavaScript question. They just replace certain parts of the page (divs or whatever) with new code dynamically with JS.

[soquinn]

Thanks... but there must be css to create the box and position the triangle arrow baseline with using <li>? Thought someone might have tried replicating it as a good nav menu and would share the code… it’s more advanced then I can handle or dissect myself?

[createErrorMsg]

It looks like they nest an empty <b></b> tag in the <a>nchor, assign the triangle as a background image on the <b> (including a height and width). Then they apply a top margin of 1.35em to push it down so it sticks out of the bottom of the <a>nchor.

cEM

[soquinn]

Thanks createErrorMsg, that sounds interesting. What would do you think the basic css code would look like for that?

[createErrorMsg]

Their code is kind of convoluted (they use all IDS and CLASSES with non-intuitive names), and I'm not entirely sure it's ethical to post someone else's code, but it's something like this...

a#THELINK {
background:THEBOXIMAGE;
}
a#THELINK b{
width:WHATEVER;
height:WHATEVER;
background:THELITTELTRIANGLEIMAGE;
margin-top:ENOUGH TO PUSH THE TRIANGLE OUT;
margin-left:ENOUGH TO MOVE THE TRIANGLE TO CENTER;
}

They also add padding in a few places to shift box sizes and distance elements from one another.

The best way to study it is to install the Web Developer toolbar on Firefox and click on "Edit CSS" in the CSS Menu. YOu can remove and alter margins and padding to see how things move around and interact.

cEM

[soquinn]

Thanks createErrorMsg, will try the firefox thing... any other software out there to build css besides notepad?

[moltar]

They wrap the triangle into a

<b></b>

within the link. The

<b></b>

is just a hook for the triangle image and not used for anything else.