Mobile Friendly Website

CSSPLAY

Doing it with style

fixit layout 3 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

Christopher Boomer:-
I note you have used definition lists on this layout rather than unordered lists. You comment that you can 'define' the menu item for text only browsers, but do not follow through on this by presenting the information in (say) the title attribute for other browsers.

I have been looking into this in a slightly different way, using the menu name as the term tag and 'defining' the menu underneath. This approach extends through nesting, but I have been having trouble hiding the text of this whilst leaving the option of styling the top of the menu. Maybe you could chew on that notion?
(05.07.2004, 11:23)

Stu:-
Hi Christopher, There are a couple of Definition list menus under 'Menus' that are produced using <dt>Title</dt> with the defining items in <dt>s. I believe this is what you are after.
(06.07.2004, 11:42)

Stephen Baxter:-
I think this is one of the best layouts I have found on the web - hardly anyone else seems capable of using css in such an advanced, yet easy to follow way. I will be using the frames without frames technique in my website; I'll send you a link when it's done. (But sadly, I have to throw Javascrpit all over header and menu bar!) Your suggestions and methods are the smoothest and most professional I have seen - and I love the look of the site ! Keep it up.
(27.07.2004, 00:23)

Stu:-
Thanks Stephen, your comments are very much appreciated.
(27.07.2004, 17:07)

Geoff:-
Hi Stu,

I've been playing around a bit with this layout and it's having a problem rendering in IE 6.0. I probably crossed my eyes when entering it all and got something mixed up, but I can't seem to find it.

It seems that in IE, the border sizes in the "* html content" are ending up over-top the header and left-side. You can view the problem here:
http://saskferrets.com/second.htm

Any idea what I might have entered incorrectly?
(15.09.2004, 14:25)

Stu:-
Geoff - The body background image will not show in IE because the content borders are not transparent so the cover the image. On my version I have put the background images in the header and the left div and matched them up to look like a background image.
(15.09.2004, 19:35)

Anonym:-
Thanks. I should have thought of that myself.

While I have you here, how do you prefer to be credited for the css?
(16.09.2004, 02:02)

Stu:-
Geoff, no need to credit css. But always happy to have a link back if possible.
(16.09.2004, 08:18)

Geoff:-
Sorry to bug you again, Stu. I fixed the problem I had earlier and everything was rendering perfectly. I went through and validated the page and it passed (after a few minor typos were fixed). I moved the CSS to an external stylesheet and made some minor changes, or so I thought. Now I'm back to having the borders on top of everything in IE...

Would it be too much to ask for you to take a look at the problem again?

http://saskferrets.com/
http://saskferrets.com/main.css

I'd appreciate any advice you have.
(03.10.2004, 04:24)

Stu:-
Hi Geoff. Try removing the conditional statement <!--[if gte IE 5 etc
(03.10.2004, 12:55)

Gerrit:-
Hi, I did a layout very similar to yours (Layout 3)but it didn´t work under IE. After downloading your site it´s working either with Firefox or IE...why? How can I get it done? Cheers
(31.10.2004, 11:05)

Gerrit:-
Puh, now I found out how to get it done myself...why does this always happen after I posted my probs? If you like you might just delete everything, please.
(31.10.2004, 11:27)

Stu:-
That's ok Gerrit, glad you found an answer.
(31.10.2004, 11:43)

Marcel:-
Beautiful concept, works perfect for me in IE. But in Mozilla en firefox i've got problems i don't understand. The css is valid.

It has probably to do with the right-box (position:absolute). Is there a solution for this? And may be also for the i-frame-construction (reserveer). I used it before without problems (width=100%) but in this site it's not working correct.

The site I'm talking about is: http://www.ijsbeer.nl/castellum (it's in dutch, but the css and html in English..:)
(30.12.2004, 13:02)

Marcel:-
The problem is solved. I added width:800px to #content. Now the scrollbar is shown. width:100% doesn't show the scrollbar at all, so scrolling is not possible.
Very nice lay out!
(30.12.2004, 20:44)

Peter:-
Hi Stuart, I like your layout and am planning on using it on my website, but I have a question, is it possible to control the width of the text in the content area to avoid too long sentences? I can't figure that out on my own...
(21.06.2005, 22:49)

Stu:-
Peter, the text in the content area will word wrap if the sentence is too long, so there should be no need to control the width.
(22.06.2005, 07:54)

