Mobile Friendly Website

CSSPLAY

Doing it with style

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

mllsoccerdude:-
In a word... amazing!
(21.03.2006, 02:43)

Perry:-
Stu, I have struggled for months looking for ideas to display things in an interesting way. It is simple, effective and quite brilliant!
(21.03.2006, 09:49)

Gerben:-
I've got some trouble with the tab disappearing when hovering the text with the white(transparent) background in FF 1.0.4. No problem with the brownish border of scrollbar.
Probably due to transparent background-color of the area.
(21.03.2006, 18:12)

Stu:-
Gerben, I have updated the style slightly, but am unable to test on a Mac.
(21.03.2006, 20:41)

paintball:-
I love some Marc Chagall and Picasso examples!
(23.03.2006, 01:29)

kburn:-
Stu, I got tha same prob..
and on IE works fine, but when I open it whi FF 104..
kab00m..
nothing 2 do.. :(

it seems it has a problem on the rollover..
when I roll up on a tab it comes out the section bat when I try 2 browse it, it disappears.. :(

s000 sad
(23.03.2006, 13:11)

Stu:-
kburn, this is a 'bug' in FF 1.0.4 and also Netscape and is due to the overflow:auto; styling. If you remove the fixed height and overflow:auto; it will be ok. It works on Netscape 8 so it will probably be ok on FF 1.0.4 but I will put up a further demo just to check it out.
(24.03.2006, 10:58)

miguelvideosub:-
Hello Stu. One question..Is this example working with more that one line( in this case 3 names), like a table?..I hope you understand me..It would be good idea for replace tables of my videos page..thank you in advanced...
(24.03.2006, 17:38)

Stu:-
miguelvideosub, not sure what you mean. Each artist has their own list item. So you could replace a table of information with this alternative.
(24.03.2006, 20:07)

miguelvideosub:-
I am preparing a simple test, in a few minutes I give an URi of my purposse. I find first problem, that the second line is overlap..In a few minutes a give you the test..thank you.
(24.03.2006, 20:17)

miguelvideosub:-
I have made this fast example to try to explain me what was my question before.At the moment, with IE is more o less ok(still lot to do).With FF the height is not fix...
www.miguelvideosub.net/test/prueba.htm
All the help will be welcome..thank you..
(24.03.2006, 20:41)

Stu:-
miguelvideosub, your main problem is that you are not using a standards compliant !doctype so the quirks mode box model is being used. Change to a valid doctype and it will become easier to work with.
I have a small test page here www.cssplay.co.uk/test/fish.html that shows how I think you want it to be.
This works in IE5.5, IE6, IE7 beta, Firefox 1.5 and Opera 8. I think it works in Safari, but not in FF 1.0.4 and IE5 on a Mac.
(24.03.2006, 21:23)

miguelvideosub:-
Thank you very much. You are a genius...I have so much to learn...Please, can I have permision to use it?....Even that, you have a friend here at Canary Islands...Thank you very much again...
(24.03.2006, 21:35)

Stu:-
miguelvideosub, it's yours ;o) you will need to save the css in external files again as I have embeded them to make it easier to modify.
(24.03.2006, 21:38)

Stu:-
paintball, "I love some Marc Chagall and Picasso examples!", your wish is granted.
(24.03.2006, 22:57)

Carriep63:-
Fantastic! Using the code on my LiveJournal community with a link back of course.
(26.03.2006, 05:17)

Stu:-
More to come soon.....;o)
(28.03.2006, 10:02)

Craig Snyder:-
This is a beautiful design. Viewing in IE6 I see a double menu for the netscape/firefox version. I clicked on all the links and the second row disappeared, and remained gone when the page was refreshed. Weird. Looks perfect in 'fox 1.5.
(29.03.2006, 16:55)

Stu:-
Craig, thanks for pointing this out. There wsa a small error in the ie css where I had .menu22 instead of .menu2 for the hidded non ie links. Corrected now.
(29.03.2006, 18:15)

vynsane:-
i love the look of this. it's perfect for a project i'm working on that presents a narrative of the soweto uprising with boxes that display alternate versions of the facts. however, is there a way to make it click to display instead of hover to display. i don't want it to disappear if the user bumps their mouse by mistake. thanks!
(30.03.2006, 18:37)

ecki:-
Stu,
everytime I visit your website and see your new ideas/demos I'm freaking out like a little kid...like getting a new toy to play with...
This demo is another great piece of work!
(30.03.2006, 21:15)

kburn:-
Oh, th ya stu..
u update it to fit event under FF 1.0.4..
u're tuff dude! :D
(31.03.2006, 17:13)

francky:-
Hi Stu,
Nice demonstration again! :-)
For you browser support lists I have:
- First tab set: also working in Opera 7.54
- Second tab set: also needed for Firefox 1.07 and for Mozilla 1.7.1
- "Third category": both not working in the old Netscape 6.2

