CSS Frames (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> CSS Frames (9/18/2007 7:40:03)

I haven't used frames on a website since I first started, I promise, but I must admit that I love the idea of the header, sidebar and footer all being visible on the screen at the same time, always.

I'm hopefully getting the contract for a redesign of this community service site if we ever get the grant approved to fund it, and over the past week or so, probably stupidly, I've been working on it. Stupidly because it's unfunded, but in any case it's yet another learning experience.

I found the layout on Stu Nicoll's "cssplay" website and it uses a frame created by CSS. I really like it on my 1280x1024 monitor, when I was creating it I started with the header, then moved to the content, then the footer, and it's only then, when adding things to the sidebar that I realised that the more you put in the sidebar, the more chance there is of a scrollbar appearing on the sidebar itself.

What I'm saying is that I want the header, sidebar and footer to be all totally visible no matter what screen resolution, and the content to scroll if necessary. Looking at the site again tonight I notice I've tried something, and now the sidebar is cutting off without a scrollbar - not sure what I've done, but it's as bad in my opinion as a scrollbar on the sidebar too.

What I'd like to know is, is it possible to do what I'm trying to do? If it is, are there any drawbacks to CSS frames similar to those of ordinary frames?

Here's the site, please view it in Firefox at this stage, other browsers too if you can resize the screen to mimic other screen resolutions.




womble -> RE: CSS Frames (9/18/2007 9:56:22)

I did something like that on some of the pages of my redesigned personal site Nicole - the big smiley collection's one of them, only I haven't used it for the whole centre section of content, though I can't see any reason why you couldn't. I've just used a normal PHP include, and given the include an id of "smileyscroll" - in the CSS overflow : auto;. The important thing is that you have to give the div a height to get it to work - that's the height that's visible without scrolling.

No drawbacks of using that method as far as I know. The PHP include just behaves like any nromal include and is just another part of the HTML that makes up the page, so no SEO penalty, and also just as accessible as plain HTML. The only difference is how it's displayed.

I use a dynamic include to include the content using something similar to the method shown here. The case/break switch conditionals are controlled using the navigation (in my case I use secondary navigation, but there's no reason why you can't use your primary navigation. That gives you a URL with a query string, so the specific page/content is still bookmark-able. I've used it a lot on my redesigned ecanus.net to save over-complicating the main nav and simplifying the site structure, and the scrolling divs to make sure I didn't end up with very very long pages.

One thing you do need to be aware of if you're using switch conditionals though is if you're on a server with register_globals off, which a lot of hosts do now on security grounds, is that you have to alter the code slightly to get it to work - this one describes how I did it.



Nicole -> RE: CSS Frames (9/18/2007 18:16:15)

quote:

ORIGINAL: womble
. . . though I can't see any reason why you couldn't. I've just used a normal PHP include, and given the include an id of "smileyscroll" - in the CSS overflow : auto;. The important thing is that you have to give the div a height to get it to work - that's the height that's visible without scrolling.


Thanks Womble - the bit I've highlighted in your reply is the bit that has made me realise that it won't work. I remember on another client's site recently that she had a table with a hight and overflow:scroll which was causing a similar effect to what you have and what I'm trying to achieve. But because the height was too big, when I reduced the screen resolution, especially to 800x600, you lost the scroll bar off the top and bottom of the screen. Yours is just the right size for 800x600, but I reduced it to 640x480 just to see, and I lost the scrollbar off the top and bottom of the page too.

I can't very well put a height if I want the effect I'm looking for and have it looking good mainly at 1024x768 and above, it's going to be too confusing for people with 800x600 screen resolutions. So I guess it's back to a basic layout again.

Thanks.



jurgen -> RE: CSS Frames (9/18/2007 19:48:36)

Nicole, have a look at this site

Schoolhousflash Maybe that's what you are looking for.

I partialy helped "Clicken" do set up her pages. You might want to get in touch with her. And yes, you can mention my name.... [:)]

- Jurgen



Nicole -> RE: CSS Frames (9/18/2007 20:02:31)

Thanks Jurgen,

Unfortunately the same thing happens with this site, only she has little content in the sidebar so that it doesn't chop off or add a scrollbar.

I need to put notices and links in the sidebar of the site I'm doing, and therefore it's going to be longer than just viewable by 800x600 resolutions and above.



jurgen -> RE: CSS Frames (9/18/2007 20:10:30)

I guess in that case you are better off to stay with frames in the first place.... (ps: I don't like them) :-)

Let me see what we did [8D]

Maybe you can restrict the content (notices and links) to a certain size and show it differently. Like slide-out links, and notices in the content areas.... Just a thought...[8|]



Nicole -> RE: CSS Frames (9/18/2007 20:15:45)

Thanks Jurgen,

I'm pretty much resigned to the fact that I just can't do what I want to, and will probably go back to a basic header, sidebar and footer layout - i.e. no frames.



jurgen -> RE: CSS Frames (9/18/2007 20:24:43)

Bravo...... [:D][:D][:D]

I think you have a pretty nice set up with your test page....

http://www.nixdesign.com.au/clients/gender-centre/layout-test.htm



Nicole -> RE: CSS Frames (9/18/2007 20:29:13)

Jurgen,

I never was considering a frames site, I know they have too many pitfalls - but I have always liked the idea of the footer always being visible.

I found that CSS version that I liked and wondered whether it would be appropriate, but unfortunately it isn't in this case.

Thanks for the compliments too.



jurgen -> RE: CSS Frames (9/18/2007 20:45:30)

The only thing I do not like with Stu's setup is you can not use your mouse to scroll. You have to use the scroll bar instead. [:(]



clicken -> RE: CSS Frames (9/19/2007 11:25:09)

Even if I had the skills to create the frames in CSS I'm not so sure that I would because I don't like how it refreshes every page. STU's design is very close to true frames and it would be easier to update but it isn’t exactly the same.


Thanks to jurgen, :) I found this thread in my stats and wanted to comment on the nice work Nicole has done on her design and offer my point of view.

Regardless of the method be it frames or css frame emulation, because of the limited space in the left column without the scroll, presentation becomes more challenging but not impossible.

Looking at your page, I can see possibilities to have the information you need in that limited space without a scroll however I feel that a custom scroll bar in the nav frame could be a solution for those with smaller screen resolutions that would need it.

First of all I am not sure why there is a text sizing choice in that side frame. It takes up a lot of room and has nothing to do with the site content. Besides, that is a feature common to the browsers. I suspect it is to help visitors fit the content into the limited frame?

The images in that frame are very nice however they take up all the room. I have seen sites that have text links and pictures upon mouseover. The pictures were all showing in the same place so that as you mouse down the links the picture would change but not the picture location. Of course I don’t have references to those sites off the top off my head.

There is also the option of choosing a single image to use in the background. Done properly, it gives a nice effect and will free up your space.

It might also be a consideration to put some of this information in the footer, like the information regarding who the community is funded and managed by, etc.

The site looks great and IMO the frames don’t have to be compromised only the presentation of the information for the left frame needs compromise.



Nicole -> RE: CSS Frames (9/19/2007 16:52:14)

Welcome to Outfront clicken, and thanks for your comments.

I've moved away from that frames idea and have just gone with this instead.

I put the text-resizer there to fill up space at the time, I'm in two minds whether it's necessary on sites anymore, but that's probably a discussion for another time.

I just happen to find myself in between jobs at the moment, this is a job I haven't been guaranteed as yet, but I've been filling in time by working on it a bit anyway. I'm really just trying things out at the moment.



d a v e -> RE: CSS Frames (9/20/2007 1:47:58)

"I put the text-resizer there to fill up space at the time, I'm in two minds whether it's necessary on sites anymore, but that's probably a discussion for another time."

that could be a useful discussion to have - in a new thread of course! :)



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625