How To Create Tab With "Active Arrow" Below?

**John Hosking** · May 2 '07, 05:35 PM

Re: How To Create Tab With "Active Arrow" Below?

pbd22 wrote:

I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:
>

http://personals.yahoo.com/us/search/dashboard

>
Does anybody know of any examples out there on how to do this?

Well, there's http://personals.yahoo.com/us/search/dashboard.

HTH :-)
--
John

**pbd22** · May 2 '07, 05:45 PM

Re: How To Create Tab With "Active Arrow" Below?

On May 2, 10:33 am, John Hosking <J...@DELETE.Ho sking.name.INVA LID>
wrote:

pbd22 wrote:

I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:

>

http://personals.yahoo.com/us/search/dashboard

>

Does anybody know of any examples out there on how to do this?

>
Well, there'shttp://personals.yahoo .com/us/search/dashboard.
>
HTH :-)
--
John

about as much as showing me a picture of a McLaren F1 explains how to
build its
engine. :) They don't publish the CSS.

**Ed Jay** · May 2 '07, 06:15 PM

Re: How To Create Tab With "Active Arrow" Below?

pbd22 scribed:

>On May 2, 10:33 am, John Hosking <J...@DELETE.Ho sking.name.INVA LID>
>wrote:

>pbd22 wrote:

I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:

>>

>http://personals.yahoo.com/us/search/dashboard

>>

Does anybody know of any examples out there on how to do this?

>>
>Well, there'shttp://personals.yahoo .com/us/search/dashboard.
>>
>HTH :-)
>--
>John

>
>about as much as showing me a picture of a McLaren F1 explains how to
>build its
>engine. :) They don't publish the CSS.

Here you gop...have some fun.

body { font:small/122% arial,helvetica ,clean,terminal ,sans-serif;
font:x-small; }
/* hide from old browsers \*/
body * { line-height:122%; }
/* end hack */
table { font-size:inherit; font:x-small; } html>body { font:83%/122%
arial,helvetica ,clean,sans-serif; } table, pre, code, select, input {
font-size:100% } textarea { font-size:107%; } html>body textarea {
font-size:auto } big { font-size:22% } small { font:177% verdana; }
h1,h2,h3,h4,h5, h6{margin:0; padding:0;}

/* END LSM FONT SECTION */

/* Begin standard font section */
/* Page Title */
..yperFontTitle strong {
color: #175878;
}

..yperFontTitle Premier {
color: #705ca0;
}
..yperFontWarni ng {
color: #a73735;
font-weight: bold;
}
strong {
color: #175878;
}
/* Ad Title */
em {
color: #175878;
font-style: normal;
font-weight: bold;
}
em.yperBaseConf irm {
color: #9b446d;
}
em.yperBaseErrM sg {
color: #a73735;
}

/* Body Text */
/* Body Text Link */
a {
color: #0b8aaa;
}

/* For Promo and Registration Pages */
h1 {
font-size:167%;
}
h2 {
font-size:144%;
}
h3 {
font-size:122%;
}

input {
font-family: verdana;
font-size: 10px;
padding: 0;
}
button {
font-family: verdana;
font-size: 10px;
padding: 0;
}
/* Form Text */
input.yperFontA ctionButton {
font-weight: bold;
cursor: hand;
color: #fff;
background: #a73735;
padding: 0;
}
input.yperFontB utton {
font-weight: bold;
cursor: hand;
color: #4f4f4f;
background: #ddd;
padding: 0;
}
..yperFontButto nHolder {
text-align: center;
}
#ygmagreeting strong {
color:#000;
}
/* {{{ About.com cobrand */
/* {{{ About.com cobrand header font */
#ABOUTBanner strong.ABOUTTit le {
color: #000;
}
#ABOUTBanner a.ABOUTSubTitle {
color: #f00;
}
#ABOUTBanner a.ABOUTPers {
font-size: 167%;
color:#236eb5;
text-decoration:none ;
font-weight: bold;
}
/* }}} About.com cobrand header font */
/* {{{ About.com cobrand footer font */
#ABOUTFooter {
font-size: 77%;
color: #686868;
}
#ABOUTFooter a.footer {
color: #686868;
}
/* }}} About.com cobrand footer font */
/* }}} About.com cobrand */
--
Ed Jay (remove 'M' to respond by email)

