Mobile Friendly Website

CSSPLAY

Doing it with style

fixit mk4 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

DCElliott:-
s7u, have you considered making the menu grow UP with changes of font size. It is possible if the menu selection blocks are positioned absolutely with bottom:0 relative to the header section. I find this helpful when doing menus using fixed height headers.

Most of all, though, thanks for the nicely worked out examples you provide - it is a real service to the community.
(30.04.2004, 16:54)

Stu:-
Thanks. I think that for changes of font size it would probably help to have a full width fluid layout with the header defined in em height which would then allow for any change in font size. A bit like this page which has a header that will not break even with the largest of font sizes.
(30.04.2004, 22:00)

Marf:-
I agree. The variety of what you have displayed has been such a great help to me as I try to get a grip on what CSS can do. I've learned a good deal here today - thank you.
(12.05.2004, 20:34)

sparky:-
This is awesome. Great with so many exmamples you get css in huge perspective. Thanks alot s7u
(10.06.2004, 16:50)

djmaniak777:-
is it possible to move the scrollbar to the usual right hand position and still be able to move the content section?
(28.06.2004, 22:55)

Stu:-
Certainly is, but the scroll bar then becomes full height. Have a look at http://www.penname.co.uk/
(29.06.2004, 08:22)

Kasia:-
This page design/css is very helpfull! However, it does not show up in IE for Mac (v. 5.2) running on OSX ... any ideas on alternate stylesheets or other hacks that might help matters?
(29.07.2004, 04:43)

Stu:-
Unfortunately I do not have access to a Mac to test out any alternative styles. Sorry.
(29.07.2004, 22:05)

Bob:-
I loved your design so much I built a new site based on your structure. I'm very close to launching this project of more than 200 pages. While visiting a friend, I looked at my presite and noticed the template wasn't working. (Mac using IE) Came home and tried it on Opera 6.02 and have the same problem. Text overflow with no scroll bar. I'd love any suggestions on how to fix this. I tried Overflow:scroll but that didn't work. I've been testing on IE and NS and it's been working great.
(31.08.2004, 07:03)

Stu:-
Sorry Bob, but I do not have access to a Mac so I cannot comment. My layouts are tested in all the latest PC browsers.
(31.08.2004, 20:21)

jana:-
at first sorry my engish is really worse but i adore your helpfull and great made sit

special thx from siegen/germany
(07.09.2004, 11:53)

David:-
How do you get the content to center align? My site is designed for 800x600 but if the screen res is larger I would like the site to sit in the middle of the page. Thanks
(11.10.2004, 13:55)

Stu:-
David, the answer is in the css. If you look at the style for #content you will see~
width:640px;
margin-left:-321px;
left:50%;
(11.10.2004, 19:42)

feel4real@hotmail.com:-
top graphics greate choice of layout but tell me is it me who only finds the font a load of bollox all that effort and the simplest thing let you down change it and see what results you get
(17.11.2004, 01:06)

Coen Naninck:-
Although the fixed layout works in Mozilla, the Mousewheel on my Logitech MX500 (w/ cord) doesn't respond correctl;y to the scrollbar. It scroll the entire page including the fixed parts by 1px or so vertical. Manually scrolling the scrollbar does however work.
Too bad that doesn't work.
(24.11.2004, 09:57)

John A:-
Can you provied some pointers for getting pages to display correctly in IE? I started with your frames layout 3. I adjusted colors, fonts, etc. Got all looking great in Mozilla, then looked at it in IE, and my header and left sections are missing. This happened once before and I basically had to start over. I thought I fig'd out what it was but I guess not, as I just can't seem to get them to "reappear" in IE. Is it supposed to be this painful to design web pages?
(29.11.2004, 21:08)

Sondre Bjellås:-
It seems your 'Fixed' layout version 1 fails when the XML declaration is removed. Doesn't this mean the design does not work in IE6-Standard-Mode?
(13.12.2004, 10:01)