Greetings!
(06.04.2006, 03:16)

will:-
I was wondering; I've seen the same kind of effect on some other sites, however some of them pushed the content below downwards so the window does not cover that content. Can this be acheived with css?
(11.07.2006, 06:01)

Thankful:-
In the XHTML code, the a tags are set to class=hide, but hide is not defined in the CSS. Is there a reason for that? I'm curious because I see no effect.

I've been comparing your various examples because I'd like to see a gallery/tab pages that function similiar to this demo, but without the "onmouseout"-type effect. In otherwords, one tabs is default open. As you hover over another tab, it remains open even if you take your mouse off the div area. I've seen how to do div swaps like this using js but not css.
(14.07.2006, 14:17)

Stu:-
Thankful, the hide class is in the style sheet for IE. Although I have since found that it is possible to merge the to styles using bespoke conditional comments that target non IE browsers as well as IE browsers.
(14.07.2006, 15:32)

Antonio:-
Good job, but I am not able to select the text in the "emebedded" divs using Exploerer 6. Can someone tell me if is it possible to make the text selectable and how? Thanks.
(18.10.2006, 16:28)

Cara Cushing:-
first I would like to voice my appreciation for making this website, which has opened my eyes to a lot of really exciting possibilities with CSS.

I am using Firefox 1.0.7 and I wanted to let you know that I have a problem when viewing this demo (as well as I think a couple other demos with embedded links). When I mouse over "Claude Monet" for instance, the box underneath will open up and will stay even as I move my mouse off of "Claude Monet". As soon as my mouse hovers over a spot where a link is on the original layer (i.e. the google ads right below these tabs) the browser seems to interpret this as an attempt to click that link, and it closes the box. I haven't read through all of the comments, so i hope this does not prove to be repetitious). Again, thank you for your hard work on this site.
(10.01.2007, 00:56)

Stu:-
Cara, early versions of Firefox will have problems with some of my demonstrations especially with Google ads and flash. You really should update your version of Firefox as the newer versions do correct security problems and add better CSS support.
(10.01.2007, 09:20)

Josey:-
Hello Stu. I love your site and this demo. I just have a question. If I modify the tabs so that they each have a unique color (by giving each link an id), then the hover no longer works in IE and therefore does not display the drop down. Any ideas?
(18.01.2007, 19:38)

Danita:-
Stu, this is an awesome website. Thanks so much for all the info! Im wondering if I can modify the tabs to stay open with the information and just be able to select and choose which to view without them dropping down. Ive looked all over for something like this that isnt javascript. If you have any ideas Id appreciate it. Thanks!
(22.01.2007, 16:21)

Abus:-
Hi Stu, Hi Guys

I wonder if there is a way to make the first tab appear by default when the page loads.

Best Regards
(01.02.2007, 00:27)

eshu:-
hi Stu!
Really great job indeed, Im amazed...
going around the web, but always coming back to this site and get amazed again...
just when I do that I see what a job is done here ...
I appreciate that, much...

I was wondering about one thing regarding this peace...of course if and when you find it possible...

I was thinking to ad to this tabbed pages some drop-line cascading menu.
I think it would be very practical thing to do .-))

actually Iam mixing a few of your things here but Its 2 much for me now...

having something like that on a front page would be a great space saver, :-))
thx! again...
(30.04.2007, 15:16)