**pbd22** · May 2 '07, 06:45 PM

Re: How To Create Tab With "Active Arrow" Below?

On May 2, 11:07 am, Ed Jay <e...@aes-intl.comwrote:

pbd22 scribed:
>
>
>

On May 2, 10:33 am, John Hosking <J...@DELETE.Ho sking.name.INVA LID>
wrote:

pbd22 wrote:
I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:

>

http://personals.yahoo.com/us/search/dashboard

>

Does anybody know of any examples out there on how to do this?

>

Well, there'shttp://personals.yahoo .com/us/search/dashboard.

>

HTH :-)
--
John

>

about as much as showing me a picture of a McLaren F1 explains how to
build its
engine. :) They don't publish the CSS.

>
Here you gop...have some fun.
>
body { font:small/122% arial,helvetica ,clean,terminal ,sans-serif;
font:x-small; }
/* hide from old browsers \*/
body * { line-height:122%; }
/* end hack */
table { font-size:inherit; font:x-small; } html>body { font:83%/122%
arial,helvetica ,clean,sans-serif; } table, pre, code, select, input {
font-size:100% } textarea { font-size:107%; } html>body textarea {
font-size:auto } big { font-size:22% } small { font:177% verdana; }
h1,h2,h3,h4,h5, h6{margin:0; padding:0;}
>
/* END LSM FONT SECTION */
>
/* Begin standard font section */
/* Page Title */
.yperFontTitle strong {
color: #175878;
>
}
>
.yperFontTitleP remier {
color: #705ca0;}
>
.yperFontWarnin g {
color: #a73735;
font-weight: bold;}
>
strong {
color: #175878;}
>
/* Ad Title */
em {
color: #175878;
font-style: normal;
font-weight: bold;}
>
em.yperBaseConf irm {
color: #9b446d;}
>
em.yperBaseErrM sg {
color: #a73735;
>
}
>
/* Body Text */
/* Body Text Link */
a {
color: #0b8aaa;
>
}
>
/* For Promo and Registration Pages */
h1 {
font-size:167%;}
>
h2 {
font-size:144%;}
>
h3 {
font-size:122%;
>
}
>
input {
font-family: verdana;
font-size: 10px;
padding: 0;}
>
button {
font-family: verdana;
font-size: 10px;
padding: 0;}
>
/* Form Text */
input.yperFontA ctionButton {
font-weight: bold;
cursor: hand;
color: #fff;
background: #a73735;
padding: 0;}
>
input.yperFontB utton {
font-weight: bold;
cursor: hand;
color: #4f4f4f;
background: #ddd;
padding: 0;}
>
.yperFontButton Holder {
text-align: center;}
>
#ygmagreeting strong {
color:#000;}
>
/* {{{ About.com cobrand */
/* {{{ About.com cobrand header font */
#ABOUTBanner strong.ABOUTTit le {
color: #000;}
>
#ABOUTBanner a.ABOUTSubTitle {
color: #f00;}
>
#ABOUTBanner a.ABOUTPers {
font-size: 167%;
color:#236eb5;
text-decoration:none ;
font-weight: bold;}
>
/* }}} About.com cobrand header font */
/* {{{ About.com cobrand footer font */
#ABOUTFooter {
font-size: 77%;
color: #686868;}
>
#ABOUTFooter a.footer {
color: #686868;}
>
/* }}} About.com cobrand footer font */
/* }}} About.com cobrand */
--
Ed Jay (remove 'M' to respond by email)

Hi, Thanks!

Unless I am mistaken, that is yahoo CSS but it has none of the
classes that I am asking about so, isn't particularly useful to me.
I am looking for classes related to the link originally posted. Here
is a selected source of the area of interest:

<div class="yperCont ent">
<div class="yperSear chType"> & nbsp;Select Search
Type: &nbs p;</div>
<div 
<ul id="yperDashboa rdMenu">
<li id="yperTabSave dSearch"
class="yperSele ctedMenu"><em>< a><div><div>My Saved Searches</div></
div></a></em></li <li id="yperTabNewS earch"><em><a>< div><div>New
Search</div></div></a></em></li <li
id="yperTabKeyw ordSearch"><em> <a><div><div>Ke yword Search</div></div></
a></em></li>

</ul>
<div class="yperClea r"></div>
</div
</div>

**Jonathan N. Little** · May 2 '07, 07:25 PM

Re: How To Create Tab With "Active Arrow" Below?

pbd22 wrote:

>
Unless I am mistaken, that is yahoo CSS but it has none of the
classes that I am asking about so, isn't particularly useful to me.
I am looking for classes related to the link originally posted. Here
is a selected source of the area of interest:
>
<div class="yperCont ent">
<div class="yperSear chType"> & nbsp;Select Search
Type: &nbs p;</div>
<div 
<ul id="yperDashboa rdMenu">
<li id="yperTabSave dSearch"
class="yperSele ctedMenu"><em>< a><div><div>My Saved Searches</div></
div></a></em></li <li id="yperTabNewS earch"><em><a>< div><div>New
Search</div></div></a></em></li <li
id="yperTabKeyw ordSearch"><em> <a><div><div>Ke yword Search</div></div></
a></em></li>
>
</ul>
<div class="yperClea r"></div>
</div
</div>
>

Do yourself a favor and get the WebDeveloper bar extension for your Firefox.

http://us.js2.yimg.com/us.yimg.com/lib/per/css/search/dashboard_173141.css

..yperSearchTyp e {
float: left;
font-size: 77%;
font-family: verdana;
color: #666;
padding: 0 0 0 5px;
background: #fff;
position: relative;
z-index: 10;
}
..yperSubmitAre a {
text-align: center;
}
..yperExample {
font-size: 77%;
font-family: verdana;
}
..yperAddKeywor d {
padding: 0 5px 0 30px;
}
/* {{{ criteria */
/* {{{ layout */
..yperCriteria {
width: 60%;
margin: 10px 0 10px 30px;
cursor: pointer;
}
..yperCriteria a {
margin: 0 0 0 5px;
}
a.yperCriteriaM ore {
margin: 0 0 0 10px;
}
/* }}} */
/* {{{ font */
..yperCriteria {
color: #0b8aaa;
}
..yperCriteriaA ny {
color: #5497A8;
}
span#yperCriter iaBody,
span#yperCriter iaEthnicity,
span#yperCriter iaMinHeight,
span#yperCriter iaMaxHeight,
span#yperCriter iaHumor,
span#yperCriter iaAstro,
span#yperCriter iaEducation {
color: #000000;
font:100% arial;
}
/* }}} */
/* }}} */

/* {{{ dashboard main content */
/* {{{ layout */
#yperMainDashbo ard {
clear: both;
width: 750px;
border-bottom: 1px solid #6cbbd2;
}
#yperMainDashbo ard .yperContent {
width: 748px;
border-left: 1px solid #6cbbd2;
border-right: 1px solid #6cbbd2;
background-color: #fff;
text-overflow: ellipsis;
overflow: hidden;
}
/* }}} layout */
/* }}} dashboard main content */