Stu:-
Yes. IE needs to be in quirks mode for this to work as it needs the faulty box model.
(13.12.2004, 10:06)

Sondre:-
I'm in the need of a very specialized fixed layout and having a hard time getting it to work correctly in standard-mode:

Main page has top bar of aprox. 100px height, static.

Left bar is aprox 200px wide, and the main region takes up the rest of the content.

Now inside the content region I have an <iframe>, and on that child page I'd like to have a top toolbar which is static, and a bottom bar. Then in the middle of this child page, I'd like to have a scrollable region. I've almost got it, the only problem I have now is that I have to specify exactly pixel height on the middle area to make it display scrollbars, else the whole region is just expanded to the size of the content.

Any ideas?
(13.12.2004, 10:47)

Sondre:-
Here is a mock-up of the layout I just described: http://fanms.com/files/layout.jpg
(13.12.2004, 10:59)

Hsuan-Su:-
Hi,Stu,thank you for all your creative works sharing here.Today I was inspired from Layout1 and made a page.The difference is I used a background image in div "content". Well,when I change my screen resolution to 1280*1024,the pic would not change as the head and bottom,I just don't now what to do,maybe you would like to take a look.
http://kevinyang.myweb.hinet.net/
play-arch/play931209.htm.
The article was written with traditional Chinese(Big 5) .
(13.12.2004, 14:19)

Stu:-
Hi Hsuan-Su, I have had a look at your page but can only go up to 1024 x 768 resolution at the moment. It all looks ok but the content image doesn't line up with the header and footer images.
As I cannot view in 1280x1024 I am unable to see your problem (perhaps a screen shot may help).
(13.12.2004, 16:10)

Hsuan-Su:-
Stu,thanks for replying.
Yes you're right about content image.I made a mistake of cutting wrong size .After resizing, the image still isn't able to line up with footer,cos' the image is larger for 1280*1024 resolution.If I have had used smaller image,there would be a blanket band between image and footer.
I have put one screen shot of 1280*1024 resolution on web.
http://kevinyang.myweb.hinet.net/
play-arch/shot02
I hope my bad English express what I thought.
(14.12.2004, 03:06)

chris:-
your example works fine, but on my own page the overflow with * html #content {height:100%;}
don't work in ie6! height:123px works. any ideas why?
(16.12.2004, 20:15)

Jeri:-
Has this been tested on the older (but not antique) Mac IE browsers. I tried to access it from a Mac running OS 9 with IE 5.1 but all I got was a blank page. It was fine on Netscape 7.0.
(14.02.2005, 03:46)

Jeri:-
Just to add to my above comments. Have checked the site on MAC OS X. Blank pages on both IE 5.2 and Safari 1.0. Displays fine in NN 7.2. IE 5.2 was actually a fairly good browser for it's time. Comparable to IE 6 for PC. Are you using some type of detect script that may be scaring thses browsers away?
(14.02.2005, 13:28)

TrePe:-
Thanks for your work. I would like to ask how to solve the problem, when the browser's window width is smaller than #content's width. Changing overflow to auto for body partially works, but the left part is still hidden. Thank you.
(05.04.2005, 15:50)

Idonus:-
To avoid hiding everything for IE/Mac users because of html {overflow:hidden;}, you can make advantage of a bug in IE/Mac, the following piece of code will not be read by IE Mac:

/* hide from IE Mac */
html {
overflow:hidden;
}
/* einde */
(12.04.2005, 14:37)

Idonus:-
No I did not forget: Stu, thank you very much for all your layout-examples!
(12.04.2005, 14:39)

Stu:-
Hi Idonus, I cannot check that this works but I have added it to this page style. Can any Mac owner confirm that it's ok now? If so I will change all the pages to suit.
(12.04.2005, 22:39)

Idonus:-
Hi Stu, thanks for your reply, you can check it yourself, on http://www.browsercam.com. You can register to try it for one day. Also the more exotic browser/platform combinations(konqueror/linux for example)
(14.04.2005, 14:41)

Idonus:-
By the way, I saw there is a slight error, it has to be like this (note the Forward slash):

/* hide for IE Mac */ html { overflow:hidden; } /* end */
(14.04.2005, 14:45)

Idonus:-
mmmmm there's something in your scrip that strips the forward slash, where I wrote the word 'forwardslash' there has to be a forward slash

/* hide from IE Mac forwardslash*/ - html { - overflow:hidden; - } - /* einde */
(14.04.2005, 14:46)

foxtrot:-
TO TOP button in the scroll area-
hello Stu - I was wondering how to make a TO TOP
button in the Layout 1 scroll area.

I have already tried out several possiblities
but nothing seems to work:

1) <a href="#top" class="top">top</a>

2)<a href="#top" class="top"><img src="i/but-totopgeel.gif" alt=""
align="right" border="0" height="20" width="20"></a>

3)<a href='javascript:scroll(0,0);'>to top</a>

also just under the body tag I have:

<a name="top"></a>
<a name="top" id="top"></a>

Suggestions welcome!
(23.04.2005, 14:44)

rabbit:-
TO TOP button in scroll area. Hello Foxtrot.
The answer is pretty simple: instead of putting
<a name="top"></a> and <a name="top" id="top"></a> under the <body> tag put them DIRECTLY underneath the (div id="content"> tag.
This works fine.
(23.04.2005, 14:55)

Charmane:-
erm....where is the source for this layout?
(10.11.2005, 10:20)

formatc.co.nr:-
three words:
ABSO. LUTELY. AWESOME.
(06.02.2006, 00:38)

Eric:-
Stu: is it possible to load different content in the content frame? you know, as a traditional frame-based website would do? click a link at the top and it loads a different page within the content window without having to reload the header or footer?
(01.04.2006, 06:07)

Pam:-
Hello, wanted to thank you for your awesome layouts and ask you: would you happen to know why the mousewheel won't work in Mozzila Firefox? I've been trying to figure out a way to make it work but i don't seem to be doing much progress. I would very much appreciate if you could help me out on this, either with a css fix or javascript funct.

Thanx a lot!
(11.04.2006, 12:23)

Stu:-
Pam, you must have an older version of Firefox. If you update to the latest version 1.5.0.1 you should find that the scroll wheel bug has been fixed.
(11.04.2006, 19:13)

Blake:-
Great example, but one note. Please be aware that you can not use a menu with a vertical dropdown that drops down over the scrollable content area. If you do get the dropdown menu to work properly the scrollable area isn't selectable. Be aware if you have forms or other information that must be selectable this method won't work. I've experimente with several methods. If someone has gotten it to work I'd love to see an successfull example.
(22.05.2006, 14:14)

petho:-
to blake:
try to use blank div(no background) with autoheight...it should work(if it's the same think what i'm thinking about)
to Stu:
i tried to customize this layout, but in footer i'm doing something wrong..content exceeds it's limit in IE (FF and OPERA works fine)
(06.06.2006, 22:18)

Eduardo:-
This is an awesome layout and I was looking at the CSS and I am wondering: Is it relevant the order of certain Rules you write, like the HTML CSS:
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 76%;
BACKGROUND: rgb(209,205,193);
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
BORDER-LEFT: 0px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
HEIGHT: 100%;
max-height: 100%;

Basically you have all four paddings set to ZERO, will the layout be affected if you would change it to one line: "Padding: 0; " ???

Thanks!, love your site
(13.06.2006, 01:19)

MaxCurrent:-
Hi Stu; love the layout. However, I seem to have lost the transparent white cover over the header; hence the rollover has no effect other than filling the 'buttons'. Any ideas?
(18.06.2006, 11:04)

Simon:-
Stu I have been thinking of doing an html ebook I was originally advised to use a table to define the pages but didn't like that ,javascript...too restrictive but your layout version 1 really looks like what i want. You dont appear to mention any copyright with this how does it stand ? complete rewrite of demo required but i think I can do it.
(19.06.2006, 00:04)

Simon:-
Yes I have lost the transparent white cover over the header too...shame it makes the menu more meaningful.
(25.06.2006, 00:42)

Holger:-
Very interesting layout - but I have no idea for the appropriate print layout

#content
{ height: 100%/auto;
position: absolute/static
}

does not work in IE ?
(27.07.2006, 22:24)

Holger:-
found out :-)

overflow: visible does it
(27.07.2006, 22:28)

Henk:-
I've lost the transparent white cover over the header too...shame it makes the menu more awesome! Don't know were I lopst it!
I see more comments abo this. Suggestions?
(30.07.2006, 09:26)

Stu:-
Henk, there is no transparent white cover over the header. This is done with one image www.cssplay.co.uk/layouts/heading.jpg which hold the opaque image and the normal image.
The :hover swaps between the two.
(30.07.2006, 09:42)

Henk:-
Hello Stu, I allready found out by making a copy of the picture in de footer below the page.It's a great lay out!

Another problem is that boldhead section seams to disappear in IE7. In Firefox it's look allright!

I will try to make opacity icons in the footer below the page. I learn a lot from your website. It's magic! Thanks the whole lot!
(30.07.2006, 12:48)

Jens:-
Not to sound like a jerk, but having a layout where the mouse wheel does not work appears pretty pointless to me. Call me an old-fashioned idiot ;)
(02.08.2006, 23:30)

Stu:-
Jens, I don't know which browser you are using, but the mousewheel works in IE, Firefox, Opera
(02.08.2006, 23:49)

Unkle E:-
Haven't read every comment, so don't know if this has been reported, but in Safari, if you reduce the width of the window, no horizontal scrollbar appears as it generally does. maybe no-one will reduce the window that much, but who knows???
(06.08.2006, 13:10)

sean:-
Hi Stu,
I had a quick question. If I place the layout 'Fixed' layout version 1 and create a link to the Multi-page photo gallery MK.3, adding the menu bar from the 'Fixed' layout version 1 to the code, I get something that doesn't quite work. The borders do not quite fit because the 'Fixed' layout version 1 has borders that are smaller than those of the photo albums. I was able "sort-of" able to fix the problem which shows up fine in Firefox but not IE. As hard as I tried, IE would not change. Any suggestions? I am writing my own code and I have run into a similar problem. Thanks
(08.08.2006, 02:51)

Marco:-
Hi there,

I'm trying to get this lay-out working, with two extra divs on both sides of the page, but I can't seem to get the footer stick at the bottom of the page... It's not appropriate to post the whole css in my comment, so I hope you'd contact me on my mail...

I love the lay-out and how it works, but I think I need help...

Kind regards...

marco@sablono.nl
(06.09.2006, 22:54)

adrian:-
Hi Stu. I like the little boxes layout. I am teaching myself to write and build pages. Your site has been of great help in that process. my I use the little boxes format for my church site which I have redone several time to learn. I will be replacing all the graphics and such just want to unravel the code to learn more. Thanks in advance.
(14.09.2006, 19:48)

Stu:-
adrian, there is no copyright to the style. Just change the images and use as you want.
(14.09.2006, 20:10)

Anja:-
Love this site, where I have learned alot about css, but I guess not enough! - I have tried to make a site deeply inspired by this layout, but the content area wont be correct. It seems to go beneath the browser window? Anyone knows the solution to that problem?
(22.09.2006, 09:43)

Anja:-
You can see my source here: www.anjak.dk/testigenigen.php
and it works fine in firefox (although there is a couple of small gaps at the top?)
but my problem lies at the IE-browser.
(22.09.2006, 10:39)

Stu:-
Anja, it looks ok in my IE6 browser
(22.09.2006, 13:39)