Bob:-
Just getting started with CSS and found your site. Lots of great stuff here. I found the tabbed pages page and was wondering if it is possible to have one of the tabs show its content as a the default tab. Make sense?
(30.05.2007, 21:23)

Alex:-
Hi Stu - this is fantastic! Can't believe all the work you have done!!

Is there a way to modify this example so that one pane is always visible. Ie. when you load the page up, pane 1 is visible and as you hover over the menu items the pane just changes content, it doesn't disappear?

Many thanks!
(15.06.2007, 09:51)

Fab:-
Problem with "Cross browser tabbed pages with embeded links"

Hello,

I'm just having a problem with your solution with IE 6+ and Opera 9+.... Firefox is ok.

I have tried to put inside a tab page a form.Everything seams to be working but for the element <SELECT> there is a little problem.

When you try to select a voice the complete flyout menu disapears. I have tried to fix the problem but without success.

Any suggests?

Great job.
(14.09.2007, 16:50)

Eric:-
I, as well as others, wanted to have one of the rollovers displaying when the page first loads, so here's how I did it (using the two_page.css/html):

Line 53 of the two_page.css contains the line .menu2 ul li:hover a {. This triggers the rollover effect. Knowing that, I added this CSS to that line (.menu2 ul li:hover a, .menu2 ul li.active a {) and then I added a class="active" to line 4 of the HTML code (two_page.txt if you downloaded Stu's file). This will keep the rollover trigger in the 'on' state when the page loads. Now for the content...

Line 58 of the CSS contains the hover state for the content (.menu2 ul li:hover ul {). I added my active state here as well (.menu2 ul li:hover ul, .menu2 ul li.active ul {), then I added the class call to the HTML at line 11 <ul class="active">.

If you want to see it in action, go here: med.uth.tmc.edu/departments/insideuthouston/. The area where I used it is the main photo along with the rollover to the right of the photo.
(19.09.2007, 19:04)

Eric:-
Hi Stu,

Noob here. I must say, the collection of your CSS work is an inspirational and educational.

I'm a bit type-sensitive, and I noticed that the P's with a link in them have the line height blown out, while the p's without are more closely spaced. Is there a way to compensate for, or correct, the effect the link is having on the line height? Thanks...
(25.02.2008, 06:08)

Dave:-
I have modified this to list the links vertically on the left instead of horizontal. I am using it to display a lot of content that had to go on a home page. There is a problem however, the drop down menu at the top of the page is showing below the tabbed pages box...

I messed around a bit with z-index on both the top dropdowns and the tabbed pages, but it refuses to cooperate with me, any ideas?
(28.02.2009, 07:02)

John:-
Hello Stu, Thanks for all the great CSS studies. With menu 2 of this example, I see your content of varying lengths sometimes overflows what's below it. Can it be made to push down the remaining page content, or is that only possible with JS?
(25.10.2012, 00:45)

Stu:-
It would be possible to push down the content by adding extra styling to make the containing element grow vertically to match the height of the tabbed pages.
(25.10.2012, 08:16)

John:-
Sorry, feeling like such a novice right now. The content of the tabbed page is kept in an absolutely positioned UL tag. Are you saying the styling would need to be applied to the LI tag which contains the UL or are you talking about a container above (outside) of that? Thanks again. Was pleasantly surprised by the quick response.
(27.10.2012, 02:44)

Stu:-
Cannot guarantee this will work without testing, but if you add the following style to the first version then it should push down the content below.
.menu ul li:hover {height:200px;}
(27.10.2012, 08:24)

John:-
Stu, that does work, sort of. Applying that to your menu2 though, are you saying that the height would need to be explicitly defined for each tabbed content area? No way you are aware with CSS to have it automatically expand to fit the content (and still work in IE8)? Specifically, I'm referring to the Claude Monet and Marc Chagall tabs in your menu2. Their content covers the "No javascript - just CSS - and it validates" tagline, while the others don't.
(29.10.2012, 21:56)

Mark Stewart:-
Stu, can you 'adjust' this demo so that the top tab-line with three links pushes down the following tab-line with five links. Then you demonstrate a "push-down" and an "overlay" in the same demonstration.
(23.03.2013, 18:22)



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