/* {{{ dashboard tab menu */
/* {{{ layout */
#yperDashboardM enu {
padding: 0;
margin: 0;
list-style: none;
}
#yperDashboardM enu li {
float: left;
cursor: pointer;
margin: 0;
padding: 0;
height: 17px;
}
#yperDashboardM enu em {
font-weight: normal;
display: block;
background:
url(http://us.i1.yimg.com/us.yimg.com/i/...6d6d6_pipe.gif)
no-repeat top left;
position: relative;
top: -5px;
left: -4px;
}
#yperDashboardM enu em a {
display: block;
padding: 0 10px 0 5px;
}
#yperDashboardM enu em a:hover {
text-decoration: underline;
}
#yperDashboardM enu em a div {
position: relative;
top: 4px;
left: 5px;
}
#yperDashboardM enu em a div div {
position: relative;
top: -2px;
left: 0;
}
#yperDashboardM enu li.yperSelected Menu em {
background: #6cbbd2
url(http://us.i1.yimg.com/us.yimg.com/i/...39eba_left.gif)
no-repeat top left;
position: relative;
top: -8px;
left: -1px;
}
#yperDashboardM enu li.yperSelected Menu em a {
background: #6cbbd2
url(http://us.i1.yimg.com/us.yimg.com/i/...d7d7_right.gif)
no-repeat top right;
position: relative;
z-index: 1;
top: 0;;
right: -2px;
color: #fff;
font-weight: bold;
}
#yperDashboardM enu li.yperSelected Menu em a div {
position: relative;
top: 15px;
left: -1px;
background:
url(http://us.i1.yimg.com/us.yimg.com/i/...9eba_arrow.gif)
no-repeat 50% 100%;
}
#yperDashboardM enu li.yperSelected Menu em a div div {
background: none;
top: -10px;
margin-left: 2px;
}
#yperDashboardM enu li.yperSelected Menu {
background: #6cbbd2
url(http://us.i1.yimg.com/us.yimg.com/i/...7d7_right2.gif)
repeat-y 100% 100%;
position: relative;
z-index: 1;
margin: 0;
padding: 0;
padding-right: 1px;
border-left: 1px solid #0b8aaa;
}

