3D Tabs with CSS2

The Code

For the most part, I'm going to use the same code I did for the CSS tabs. I will only make note of where the changes are. If you need an explanation of anything not noted, it's most likely in the previous article.

<%
dim arTabs( 5 )
arTabs( 0 ) = "home"
arTabs( 1 ) = "events"
arTabs( 2 ) = "news"
arTabs( 3 ) = "photos"
arTabs( 4 ) = "users"
arTabs( 5 ) = "admin"
%>

<div id="everything">

So this time I'm wrapping everything in one div, appropriately named 'everything'. This is so that I can set it to the same width as the image we created, and all the child nodes to inherit the width, without having to set them individually.

<div id="navTabs">

<%
dim theClass, thisPage

thisPage = Request.ServerVariables("SCRIPT_NAME")
thisPage = replace( right( thisPage, len( thisPage ) - inStrRev( thisPage, "/" ) ), ".asp", "" )

for i = 0 to uBound(arTabs)

if thisPage = arTabs(i) or left( thisPage, len( arTabs(i) ) ) = arTabs(i)
  then
    theClass = "on"
  else
    theClass = "off"
end if

response.Write("<div class=""tab" & theClass & """ onclick=""javascript:window.location='" & arTabs(i) & ".asp'"">")

Response.Write("<img src=""" & theClass & "_l.png"" />")

Response.Write("<div class=""tabItem""><img src=""" & arTabs(i) & ".gif"" align=""absmiddle"" />&nbsp;")

Response.Write( replace( arTabs(i), "_", " " ) & "</div>" )

Response.Write("<img src=""" & theClass & "_r.png"" /></div>" & vbCrLf)

next
%>

This time you'll notice a couple extra items. I inserted the images into each tab, on the left and right. I also added in two divs below. One is for the bottom corners, and the actionPanel is the main panel, where we'll tile the center slice, and where you'll put all the elements and functional pieces of the page.

</div>
<div id="actionPanel">stuff to do</div>
<div id="btm"></div>
</div>