Reply
Tabbed Box
Old 02-17-2008, 11:47 AM Tabbed Box
Super Talker

Posts: 135
Name: Josh
Hey guys.
Currently for my website im trying to make a box of content for a site im working on.
What I want is so that I would have a box with 3 tabs on the tpo and when a tab is clicked on it displays different content.
It would look something like in the attachment (but better).

Ive found an example, its almost exactly how i want it to look:
http://www.swindontownfc.premiumtv.co.uk/page/Home/
If you scroll down, they use about 4 tabbed boxes, i think the first one is called 'partners'.

One thing, i know it can be done without the use of javascript and so please can no-one suggest the javascript method.

Thanks.
Attached Images
File Type: jpg tabbedbox.jpg (22.6 KB, 5 views)
Joshy D is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
     
Old 02-17-2008, 02:30 PM Re: Tabbed Box
bas
Skilled Talker

Posts: 66
Name: Bas
Location: Belgium
You can use CSS to hide and show content, but the mechanism for showing and hiding different content after clicking can’t be done with CSS.

According to me there’s (except when you use frames to show the content) no possible way to do this without JavaScript.
__________________
Don’t hesitate ... Talkuptation points are safe with me!
bas is offline
Reply With Quote
View Public Profile Visit bas's homepage!
 
Old 02-17-2008, 03:00 PM Re: Tabbed Box
chrishirst's Avatar
Super Moderator

Posts: 11,897
Location: Blackpool. UK
Can't be done with CSS only
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 02-18-2008, 04:26 AM Re: Tabbed Box
Super Talker

Posts: 135
Name: Josh
im sure ive seen it done without javascript before. o well.
i gues i'll have to use js then.
thanks, anyway guys.

EDIT: Hey just noticed the emphasis on the word 'clicking' in bas's post, whats that about, does he mean it can be done if you like, hover over it or something?

Last edited by Joshy D : 02-18-2008 at 04:27 AM.
Joshy D is offline
Reply With Quote
View Public Profile
 
Old 02-18-2008, 08:04 AM Re: Tabbed Box
dansgalaxy's Avatar
Eat, Sleep, Code

Posts: 5,889
Name: Dan
Location: Swindon
Yes josh, i believe it is possible to use pure css to have it so if you hover over it it changes...

but this could be very annouying...
__________________
Personal UK Webhosting
Get 25% of ANY shared package for life ~ Promo: webmaster-talk (only for members!)
dansgalaxy is online now
Reply With Quote
View Public Profile Visit dansgalaxy's homepage!
 
Old 02-18-2008, 08:06 AM Re: Tabbed Box
Super Talker

Posts: 135
Name: Josh
Ok, i've found something that is exactly how i want it, its exactly what im trying to make, but, theres no learning in copying and pasting so this is what im trying to achieve, how can i do that thing with the tabs?
http://www.cssplay.co.uk/menu/slide_show

EDIT: Link fixed.

EDIT 2: It's alright guys, im sure i can work it out. Thanks anyway.

Last edited by Joshy D : 02-18-2008 at 08:13 AM.
Joshy D is offline
Reply With Quote
View Public Profile
 
Old 02-20-2008, 06:28 AM Re: Tabbed Box
RadGH's Avatar
Experienced Talker

Posts: 44
Name: Radley
I've seen some web templates with tabs that use seperate pages for each tab. I don't know if thats what you're looking for though.

But if thats the case, just use an external style sheet applied to each page, and to make the tab effect just make one of the tabs have an id called "selected". Just make the "selected" tab correspond to the page you are editing.

Of course with this, updating your site is a nightmare... (unless you use PHP to include the base of the template, and then edit it globally)

EDIT: See here for a "pure CSS tabbed navigation" example.

Last edited by RadGH : 02-20-2008 at 06:29 AM.
RadGH is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Tabbed Box
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.16023 seconds with 14 queries