..yperDashboard Content_inactiv e,
..yperDashboard Content_active {
clear: both;
display: none;
border-top: 1px solid #0b8aaa;
background: #e0f6fa;
margin: 0;
padding: 0;
width: 693px;
padding: 15px 20px 15px 35px;
}
..yperDashboard Content_active {
display: block;
}
/* }}} layout */
/* }}} */

/* {{{ tab content */
#yperTabContent {
width: 100%;
background: #fff
url(http://us.i1.yimg.com/us.yimg.com/i/...rright_6x6.gif)
no-repeat top right;
}
#yperTabContent .yperTop {
font-size: 0;
margin: 0 0 0 6px;
height: 6px;
background: #fff
url(http://us.i1.yimg.com/us.yimg.com/i/...lor/6cbbd2.gif)
repeat-x top;
}
#yperTabContent .yperTopLeft {
margin: 0 6px 0 0;
height: 6px;
background: #fff
url(http://us.i1.yimg.com/us.yimg.com/i/...erleft_6x6.gif)
no-repeat top left;
}
#yperTabContent .yperContent {
border-left: 1px solid #6cbbd2;
border-right: 1px solid #6cbbd2;
height: 17px;
}
/* }}} tab content */

/* {{{ form */
#yperDashboardF orm {
margin: 15px 0 0;
}
#yperDashboardF orm input {
font-size: 100%;
}
#yperDashboardF orm .yperFontAction Button,
#yperDashboardF orm .yperFontButton {
font-size: 77%;
}
#yperDashboardF orm em {
color: #000;
}
#yperDashboardF orm .yperCriteriaOp t {
clear: both;
width: 100%;
margin: 0;
}
#yperDashboardF orm ul {
float: left;
width: 33%;
margin: 0;
padding: 0;
list-style: none;
}
#yperDashboardF orm ul li {
margin: 0;
padding: 0;
}
/* }}} */

/* {{{ New Search Section */
#yperTypeEducat ion,
#yperTypeEthnic ity,
#yperTypeAstro,
#yperTypeHumor,
#yperTypeHeight ,
#yperTypeBody {
margin: 0 20px 0 40px;
padding: 5px 0;
background: #cbeaf0;
display: none;
visibility: hidden;
}
#yperTypeEducat ion select {
margin: 0 0 0 10px;
}
#yperCriteriaBo dy,
#yperCriteriaHu mor,
#yperCriteriaAs tro,
#yperCriteriaMi nHeight,
#yperCriteriaMa xHeight,
#yperCriteriaEt hnicity,
#yperCriteriaEd ucation {
font-family: verdana;
font-size: 77%;
color: #666;
}
/* }}} */

