PayPal Tabs

[Dysan]

How do I make tabs like PayPal.com, that resize upon the user resizing the browsers text size?

[benracer]

View the source, cut it down in a text editor. Do the same for the css sheet find the class and id set the tag.


#navPrimary {clear:both; z-index:2; position:relative; min-height:6px; border-bottom:1px solid #fff;}
#navPrimary ul {overflow:auto; margin:0; padding:0 0 0 10px; background:url(/WEBSCR-500-20080222-1/en_US/i/pui/core/nav_main_bg.gif) bottom left repeat-x; list-style-type:none;}
#navPrimary ul.secondary {margin-bottom:2em;}
#navPrimary ul li {float:left; margin:.45em .45em 0 0; padding:.27em .9em; background:#1A4773 url(/WEBSCR-500-20080222-1/en_US/i/pui/core/nav_prim_bg.gif) top left repeat-x;}
#navPrimary ul li:hover, #navPrimary ul li.hover {background:#1A4773 url(/WEBSCR-500-20080222-1/en_US/i/pui/core/nav_prim_bg_hover.gif) top left repeat-x;}
#navPrimary ul li a {display:block; color:#fff; font-weight:bold; text-decoration:none; text-align:center;}
#navPrimary ul li.active {margin-top:0; border-left:1px solid #ccc; border-right:1px solid #ccc; padding:.7em .9em .5em .9em; background:#f8f8f8 url(/WEBSCR-500-20080222-1/en_US/i/pui/core/nav_prim_bg_active.gif) top left repeat-x;}
#navPrimary ul li.active:hover, #navPrimary ul li.active {background:#f8f8f8 url(/WEBSCR-500-20080222-1/en_US/i/pui/core/nav_prim_bg_active.gif) top left repeat-x;}
#navPrimary ul li.active a {color:#333;}
#navPrimary ul li ul {display:none;}
#navPrimary ul li.active ul {display:block; overflow:visible; width:100%; position:absolute; top:2.3em; left:0; padding:0; background:url(/WEBSCR-500-20080222-1/en_US/i/pui/core/nav_second_bg.gif) left bottom repeat-x;}
#navPrimary ul li.active ul li {margin:0; padding:.45em .9em .8em .9em; background:transparent none;}
#navPrimary ul li.active ul li a {display:block; color:#1C4266; font-weight:normal;}
#navPrimary ul li.active ul li a:hover, #navPrimary ul li.active ul li a:focus {text-decoration:underline;}
#navPrimary ul li.active ul li.active:hover, #navPrimary ul li.active ul li.active {border:none; background:none;}
#navPrimary ul li.active ul li.active:hover{text-decoration:underline;}
#navPrimary ul li.active ul li.active a {color:#333; font-weight:bold;}
#navPrimary ul li.active ul li.active a:hover {text-decoration:none;}
#navPrimary ul li ul li ul, #navPrimary ul li.active ul li ul {display:none;}
#navPrimary ul li.active ul li:hover ul, #navPrimary ul li.active ul li.hover ul {display:block; z-index:10; width:auto; left:auto; margin:-.1em 0 0 -.9em; border:1px solid #ccc; border-top:none; padding:0 1em; background:#fff;}
#navPrimary ul li.active ul li:hover ul li, #navPrimary ul li.active ul li.hover ul li {float:none; margin:1em 0; padding:0;}
#navPrimary ul li.active ul li:hover ul li a, #navPrimary ul li.active ul li.hover ul li a {display:inline; text-align:left;}
#navPrimary ul li.active ul li:hover ul li a:hover, #navPrimary ul li.active ul li.hover ul li a:hover {text-decoration:underline;}
#navPrimary ul li.active ul li.active ul li a {color:#1C4266; font-weight:normal;}



<div id="navPrimary" class="srd"><ul>
<li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_home-general&amp;nav=0" onClick="s=s_gi('paypalglobal'); s.tl(this,'o','SRD:Nav:L5');">Home</a></li>
</ul></div>

[rulian]

thats simple, set the imagery source as the background of a scaleable element like a div or table cell. as the text grows so does the elemetn that is holding it. If you notice the imagery behind the text does not grow, just the box. So just let your imagery to repeat only X, have your imagery and background behind it go into the same color and presto