How Do You Use Your Tab Container?

[Randy L. Vollett]

I must say that the Tab Container is the best invention since the Peperoni Pizza. This little container has a powerful and unlimited array of uses. I have been using my simple slider for advertizing and linking to other parts of our site, but it does drag it down with a lot of coding and load time. With the Tab Container i now can make categories for our village resources and just place a simple link without any extra coding. Less coding the better.

This is just a  simple simple example what i use the Tab Container for. Although i am removing the code for the slider i am adding this easy and attractive vertical tabs that John Bizley's made that you can get HERE.

Because what ever content you add there will always be an open tab with content, so to make my container look closed i just added an HTML box and uploaded a 1x1 px transparent pic and titled the tab Select Category or you can just type a small message that would describe your content subject in the blank area you see here.


Here is my selected tab with my content and a link to my parts page. So why don't i fill just one box with all the links and parts descriptions? Because i don't want my box to be any longer on my page than shown here. It keeps my subjects clean and organized as the Tab Container was intended to be. If you don't want your box to expand down when you select a category just omit the Select Category tab and have an active tab open all the time, but make sure each content is the same size.


Show us your creative ways to use the Tab Container here.

[Kos]

I'm slow to grasp new things (something about an old dog and new tricks) and I've struggled with Tab Containers so I really appreciate you sharing this.  Maybe others will chime in with other uses.

[Randy L. Vollett]

Your welcome Kos. At first i was scratching my head wondering what it could really be used for, but when SE and John lined up the tabs nice and pretty the light bulb started burning. :)

[Kos]

Bekah All I can say is.....wowwwww.  Just beautiful the design work you have done thus far and you're right; your examples demonstrate how a large amount of data can be combined in a small area using tab containers.  Thank you so very much for showing us these examples.  I know when they handed out the creativity gene, I must've been holding the door.   Don't have a creative bone in my body.  You and Randy are light years ahead of me.  *lol*   Love it.

[Kos]

Bekah All I can say is.....wowwwww.  Just beautiful the design work you have done thus far and you're right; your examples demonstrate how a large amount of data can be combined in a small area using tab containers.  Thank you so very much for showing us these examples.  I know when they handed out the creativity gene, I must've been holding the door.   Don't have a creative bone in my body.  You and Randy are light years ahead of me.  *lol*   Love it.

[Kos]

If only I were as talented as SweetPotato; it would duck soup.  lol

[Kos]

If only I were as talented as SweetPotato; it would duck soup.  lol

[C.Brickhouse]

your site is the bomb i love the way you brought it out of the ning norm i would love for you to look at my site and give me some ideas unsignedblast.net  if you have time but 2 thumbs up on your site bekah..

[Alyce Keegan]

Bekah your tab containers look awesome!! How do you get them looking like actual tabs rather than the big clunky boxes that is standard? :)

[soaringeagle]

css

you can make em look any way you want them

[soaringeagle]

http://ww3.dreadlockssite.com

see u can really make em look good with just a touch of css

ps cclick community or forums or photos  for better examples

[soaringeagle]

2 notes

box shadoew and border radius need compatability codes ill explain in a sec but also well i see u sid it with the last 1 box shadows text shadows  etc can be layered

you see you can have box-shadow:0 0 1em .1em red inset, 0 0 1.4em .2em blue inset, 0 0 .3em .1em lightgrey : therefore having 2 inset with diferent colors and  ranges and 1 outset

andsoimplty switching from inset to outset on hover can give a grety button push effect

but back to compatability

control f in notepad to find border-radius then do same for box shadow

now every

border-radius:2em;

select and copy

clickk b4 the b and type -webkit- (then ctrl v to paste) then -moz- (paste)

so you have -webkit-border-radius:3em;-moz-border-radius:3em;border-radius:3em;

and for your lastr bhox shadoiw it would look like

-weblit-box-shadow:3px 4px 9px 1px black inset, 0px 0px 20px 1px silver inset;-moz-box-shadow:3px 4px 9px 1px black inset, 0px 0px 20px 1px silver inset;box-shadow:3px 4px 9px 1px black inset, 0px 0px 20px 1px silver inset;

that way it looks the same in every browser

[soaringeagle]

2 notes

box shadoew and border radius need compatability codes ill explain in a sec but also well i see u sid it with the last 1 box shadows text shadows  etc can be layered

you see you can have box-shadow:0 0 1em .1em red inset, 0 0 1.4em .2em blue inset, 0 0 .3em .1em lightgrey : therefore having 2 inset with diferent colors and  ranges and 1 outset

andsoimplty switching from inset to outset on hover can give a grety button push effect

but back to compatability

control f in notepad to find border-radius then do same for box shadow

now every

border-radius:2em;

select and copy

clickk b4 the b and type -webkit- (then ctrl v to paste) then -moz- (paste)

so you have -webkit-border-radius:3em;-moz-border-radius:3em;border-radius:3em;

and for your lastr bhox shadoiw it would look like

-weblit-box-shadow:3px 4px 9px 1px black inset, 0px 0px 20px 1px silver inset;-moz-box-shadow:3px 4px 9px 1px black inset, 0px 0px 20px 1px silver inset;box-shadow:3px 4px 9px 1px black inset, 0px 0px 20px 1px silver inset;

that way it looks the same in every browser

[Kos]

SE ouc