/* {{{ Saved New Search Bar */
/* {{{ font */
#yperSavedNewSe arch {
font-family: verdana;
font-size: 77%;
color: #fff;
}
#yperSavedNewSe arch a,
#yperSavedNewSe arch em {
color: #fff;
}
/* }}} font */
/* {{{ layout */
#yperSavedNewSe arch {
margin: 10px 0 5px;
}
#yperSavedNewSe arch .yperLayoutCont ent {
padding: 0 0 0 15px;
}
/* }}} layout */
/* }}} Saved New Search Bar */

/* {{{ Saved Search Note */
/* {{{ font */
#yperSavedSearc hNote {
font-family: verdana;
font-size: 77%;
color: #666;
}
#yperSavedSearc hNote em {
color: #666;
}
/* }}} font */
/* {{{ layout */
#yperSavedSearc hNote {
width: 100%;
margin: 30px 15px 35px;
}
#yperSavedSearc hNote em,
#yperSavedSearc hNote span {
float: left;
display: block;
margin-right: 3px;
}
#yperSavedSearc hNote em {
width: 25%;
text-align: right;
}
#yperSavedSearc hNote span {
width: 70%;
}
/* }}} layout */
/* }}} Saved Search Note */

/* {{{ yperSavedSearch Disp */
/* {{{ font */
..yperSavedSear chDisp a.yperSavedPrim ary {
font-weight: bold;
}
..yperSavedSear chDisp .yperEditSearch ,
..yperSavedSear chDisp .yperRenameSear ch,
..yperSavedSear chDisp .yperMakePrimar ySearch,
..yperSavedSear chDisp .yperDeleteSear ch {
color: #666;
font-size: 77%;
font-family: verdana;
}
..yperSavedNewS earch {
color: #666;
}
/* }}} font */
/* {{{ layout */
..yperSavedSear chDisp {
clear: both;
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #f4f4f4;
}
..yperSavedSear chDisp .yperPrimarySea rchIcon {
width: 15px;
float: left;
}
..yperSavedSear chDisp .yperSearchName {
float: left;
margin: 0 2px 0 0;
width: 20%;
}
..yperSavedSear chDisp .yperMakePrimar ySearch {
float: left;
margin: 0 2px;
width: 22%;
}
..yperSavedSear chDisp .yperRenameSear ch {
float: left;
margin: 0 2px;
width: 18%;
}
..yperSavedSear chDisp .yperEditSearch {
float: left;
margin: 0 2px;
width: 18%;
}
..yperSavedSear chDisp .yperDeleteSear ch {
margin: 0 2px;
}
/* }}} layout */
/* }}} yperSavedSearch Disp */

/* {{{ match by mail */
/* {{{ layout */
#yperBoxMatchBy Mail {
float: left;
width: 350px;
margin: 15px 10px 20px 0;
}
#yperBoxMatchBy Mail p {
padding: 0;
margin: 3px 0 0;
}
#yperBoxMatchBy Mail strong {
color:#000;
}
#yperBoxMatchBy Mail .yperLayoutCont ent {
padding: 3px 0;
margin: 0 8px;
}
/* }}} layout */
/* }}} */

/* {{{ yperSeekingGend er */
#yperSeekingGen der1,
#yperSeekingGen der2 {
display: none;
visibility: hidden;
}
/* }}} yperSeekingGend er */

/*************** ****** {{{ marketing promo */
#yperMarketingP romo {
float: left;
width: 572px;
margin: 8px 0;
}

