By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

How To Create Tab With "Active Arrow" Below?

P: n/a
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!

May 2 '07 #1
Share this Question
Share on Google+
15 Replies


P: n/a
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
May 2 '07 #2

P: n/a
On May 2, 10:33 am, John Hosking <J...@DELETE.Hosking.name.INVALID>
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.

May 2 '07 #3

P: n/a
pbd22 scribed:
>On May 2, 10:33 am, John Hosking <J...@DELETE.Hosking.name.INVALID>
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;
}

..yperFontTitlePremier {
color: #705ca0;
}
..yperFontWarning {
color: #a73735;
font-weight: bold;
}
strong {
color: #175878;
}
/* Ad Title */
em {
color: #175878;
font-style: normal;
font-weight: bold;
}
em.yperBaseConfirm {
color: #9b446d;
}
em.yperBaseErrMsg {
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.yperFontActionButton {
font-weight: bold;
cursor: hand;
color: #fff;
background: #a73735;
padding: 0;
}
input.yperFontButton {
font-weight: bold;
cursor: hand;
color: #4f4f4f;
background: #ddd;
padding: 0;
}
..yperFontButtonHolder {
text-align: center;
}
#ygmagreeting strong {
color:#000;
}
/* {{{ About.com cobrand */
/* {{{ About.com cobrand header font */
#ABOUTBanner strong.ABOUTTitle {
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)
May 2 '07 #4

P: n/a
On May 2, 11:07 am, Ed Jay <e...@aes-intl.comwrote:
pbd22 scribed:
On May 2, 10:33 am, John Hosking <J...@DELETE.Hosking.name.INVALID>
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;

}

.yperFontTitlePremier {
color: #705ca0;}

.yperFontWarning {
color: #a73735;
font-weight: bold;}

strong {
color: #175878;}

/* Ad Title */
em {
color: #175878;
font-style: normal;
font-weight: bold;}

em.yperBaseConfirm {
color: #9b446d;}

em.yperBaseErrMsg {
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.yperFontActionButton {
font-weight: bold;
cursor: hand;
color: #fff;
background: #a73735;
padding: 0;}

input.yperFontButton {
font-weight: bold;
cursor: hand;
color: #4f4f4f;
background: #ddd;
padding: 0;}

.yperFontButtonHolder {
text-align: center;}

#ygmagreeting strong {
color:#000;}

/* {{{ About.com cobrand */
/* {{{ About.com cobrand header font */
#ABOUTBanner strong.ABOUTTitle {
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="yperContent">
<div class="yperSearchType">&nbsp;&nbsp;Select Search
Type:&nbsp;&nbsp;</div>
<div <!-- need this div tag hack to fix the white space problem on
safari -->
<ul id="yperDashboardMenu">
<li id="yperTabSavedSearch"
class="yperSelectedMenu"><em><a><div><div>My Saved Searches</div></
div></a></em></li <li id="yperTabNewSearch"><em><a><div><div>New
Search</div></div></a></em></li <li
id="yperTabKeywordSearch"><em><a><div><div>Keywor d Search</div></div></
a></em></li>

</ul>
<div class="yperClear"></div>
</div<!-- close div tag hack -->
</div>

May 2 '07 #5

P: n/a
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="yperContent">
<div class="yperSearchType">&nbsp;&nbsp;Select Search
Type:&nbsp;&nbsp;</div>
<div <!-- need this div tag hack to fix the white space problem on
safari -->
<ul id="yperDashboardMenu">
<li id="yperTabSavedSearch"
class="yperSelectedMenu"><em><a><div><div>My Saved Searches</div></
div></a></em></li <li id="yperTabNewSearch"><em><a><div><div>New
Search</div></div></a></em></li <li
id="yperTabKeywordSearch"><em><a><div><div>Keywor d Search</div></div></
a></em></li>

</ul>
<div class="yperClear"></div>
</div<!-- close div tag hack -->
</div>
Do yourself a favor and get the WebDeveloper bar extension for your Firefox.

http://us.js2.yimg.com/us.yimg.com/l...ard_173141.css

..yperSearchType {
float: left;
font-size: 77%;
font-family: verdana;
color: #666;
padding: 0 0 0 5px;
background: #fff;
position: relative;
z-index: 10;
}
..yperSubmitArea {
text-align: center;
}
..yperExample {
font-size: 77%;
font-family: verdana;
}
..yperAddKeyword {
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.yperCriteriaMore {
margin: 0 0 0 10px;
}
/* }}} */
/* {{{ font */
..yperCriteria {
color: #0b8aaa;
}
..yperCriteriaAny {
color: #5497A8;
}
span#yperCriteriaBody,
span#yperCriteriaEthnicity,
span#yperCriteriaMinHeight,
span#yperCriteriaMaxHeight,
span#yperCriteriaHumor,
span#yperCriteriaAstro,
span#yperCriteriaEducation {
color: #000000;
font:100% arial;
}
/* }}} */
/* }}} */

/* {{{ dashboard main content */
/* {{{ layout */
#yperMainDashboard {
clear: both;
width: 750px;
border-bottom: 1px solid #6cbbd2;
}
#yperMainDashboard .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 */
#yperDashboardMenu {
padding: 0;
margin: 0;
list-style: none;
}
#yperDashboardMenu li {
float: left;
cursor: pointer;
margin: 0;
padding: 0;
height: 17px;
}
#yperDashboardMenu 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;
}
#yperDashboardMenu em a {
display: block;
padding: 0 10px 0 5px;
}
#yperDashboardMenu em a:hover {
text-decoration: underline;
}
#yperDashboardMenu em a div {
position: relative;
top: 4px;
left: 5px;
}
#yperDashboardMenu em a div div {
position: relative;
top: -2px;
left: 0;
}
#yperDashboardMenu li.yperSelectedMenu 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;
}
#yperDashboardMenu li.yperSelectedMenu 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;
}
#yperDashboardMenu li.yperSelectedMenu 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%;
}
#yperDashboardMenu li.yperSelectedMenu em a div div {
background: none;
top: -10px;
margin-left: 2px;
}
#yperDashboardMenu li.yperSelectedMenu {
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;
}

..yperDashboardContent_inactive,
..yperDashboardContent_active {
clear: both;
display: none;
border-top: 1px solid #0b8aaa;
background: #e0f6fa;
margin: 0;
padding: 0;
width: 693px;
padding: 15px 20px 15px 35px;
}
..yperDashboardContent_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 */
#yperDashboardForm {
margin: 15px 0 0;
}
#yperDashboardForm input {
font-size: 100%;
}
#yperDashboardForm .yperFontActionButton,
#yperDashboardForm .yperFontButton {
font-size: 77%;
}
#yperDashboardForm em {
color: #000;
}
#yperDashboardForm .yperCriteriaOpt {
clear: both;
width: 100%;
margin: 0;
}
#yperDashboardForm ul {
float: left;
width: 33%;
margin: 0;
padding: 0;
list-style: none;
}
#yperDashboardForm ul li {
margin: 0;
padding: 0;
}
/* }}} */

/* {{{ New Search Section */
#yperTypeEducation,
#yperTypeEthnicity,
#yperTypeAstro,
#yperTypeHumor,
#yperTypeHeight,
#yperTypeBody {
margin: 0 20px 0 40px;
padding: 5px 0;
background: #cbeaf0;
display: none;
visibility: hidden;
}
#yperTypeEducation select {
margin: 0 0 0 10px;
}
#yperCriteriaBody,
#yperCriteriaHumor,
#yperCriteriaAstro,
#yperCriteriaMinHeight,
#yperCriteriaMaxHeight,
#yperCriteriaEthnicity,
#yperCriteriaEducation {
font-family: verdana;
font-size: 77%;
color: #666;
}
/* }}} */

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

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

/* {{{ yperSavedSearchDisp */
/* {{{ font */
..yperSavedSearchDisp a.yperSavedPrimary {
font-weight: bold;
}
..yperSavedSearchDisp .yperEditSearch,
..yperSavedSearchDisp .yperRenameSearch,
..yperSavedSearchDisp .yperMakePrimarySearch,
..yperSavedSearchDisp .yperDeleteSearch {
color: #666;
font-size: 77%;
font-family: verdana;
}
..yperSavedNewSearch {
color: #666;
}
/* }}} font */
/* {{{ layout */
..yperSavedSearchDisp {
clear: both;
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #f4f4f4;
}
..yperSavedSearchDisp .yperPrimarySearchIcon {
width: 15px;
float: left;
}
..yperSavedSearchDisp .yperSearchName {
float: left;
margin: 0 2px 0 0;
width: 20%;
}
..yperSavedSearchDisp .yperMakePrimarySearch {
float: left;
margin: 0 2px;
width: 22%;
}
..yperSavedSearchDisp .yperRenameSearch {
float: left;
margin: 0 2px;
width: 18%;
}
..yperSavedSearchDisp .yperEditSearch {
float: left;
margin: 0 2px;
width: 18%;
}
..yperSavedSearchDisp .yperDeleteSearch {
margin: 0 2px;
}
/* }}} layout */
/* }}} yperSavedSearchDisp */

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

/* {{{ yperSeekingGender */
#yperSeekingGender1,
#yperSeekingGender2 {
display: none;
visibility: hidden;
}
/* }}} yperSeekingGender */

/********************* {{{ marketing promo */
#yperMarketingPromo {
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 */
#yperAboutMyself {
clear: both;
width: 100%;
margin: 0 0 15px;
padding: 10px 0 5px;
}
#yperAboutMyself ul {
width: 100%;
margin: 6px 0 6px 15px;
}
#yperAboutMyself ul li {
float: left;
}
#yperAboutMyself ul li.yperRequiredPhoto input {
margin-left: 30px;
}
#yperAboutMyself input {
margin: 0 5px;
}
#yperAboutMyself select {
margin: 0;
margin-right: 10px;
}
/* }}} layout */
/* }}} */
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
May 2 '07 #6

P: n/a
rf

"pbd22" <du*****@gmail.comwrote in message
news:11*********************@p77g2000hsh.googlegro ups.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.
May 3 '07 #7

P: n/a
On May 2, 5:00 pm, "rf" <r...@invalid.comwrote:
"pbd22" <dush...@gmail.comwrote in message

news:11*********************@p77g2000hsh.googlegro ups.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.

May 3 '07 #8

P: n/a
rf wrote:
"pbd22" <du*****@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/...earrow_5x9.gif
Not Found.

--
-bts
-Motorcycles defy gravity; cars just suck
May 3 '07 #9

P: n/a
rf
"pbd22" <du*****@gmail.comwrote in message
news:11**********************@y80g2000hsf.googlegr oups.com...
On May 2, 5:00 pm, "rf" <r...@invalid.comwrote:
>"pbd22" <dush...@gmail.comwrote in message

news:11*********************@p77g2000hsh.googlegr oups.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="yperDashboardMenu">
<li id="yperTabNewSearch" ><em><a><div><div>New
Search</div></div></a></em></li>

</html>

Yep, complete with div within div with a

<css ( from dashboard_173141.css)>

#yperDashboardMenu li.yperSelectedMenu em a div {
background:transparent
url(http://us.i1.yimg.com/us.yimg.com/i/...9eba_arrow.gif)
no-repeat scroll 50% 100%;
left:-1px;
position:relative;
top:15px;
}

</css>

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

Neat idea but a very sloppy implementation.

--
Richard.
May 3 '07 #10

P: n/a
Rob
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:

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

You're welcome
May 3 '07 #11

P: n/a
On May 3, 1:34 am, Rob <robwaaijenb...@hotmail.comwrote:
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:

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!

May 3 '07 #12

P: n/a
Rob
pbd22 schreef:
[snipped]
>
Rob,

Thanks! you rock.
When I lay down, I roll :>)
May 3 '07 #13

P: n/a
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)
May 3 '07 #14

P: n/a
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:#66CCCC;
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:absolute;
left:50%;
margin-left:-6px;
}

May 3 '07 #15

P: n/a
On May 3, 2:02 pm, pbd22 <dush...@gmail.comwrote:
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:#66CCCC;
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:absolute;
left:50%;
margin-left:-6px;
}
oh well.

anyway, thanks a ton for all your help... super
useful feedback. thanks again!

May 4 '07 #16

This discussion thread is closed

Replies have been disabled for this discussion.