Anja:-
I too have an IE6..?! The problem lies in the overflow. when the browserwindow gets smaller than the content it doesn't show the bottom arrow and a piece of the bar!(and my site content) - and it works fine before I alter your template - see this dump: www.anjak.dk/screendump.jpg
(22.09.2006, 15:35)

Stu:-
Anja, to make this work in IE you need to be in quirks mode.
At the moment you have a standards compliant doctype.

Add
<?xml version="1.0" encoding="charset=utf-8" ?>
at the very top of the html. This will switch IE into quirks mode
but keep all other browsers in standards compliant mode.
(22.09.2006, 17:25)

Anja:-
I folishly thought this was a simple problem... when I add the line to my page all I get is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"></HEAD>
<BODY></BODY></HTML>
And now it hit me... the problem must lie in me using php... My hero: Can't you make it work with php?
(22.09.2006, 19:51)

Stu:-
Anja, you need to get php to write the line instead of parsing it, so change this line for
echo '<?xml version="1.0" encoding="iso-8859-1"?>' . "\n";
(I think :)
(22.09.2006, 20:43)

Anja:-
You are the greatest! - now I just have to correct the layout here and there and it works like a charm! You will be remembered in my blessings tonight! Thanks alot!
(22.09.2006, 21:09)

RXP:-
Stu, nice layout and also gave me some inspirations for my anime stie thanks! :)
(23.09.2006, 13:43)

RXP:-
Hi me again how do you modify the image header for this particular deseign? with javascript?
(23.09.2006, 14:27)

Liz:-
Hi there, I have extended the header and footer of this layout (layout 1) and to width 100% and would like the header and footer content to be within a second div wich is just 760px wide and aligned center. (so the background extends, but titles etc are centred) I can't for the life of my get it to align center. Any Ideas?
(03.11.2006, 14:04)

frank:-
Hi, stu,

This is Frank from Manchester. I'm building a student website for commercial purpose.

I googled quite a lot for a drop down menu, and found one i quite like on your site, it's called "flyout definition list menu".

I'm write to you ask for permission to use it on my site after some modification.

I'll put a link back to your site on relevant part of my site, and probably some donation after my site start business.

thanks very much!
frank
(17.11.2006, 07:28)

Ryan:-
So i was messing around with a version of this site, and of course it worked perfectly in FF, Netscape and Safari, but not in IE. For some reason there was an extra line added to the header containing nothing but the last four letters of the last link. (In this case "contact" yielded "tact". After literally hours of tweaking and replacing code I found out the problem was in adding carriage returns between the header anchors in the HTML code. Is this normal?
(03.12.2006, 02:49)

Fred:-
I too have the same overflow problem as Anja and it also happens only in IE6 what is the solution?
(13.01.2007, 14:09)

Michael:-
Hi Stu,

how is it possible to give the page a min-height, that there is ascrollbar for the whole window when e.g. window is smaller then 500px in vertical size?

thanx for yout help!!!
(21.03.2007, 19:57)

jan:-
hi !

layout 1 was the one i search for a week !!!

i edit some parameters for my side - but i did'nt find the request parameter for a correct center of the content-field. i upper the width, but now the left column did'nt work correkt.

can you tell me the parameter i had to change ??

you would help me very much !

regards jan :-)

tappenbeck - AT - widemann.de
(19.04.2007, 11:14)

Damian:-
I have created a couple of similar designs myself lately but have been running into a problem which is what lead me to your site.

If you add a flash element into the page and view this on safari on a Mac then the flash element scrolls over the top of the header.

I tested this on your design and it does the same thing. I tried a slightly modified version of the design then the problem is fixed on the mac but then appears on IE on the PC...any help would be great!
(16.05.2007, 16:38)

Chris C:-
IE7's page zoom feature breaks these layouts I'm afraid. I've checked it with Opera, FireFox and Safari and all are fine - thanks Micro$oft :-(

I doubt there is a way around this, but I would like to know if anyone finds one.
(16.08.2007, 17:52)

Patrik S:-
Nice work Stu!
I noticed something with the centered div layouts, where you specify left: 50%; and margin-left: -412px;. Seems like the break the horizontal scrolling in most browser, have you figured out any fix for this? Or is it unfixable?
(31.08.2007, 17:08)

Herta:-
Hi Stu,

I use the method to produce a three-column page, but my IE7 cannot interpret "bottom" of the content layer (so it looked like "overflow:visible"), and there's no scroll bar in it despite "overflow:auto". Firefox interpret the page correctly. Besides, my IE can read your page correctly!

I'm getting out of my mind. Any idea would help. Thanks!
(08.09.2007, 04:17)

Emil:-
Hi, since everybody else only is posting problems and query's here, I thought i could post a comment with a slight modification.

I think you're doing a great work ! I have used this site as a referece when coding my websites for years, and it might be the best page for coders och the web. So i just wanted to say Thank You ! Your'e doing a GREAT job, man !
(19.11.2007, 13:26)

Michael Penta:-
Thank you Stu. This site is great! i have watched the site grow and grow and it has been a great resource for me.
Thank you
(26.11.2007, 17:30)

denny:-
I was curious about all of these being appicable to IE11 vs IE6
(09.12.2007, 19:48)

wolfi:-
Hello Stu - again same message great job cool & nice site. Perfect for all who want to get a little bit deeper into the secrets of css design. Keep on!
(12.03.2008, 20:47)

zandra:-
where do i find the codes?? i can't find them.. nice layout anyway..
(01.05.2008, 06:08)

Paul Delcour:-
Hi Stu,

just what I needed.
Changed it to: www.delcour.org/test2/index.php
This does not go in IE. Why? Could you please check?

:-)

Paul
(22.06.2008, 16:34)

Paul Delcour:-
Hi Stu,

think I've cracked it.

:-)

Paul
(25.06.2008, 09:25)

Keith:-
I am new to CSS and I am not trying to reinvent the wheel. I can edit the code once I got it but I cannot figure out how to get the code for layout 1 "Little Boxes" or how to separate the HTML and CSS from the source.
(03.11.2008, 09:18)

Michiel:-
Hello

this is really nice...but how about printing? even when you select "print the selection" when printing, the part that is hidden won't be printed...
The only way to solve it, is to put a link to a normal, seperated HTML-page which does not cause printingproblems. Am I right, or do you've a solution for this?
(01.02.2009, 12:52)

Bozo_in_Oz:-
Absolutely brilliant - just what I was looking for - thank you
(25.09.2009, 06:17)

Hedi:-
Hallo Stu!

This demo is very nice, and it works for me perfectly, as long as I don't use long <ul> unordered lists in IE7 (so that you need scrollbars). The problem is really strange, so I thought I might just ask you, if you ever seen anything like it.

If I open my page in IE7 the content part is just some px high and crammed underneath the header with tiny scrollbars.
If I resize the Browserwindow, the page is displayed correctly.
If I remove the long <ul>, the page is displayed correctly. (Long texts are displayed correctly)
If I press f5, when the page is displayed correctly, it is refreshed correctly.
If I refresh the page by clicking a link or entering the link in the browser, the page is again displayed wrong.

FF and IE8 are working correctly.
(09.06.2010, 16:43)

you heard me.:-
huh. well. nice demo-pages but...

WHERE'S THE ******* CODE.
(14.02.2011, 15:38)

Stu:-
Check the site FAQs
(14.02.2011, 16:00)

Bridget:-
* html #content {

Hi Stu, I am enjoying your tutorials. Can you tell me what * html does ? is it a tag .. I cant find refernce to it anywhere.
(20.02.2012, 08:21)

Stu:-
* html is a css 'hack' and any style that begins with this is ONLY see by IE6 and lower.
So it is a method of targetting just these browsers.
(20.02.2012, 09:55)

Ramesh:-
Hi,i want first column need to be fixed if i scroll the table it will stay,if u know can u send the code for this,thanks
(30.04.2012, 06:06)



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