/* {{{ no SRN ad layout */
#yperAdSrnNoAd {
float: left;
width: 390px;
height: 65px;
margin: 15px 0 0;
}
#yperAdSrnNoAd .yperAdImage {
height: 65px;
float: left;
background: #0062c8;
display: block;
margin-right: 3px;
}
#yperAdSrnNoAd .yperAdText {
height: 65px;
width: 287px;
float:left;
background: #0062c8;
text-align: center;
}
#yperAdSrnNoAd .yperAdText img {
background: #0062c8;
display: block;
margin: 2px 0;
margin-left: auto;
margin-right: auto;
}
/* }}} end no SRN ad layout */
/* {{{ no SRN ad font */
#yperAdSrnNoAd .yperAdText {
color: #fff200;
font-family: verdana;
font-size: 77%;
font-weight: bold;
}
#yperAdSrnNoAd .yperAdText a {
color: #ffffff;
}
/* }}} end no SRN ad font */
/*************** ****** end marketing promo }}} */

/* {{{ yperAboutMyself */
/* {{{ layout */
#yperAboutMysel f {
clear: both;
width: 100%;
margin: 0 0 15px;
padding: 10px 0 5px;
}
#yperAboutMysel f ul {
width: 100%;
margin: 6px 0 6px 15px;
}
#yperAboutMysel f ul li {
float: left;
}
#yperAboutMysel f ul li.yperRequired Photo input {
margin-left: 30px;
}
#yperAboutMysel f input {
margin: 0 5px;
}
#yperAboutMysel f select {
margin: 0;
margin-right: 10px;
}
/* }}} layout */
/* }}} */

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

rf · May 3 '07, 12:05 AM

Re: How To Create Tab With "Active Arrow" Below?

"pbd22" <dushkin@gmail. comwrote in message
news:1178125302 .450363.15070@p 77g2000hsh.goog legroups.com...

Hi.
>
I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:
>
http://personals.yahoo.com/us/search/dashboard

Change the font size and admire how that little arrow design breaks.

--
Richard.

**pbd22** · May 3 '07, 02:15 AM

Re: How To Create Tab With "Active Arrow" Below?

On May 2, 5:00 pm, "rf" <r...@invalid.c omwrote:

"pbd22" <dush...@gmail. comwrote in message
>
news:1178125302 .450363.15070@p 77g2000hsh.goog legroups.com...
>

Hi.

>

I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:

>

http://personals.yahoo.com/us/search/dashboard

>
Change the font size and admire how that little arrow design breaks.
>
--
Richard.

Yes, i have noticed. thanks all for the CSS dump, but this little
arrow
is turning out to be a bit of a pain. I may search for alternative
styles
unless I arrive at a more straight-forward solution. Thanks again.

**Beauregard T. Shagnasty** · May 3 '07, 03:05 AM

Re: How To Create Tab With "Active Arrow" Below?

rf wrote:

"pbd22" <dushkin@gmail. comwrote:

>I want to create a tab with a little "active tab" arrow below it to
>tell the user where they are. An example is here:
>>
>http://personals.yahoo.com/us/search/dashboard

>
Change the font size and admire how that little arrow design breaks.

I don't see any arrow, just alt text stating "arrow".

http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/sidebar_bluearrow_5x9.gif

Not Found.

--
-bts
-Motorcycles defy gravity; cars just suck

rf · May 3 '07, 04:45 AM

Re: How To Create Tab With "Active Arrow" Below?

"pbd22" <dushkin@gmail. comwrote in message
news:1178158309 .978995.144180@ y80g2000hsf.goo glegroups.com.. .

On May 2, 5:00 pm, "rf" <r...@invalid.c omwrote:

>"pbd22" <dush...@gmail. comwrote in message
>>
>news:117812530 2.450363.15070@ p77g2000hsh.goo glegroups.com.. .
>>

Hi.

>>

I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:

>>

>http://personals.yahoo.com/us/search/dashboard

>>
>Change the font size and admire how that little arrow design breaks.
>>
>--
>Richard.

>
Yes, i have noticed. thanks all for the CSS dump, but this little
arrow
is turning out to be a bit of a pain. I may search for alternative
styles
unless I arrive at a more straight-forward solution. Thanks again.

It's a background applied to the li element containing that menu item.
Appears to be centered horizontally, at the bottom, then displaced 15 pixels
down, that is outside the actual li element. That's why it breaks on font
resize.

<html (from view source)>

