Mobile Friendly Website

CSSPLAY

Doing it with style

Flicker free 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

Cassie:-
Thanks for this great css! However, I can't get it to center properly. I have a page with a header, left column, right/center column, and a footer.

However, I also use negative margins. For whatever reason, no matter what I do, I can't get this list to center! Setting margin to auto for left and right doesn't do it...is it getting offset by the negative margins?
(23.08.2006, 14:11)

Oliver:-
Stu, is "height:0" in your code line below a typo or required?

#menu a {display:block; float:left; width:100px; height:0; overflow:hidden...

In Opera 8.54 Win/XP it will only work, if it's set to the actual height (100px in the example).
Other browsers (IE, FF) don't bother whether the value is 0 or 100.
(19.09.2006, 10:46)

Roy:-
Any luck finding any way to make this work in safari?
(06.11.2006, 16:41)

Stu:-
Oliver, if you set the height to anything other than zero the text will be displayed over the image.
Roy, no answer to the Safari bug.
(09.11.2006, 10:17)

mMark:-
I got this working in Safari without too much trouble. I was having the same errors as the other people.

Remove the "background:" part from "#menu-ul a". Everything from "background" to the ";"

paste
"background:transparent url(/images/buttons-hi.gif);"
(nothing else, just the above code. Replace the URL with your own.

into each line of "#menu-ul a#item1:hover" and it should work.

It's more code, I know. But if it works, so what? Functions fine in IE7, FF2 & Safari 1.3.2 (tested Mac & PC)

Hope this helps someone.
(28.11.2006, 09:37)

mMark:-
re. my Mac fix:

Oops! I renamed the "menu" div to "menu-ul" in my code. Please read "menu-ul" as "menu" in my fix.

Will still work, sorry for the confusion!
(28.11.2006, 09:39)

Renata:-
Thank you mMark. This helps me a lot. I built a similar navigation for a german site:
www.pspromotion-bremen.de/
Now it runs even on Safari.
Thanks to Stu for these fine css-menus.
(13.12.2006, 14:00)

Roy:-
just checking back to see if you got this to work in safari. i found an article somewhere explaining it! you just put extra space under or to the side of the images. i found that tripling the hight with transparent space below the actual image does the trick, but i was using it for a more horizontal image. if you save the images as pngs or gifs the transparent space doesnt add much at all to the file size :D
(20.12.2006, 16:18)

Daniel:-
Here is a solution for Konqueror 3.4.2. As mentioned before, the hover image (menu_col.jpg, 5 active in my case) is always displayed.
removing 'background:transparent url(menu_col.jpg) no-repeat 500px 500px;' in the '#menu a' and adding it each menu hover item does seem to resolve this issue. I don't know if this is the best solution, but it also keeps on working in FF1.5, IE6 and Mozilla 1.7.
(15.04.2007, 15:27)

Bram:-
Hi Stu, what a fantastic piece of css. I am looking forward on using this on my website and have been playing with it for a while now.
I would like to use the gallery as a navigation to my portfolios. All is fine so far. But when i try to introduce "selected" it all goes horribly wrong (so on selected page only one of the images has to stay in color). Would you have any hints on introducing "selected"?
(21.10.2008, 13:17)

10 of 38 comments (part 1). [ » ] [ * ]



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