Peter:-
Hello again and apologies for not being precise enough. What I meant was that on monitors with a high resolution, I want to avoid that a sentence gets too long. I would like the sentences to word wrap if nescessary, but at the same time I want to make sure that sentences don't get any longer than for instance 15 centimeters on a screen with a high resolution, is that possible?
(30.06.2005, 13:50)

Eugene:-
Great layout, bad print out. Actually I did similar layout but the problem was to fix printing. Stupid thing to print html but the client wants it.
(22.08.2005, 18:43)

Stu:-
Eugene, you will need a separate print.css to format your page for printing.
(20.12.2005, 15:35)

Phil:-
Hello "Stu" inspired by your "Layout 3" I tried to make a "Frameset emulation" everything was OK until I decided also to use your "CSS dropdown horizontal menu".
My problem is that it works in IE but not in Firefox (amazing), The drop down is hidden under them "content" area with firefox.
Do you allow me to send you the url of my test file in order to find what's wrong ?
(27.12.2005, 23:40)

Phil:-
Phil again ...
Sorry "Stu" I missed a z-index ... (Tired !!!)
Apologize for disturbing you.
Your site is a "CSS reference and tutorial", congratulations.
(27.12.2005, 23:49)

Bill Wallace:-
Hi Stu. Extremely impressed with your work and creativity. I noticed that your layouts do not attempt to place content first, to assist accessibility and search engines! Do you have a view on this? Keep up the great work.
(29.12.2005, 16:55)

Bea:-
Hi
I love this layout - my favourite of all the ones and I wanted to implement it in my website but with narrower top and bottom borders..... it works fine with a linked stylesheet in FF but in IE it was a mess!!!
If I implement it exactly as you have laid it out it is okay but when I tried to decrease the top and bottom border it went haywire in IE - any suggestions????
I love your site - there are lots of really good examples for a newbie like me.
(22.02.2006, 11:50)

Peter:-
Hi Stu,
I've used the 'Pollution' layout as a start for my site and it works fine, thank you. Have you tried to do a print preview?. Only the first page seems to be there. Have you played around with print stylesheets to solve this problem?.
(17.03.2006, 11:46)

Stu:-
Peter, haven't played with the print style on this particular layout, but Ihave on several others. It is possible to use a print.css to restyle this as you want for printing.
(20.03.2006, 20:32)

Tiago:-
Hi Stuart,

Just wanted to compliment you in the work you have achieved here. So, great work.
Keep up the effort.

Best regards,
(31.03.2006, 11:57)

Floris:-
This lay-out seems to have trouble with IE when you want to add float:right images *outside* the righthand margin. e.g. margin:0 -100 0 0;
The images stay put.
Or is there yet another trick to fool IE?
(18.09.2006, 07:59)

shingon:-
using a style based on your layout 3, with a border at a top which holds a menu, if I use a anchor link ie #bottom the whole frame shoots up and the top disapears any idea ?
(27.09.2006, 16:34)

Liam:-
Hi Stu,

just a missplaced colon..

background-repeat:no-repeat:

in #left div.
(19.11.2006, 11:04)

Mark:-
Hi

Using frames, it is easy to display different pages in the main frame and keep the rest of the page the same. Can I do this with CSS without repeating all the header, footer and left div code for each page?

I'm using PHP so maybe I can merge the pages somehow? (I'm new to PHP and CSS so I'm not sure how.)

I hope this isn't off topic. Any ideas would be apreciated.

Thanks.

Mark
(01.02.2007, 09:43)