<ul id="yperDashboa rdMenu">
<li id="yperTabNewS earch" ><em><a><div><d iv>New
Search</div></div></a></em></li>

</html>

Yep, complete with div within div with a

<css ( from dashboard_17314 1.css)>

#yperDashboardM enu li.yperSelected Menu em a div {
background:tran sparent
url(http://us.i1.yimg.com/us.yimg.com/i/...9eba_arrow.gif)
no-repeat scroll 50% 100%;
left:-1px;
position:relati ve;
top:15px;
}

</css>

Don't know where .yperSelectedMe nu comes in to it. Probably applied to the
li element with some javascript somewhere.

Neat idea but a very sloppy implementation.

--
Richard.

**Rob** · May 3 '07, 08:35 AM

Re: How To Create Tab With "Active Arrow" Below?

pbd22 schreef:

Hi.
>
I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:
>

http://personals.yahoo.com/us/search/dashboard

>
Does anybody know of any examples out there on how to do this?
>
Thanks!
>

Here's an example on how to do this:

Stu Nicholls | CSS PLAY | 404 Error Page

http://www.cssplay.co.uk/menus/pointer.html

You're welcome

**pbd22** · May 3 '07, 02:25 PM

Re: How To Create Tab With "Active Arrow" Below?

On May 3, 1:34 am, Rob <robwaaijenb... @hotmail.comwro te:

pbd22 schreef:
>

Hi.

>

I want to create a tab with a little "active tab" arrow below it to
tell the user where they are. An example is here:

>

http://personals.yahoo.com/us/search/dashboard

>

Does anybody know of any examples out there on how to do this?

>

Thanks!

>
Here's an example on how to do this:
>

Stu Nicholls | CSS PLAY | 404 Error Page

http://www.cssplay.co.uk/menus/pointer.html

>
You're welcome

Rob,

Thanks! you rock.
That is the best I have seen so far. The yahoo
code has me spinning. The only difference between
what you have provided and the yahoo example is
that in the yahoo example the arrow remains on the
active page until you click the next active tab - then
it moves there. But, that is minor and I'll try to figure
that one out.

Thanks again for the helpful link!

**Rob** · May 3 '07, 02:35 PM

Re: How To Create Tab With "Active Arrow" Below?

pbd22 schreef:
[snipped]

>
Rob,
>
Thanks! you rock.

When I lay down, I roll :>)

**Ed Jay** · May 3 '07, 03:15 PM

Re: How To Create Tab With "Active Arrow" Below?

Rob scribed:

>pbd22 schreef:
>[snipped]

>>
>Rob,
>>
>Thanks! you rock.

>
>When I lay down, I roll :>)

Take a Viagra. It will prevent you from rolling too far. ;-)
--
Ed Jay (remove 'M' to respond by email)

**pbd22** · May 3 '07, 09:05 PM

Re: How To Create Tab With "Active Arrow" Below?

On May 3, 8:06 am, Ed Jay <e...@aes-intl.comwrote:

Rob scribed:
>

pbd22 schreef:
[snipped]

>

Rob,

>

Thanks! you rock.

>

When I lay down, I roll :>)

>
Take a Viagra. It will prevent you from rolling too far. ;-)
--
Ed Jay (remove 'M' to respond by email)

OK. I have one last question if anybody cares to kill a few minutes...

How do I change the border of the CSS arrow itself? Below are the
two classes for forming the little CSS arrow thing below the tab.
But,
I can't seem to figure out how to change the arrow's border - not sure
if its possible given the way it currently is working? Any takers:

..activearrow a:hover span {
background:#66C CCC;
text-decoration:none ;
font-weight:bold;
color:White;
}

..activearrow a:hover em {
display:block;
overflow:hidden ;
border:6px solid #66CCCC;
border-color:#66CCCC #E5E5E5;
border-width:6px 6px 0 6px;
position:absolu te;
left:50%;
margin-left:-6px;
}

How To Create Tab With "Active Arrow" Below?

How To Create Tab With "Active Arrow" Below?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment