Mobile Friendly Website

CSSPLAY

Doing it with style

Mini tabbed pages COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

BillyG:-
This one is top notch Stu, kinda misleading cause I love all your tweaking, but this one is just incredible IMO

as usual, only Stu knew!
(09.02.2007, 23:55)

Todd Reid:-
Stu: Truly a genius approach to "breaking out" of the plain old, standard way the most website are designed...bravo!!!
(10.02.2007, 20:32)

Rod Le HibOO:-
incredible ... you do things as good as Jquery but ... without JQUERY ! :)
(10.02.2007, 23:27)

Shane:-
This much resembles the Yahoo! thingy... i had trouble duplicating it seems like you forgot .clear in the css code, or I'm really bad at duping either way, i love it =D
(12.02.2007, 05:12)

Stu:-
Shane, the similarity is unintentional as I do not visit Yahoo. Theirs will not work with javascript disabled. Mine is actually a development of one of my previous demos www.cssplay.co.uk/menu/one_page.html

The .clear is in my default stylesheet as is the font family, size and default link style.
(12.02.2007, 08:27)

Condor:-
Just noticed something:
- Select the PROFILE tab.
- Double click on the login input.
- Hover the mouse over the auto-complete dropdown.
- The tab collapses !
(Tested both IE6 and FF2)
(13.02.2007, 07:41)

San:-
You are unbelievable. You save me all the time.
(13.02.2007, 17:20)

RuneS:-
I tested this on an already existing webpage, and on a new one I created, and when I hovered the tabs, they pop up where they feel like it, inside the table.
This only happens in Firefox 2.0
IE displays it as intentioned

Keep up the good work, Stu ;)
(21.02.2007, 11:02)

Johny:-
Excellent work Stu!
(22.02.2007, 22:39)

Daniel:-
Stu - fantastic site and great mini tab style sheet. I'm having a similar problem as RuneS - the tabs seem to pop up haphazardly. This occurs in Firefox. In IE, the tabs don't pop up at all. Can you help me determine what I am missing? Below is the link. Thanks!

www.geocities.com/moravia98/tabbed.htm
(08.03.2007, 08:00)

Stu:-
Daniel, you will need a standards compliant doctype and this should be the first line of the html. It looks like you are using a site that writes a header that will switch IE etc into quirks mode.
(08.03.2007, 22:15)

Daniel:-
Stu - thanks for the quick reply. Stupid miss on my part.

RuneS - if you are still checking this forum, the Firefox error is caused when you leave out the link to the "css_play.css" file. That style sheet affects some of the fonts (among other things) in the mini tab table.
(09.03.2007, 04:36)

Ryan:-
Hey there... I'm designing a website for my school and need this to finish the site. My plan is to have this looking thing

Student | Teacher
--------
Student Link 1
Student Link 2
etc.

Is there any way that you could give me the exact code for this? If so, it would be greatly appreciated :)

RyanTown [AT] Gmail [DOT] com

Thanks,
Ryan
(23.03.2007, 15:29)

maurizio:-
where can i take the images for the backgrounds ?
(03.04.2007, 10:58)

Bas:-
Hi Stu,

I've been studying CSS for a couple of weeks now by copying, modifying and rebuilding your examples. Steep learning curve! Thanks for that. :oD

I just can't seem te get this tabbed thingy to work. The background GIFs I copied, can't seem to get the JPGs, though.

I tried to rebuild this menu. Everything works except the jpg-part. I remade the tabs, but as soon as the mouse hits the tab, it disappears. All other tabs remain visible, except the tab that is being activated.

I can't seem to figure out why this happens. What am I overlooking?

Thanks,
Bas
(30.04.2007, 17:54)

Daniel:-
Stu - I seem to have a problem keeping the mini tabs functional in both FF and IE. If the code starts with the standards compliant doctype, it works fine in IE. But not in FF. If I remove the doctype line completely (or have anything above it) it works fine in FF, but not IE. Do you know I am doing wrong? Here is a link to the template I'm working from: www.geocities.com/moravia98/nathan/2.htm

Thanks for your help.
(09.06.2007, 07:40)

Stu:-
Daniel, your ISP is adding markup to the top of your pages which is switching the browsers into quirks mode. This is causing your rendering problems.
(12.06.2007, 17:35)

Robert:-
Stu, where did you get the images for this examples? They are top notch and I would like to see if there are others in the collection?

Also, this is a very nice tutorial and one that I desparately needed. In fact, the layout was what I needed, but the fly-outs are a nice bonus. Well done.
(26.06.2007, 20:03)

Thaumas:-
Condor wrote @ 13.02.2007, 07:41
-----
Just noticed something:
- Select the PROFILE tab.
- Double click on the login input.
- Hover the mouse over the auto-complete dropdown.
- The tab collapses !
(Tested both IE6 and FF2)
-----

-> I've the same problem. If I insert a dropdown menu into one of the 'tabbed pages' in IE & Opera, and I move the mouse over it, the tab collapses. In Firefox 2.0.0.3 btw there is no problem.

I can't find a solution. Anybody who does?
Thnx!
(30.09.2007, 03:50)

Deepti P.:-
Does this CSS work on IE 7. It doesn't seem so. Anybody else with the same problem???
(04.10.2007, 08:44)

Stu:-
Deepti P, this works in IE7. Check that you are using a standards compliant doctype.
(04.10.2007, 13:13)

Deepti:-
Hi Stu, I want to keep one of the tabs open by default, i.e., when the page loads, the first tab should be kept open. Is there a way to do it? Please help.
(24.10.2007, 10:43)

bobvaz:-
Stu: Is there a way to float the content of each tab...i.e., if there are 12 lines to be displayed under the world tab how do you make the body of the tab float? thanks in advance
(25.12.2007, 20:33)

Curtis:-
wheres the link to downlaod this css file?
(07.08.2008, 13:51)

a.komyat@gmail.com:-
Hello , It is a fantastic resource on the web.I have been looking for a script like " Mini tabbed pages " for my little site (online lottery results in Myanmar (Burma)).I would appreciate you so much if you can let me use your code for my little site. Thanks !
(04.12.2008, 14:18)

James:-
Hi Stu,
I was wondering if it's possible having one of the tabs "open" as default when you first load the page.
Is this possible without the use of javascript?
(07.04.2009, 12:01)

John:-
Hi Stu,

Some really GREAT stuff on your site. Very admirable that you take the time to go through each little aspect of CSS and know it forward and backward.

I have the same question as James, but I wanted to make one thing clear. You have one version of this that uses javascript and one that uses hovers. My question is specifically regarding the one that uses hovers.

Is there a way, without using JS, to (1) have the content come up open on a default tab (say World) and (2) still allow the user to hover over each tab and see the content for that particular tab. In this scenario, the content area would always be open; don't need it to expand and contract as different tabs are pressed.

Thanks much in advance.
John
(21.07.2009, 23:17)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page