Andre:-
Hi, I am having a similar problem that Phil had. I used this layout (it's great, btw) together with Menu#3 from the Drop Menu Examples (www.cssplay.co.uk/menus/drop_examples.html).
The problem is that the sub-menu stays under the content div. I tried editing the z-index nothing works.

If this help, the page is here: www.abceram.org.br/anuario_07/ . Any help is great apreciated. Thanks!
(06.03.2007, 15:20)

Andre:-
Bah, scratch that. I fixed with overflow: visible; but you can't scroll to the bottom. Worse is that I forgot a ton of options to input on the menu, so I won't be able to use even the layout (even worse when you see in a smaller resolution, such as 800x600).
(06.03.2007, 18:47)

Mark:-
I was wondering how to give the main content section of this layout the focus when the page is loaded. I would like the PageUp and PageDown keys to work for scrolling the content without having to click in the div first. Thanks!
(21.03.2007, 01:25)

Mick McNeill:-
Hello Stu

Your site is fantastic - really hit's the mark by putting the style in style sheets.

I would love to use a modified version of this this template for my non commercial site www.toonarama.co.uk.

Would that be ok

Many thanks and keep up the grat work

all the best

Mick
(04.05.2007, 13:39)

daniel:-
sweet
(23.05.2007, 18:51)

Anthoneil:-
Man everything you do is amazing. I am amazed that everything here is pure CSS. I am using web developer for Firefox and when I disable all styles i don't even see images, hoe do you do that man.
(13.06.2007, 01:13)

Kate:-
Hi! Love your site. I am playing with this layout and having the same problem as Shingon, I think: using an anchor link to text in "content" pops the page up (so the linked content is at the top), pushing most of the header off the top of the page. I have a clunky work-around but I am hoping someone can suggest a way to have the anchor link move to the top of the "content" div instead of the entire page. Thanks :)
(15.07.2007, 02:54)

Kate:-
Never mind, like so many posters, I promptly figured out what I had done wrong. Thanks :)
(15.07.2007, 03:50)

Jessa:-
Many thanks for your work on this site! It is incredibly helpful!
I have run into the anchor problem Kate & Shingon described earlier, where clicking an anchor link pushes the header off the page and extends the content beneath the footer. I must be missing something simple - but if anyone can help, I would be grateful.
(10.09.2007, 21:39)

ibrahim:-
u should try to search in google for ajax or jquery ...
"50 amazing jquery" search for this and u ll find something useful

Mark:-
Hi

Using frames, it is easy to display different pages in the main frame and keep the rest of the page the same. Can I do this with CSS without repeating all the header, footer and left div code for each page?

I'm using PHP so maybe I can merge the pages somehow? (I'm new to PHP and CSS so I'm not sure how.)

I hope this isn't off topic. Any ideas would be apreciated.

Thanks.

Mark
(01.02.2007, 09:43)
(10.01.2008, 20:38)

Wolfgang:-
Thank in advance for this great examples.
Wolfgang
(12.02.2008, 08:44)

Seumas Rouse:-
Hey Stu,
This has me stumped:

I downloaded your "fixit layout 3" which works fine online in both Firefox 2 & MSIE 6, but when I view it from my desktop saved version, the text in the content vanishes off to the right & the vertical scroll bar disappears!

Thanks for sharing your work with us all!

Seumas
(27.02.2008, 04:18)

Mike:-
If you modify this layout to remove the footer area, the scroll bar in the content area may disappear in Firefox. To avoid this, don't remove the bottom specification under #content. That is, leave at least one pixel: #content{bottom:1px;}
(18.11.2008, 21:35)

Nolene:-
Bea ... when you change any of the heights, make sure you have changed it in both the regular spot and in the corresponding *html section and then adjust the content section (in both the regular and *html spots) to add the amount you subtracted from the others.
(14.12.2008, 07:59)

Nolene:-
Love your site --- I tried using a CSS layout from another site and it only worked on my Mac, totally broke up on IE. You're the only one I trust.

I've created a site using this fabulous layout but I wanted to change the menu to a simple list, no borders or background color, with just a pointer (an image of a triangle) and text color change on hover. I took out the border attribute, changed the background from a color to url(image) and added left padding to accommodate the image and a font attribute. Works great on Safari, but can only get the color change on everything else (Firefox Mac & PC, IE5,6,7).

Plus I'd like to have the current page link just a different (third) color, but can't get that to work at all.

a.nav:hover
{
color:#FFCB22;
background: url(images/arrow.gif) no-repeat left center;
}

a.thispage
{
color:#1F69FD;
background: url(images/arrow-thispage.gif) no-repeat left center;
}

I even tried just changing to one of the ul-based menus, still no luck on anything but Safari.
(14.12.2008, 08:00)

Wolfie:-
Great site. Love the different options. Your solutions worked...and other sites I found and tried did not, so GREAT JOB and THANK YOU!
(04.02.2010, 21:20)

Sofcrafts:-
Great Site. Almost cut-n-paste to get ones website going.

I am using the Layout 3 for my personal website. Got it all going with scrolling images and text in the main right pane.

I tried to change by adding the "Image Hover text" from your "Opacity" demo. Works fine, but the Images which were centred earlier, now have shifted left in the scroll pane.

Can you advise? what needs to be amended in the css/html?
(25.11.2010, 21:35)



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