20 replies [Last post]
MattyUK
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Hi

Experienced coder but newbie to this forum. Pleae excuse me if I break any rules I am not yet aware of.

I have a layout challenge. Perhaps CSS has met its match but I doubt it. I suspect there is some clever chap or lady that can sus this one out.

http://195.10.244.171/
My goal is the following: to work in as many browsers as feasible especially the big ones (IE, Netscape) and on as many platforms as possible.

I have it working fine in IE but not Netscape the next browser on my list.

Goal: To resize to the browser window dimensions, a fluid/liquid design rather than fixed width layout.
Sections:
Banner: 100% width, 100px height shows as a banner would, as horizontal bar.
Footer: 100% width, 100px high, site at bottom of the page always
Sidemenu: 100px width, ??? height to sit in inbetween banner and footer and reside 0pixels from the left edge. Should always be visible never offscreen.
Content: ??? width ??? height. To fit in the remaining section. It is the yellow box currently. Logically it would have the height being 100%-100px-100px and width being 100%-100px. It would always go across to the far right and needs to scroll any overflowing content.

Current version of my attempt is at http://195.10.244.171/ with a few screen shots. It works fine in IE6.0 but not Netscape 7.0. I suspect if we crack Netscape we crack a few other browsers at the same time. I have tried many different combinations of margins and padding but cannot get the right result.

I have tried padding the body then absoluting the sections. Using margins on the content and so on but cannot get the right combo. I can get it to work correctely multiple ways in IE but not once in Netscape.

I could get the whole thing easily in tables since the center row would expand if table height were set at 100% and elements within the TD's would expand to fill the cell only. However I am determined to use CSS.

So we have a challenge for the CSS gurus out there. Is it possible? What's the code? Where am I going wrong? Has CSS met it's match?

Yours hopefully
MattyUK

Carrots encourage. Sticks enforce. Which is needed here?

MattyUK
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Opps forgot to mention it is the "Footer" that should always be visible and never off screen. Same goes for "Banner" and "SideMenu" but the footer will contain a navigation menu so more important it is always visible.

Carrots encourage. Sticks enforce. Which is needed here?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 29 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

You mean something like

http://www.stunicholls.myby.co.uk/layouts/frame.html

and just stick on a bottom footer with position absolute(IE)/fixed(the rest).

Works in IE6, Mozilla, Firefox, NN7 and Opera.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 13 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Or something like: http://www3.ns.sympatico.ca/d.elliott/chair/ with the left and right divs swapped.

And is it really easy to get the scrolling content div with tables?

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Pman
Pman's picture
Offline
Enthusiast
Sweden
Last seen: 14 years 24 weeks ago
Sweden
Timezone: GMT+2
Joined: 2004-04-15
Posts: 60
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Nice one's, really nice ones...

Ok, how on gods green earth do you get scrolling abilities without using iframes here...I've looked at the code, but aren't experienced enough to figure this out...

I wanna do css based sites, am trying Wink, but I relly do not like them sites where the 'hole page is scrollable. I want to be able to link to and scroll just the "contentarea", but without using iframes. Is that possible at all ?

Ok, I'll devide the Q into 2 Q's Wink

1. Is it possible to make that scroller appear without using iframe ? And how in such case ?

2. Is it possible to make a link appear within a specific div (like targeting an iframe) or something, without having to link to another page alltogether ? And how in such case...?

Kindly Patric.

Anything that happens to irritate you, will happen atleast once more
- p-ahlqvist.com - Online, not entirely done contentwise, but I'm up

MattyUK
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Hi

Chaps at first glance that is exactly what I am after. Thank you.

I'll enjoy going through the code to work out where I lost it on my approach. Smile

Any helpful quick walk throughs or advice on where I had focused wrongly? Aspects to simply avoid to pander to netscape etc. (Pretty pretty please.... beg beg grovel grovel). I suspect I could use the tuition/understanding more than the solution.

To go back to your point on the tables. Yeah it was in IE (as usual) but less so in Netscape. http://195.10.244.171/I've now linked to the table version as well.

To help out a fellow newbie I can offer the following:

Quote:
1. Is it possible to make that scroller appear without using iframe ? And how in such case ?

2. Is it possible to make a link appear within a specific div (like targeting an iframe) or something, without having to link to another page altogether ? And how in such case...?

1. Use the overflow attribute in CSS.
overflow: scroll; forces scrollbars
overflow: auto; puts scrollbars only if they are required
overflow: hidden; hides content that overflows
overflow: visible; forces the element (recommend a DIV) to expand down and to the right to accomodate any overflowing content.
Remember you probably need to set the height and width to make the scroll work properly.

HTML
<div class="scrollme">scroll content</div>

CSS
.scrollme {
width: 100px;
height: 100px;
overflow: auto;
}

Then try adding content to the and when you exceed 100px by 100px, it scrolls. You can adapt to your needs.

2. A bit trickier. You would be wise just to link to a new page and put the nav bar etc in again. It has other benefits. However if you are concerned about duplicating content in numerous pages you could possibly use server side includes (SSI). I'll leave you to investigate these. Google is a good start. They are easy to use when supported by the webserver.
You could also have the content pre-placed in a layer in the page then just unhide the layer using Javscript. Or you could go back a step and use an IFRAME in a layer. I suppose your approach depends on your reasons for not wanting to use the iframe in the first place.

MattyUK

Carrots encourage. Sticks enforce. Which is needed here?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 13 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

There are no iframes in my code. Look at http://www3.ns.sympatico.ca/d.elliott/chair/base.css for the basic layout. What is critical is the initial html and body selector properties which specify the body height. Once you have a body height, you can base other measurements off the part of the browser window that displays your page. This display area is often called the "viewport". Normally pages scroll in the viewport. However in this case we are saying that the viewport contains 100% of our page and we then create divs in the page that are sized to be smaller than the viewport and to scroll any content that is larger than the div. In effect, we are making each scrolling div behave like a separate viewport.

Look through the CSS if you wish and beg, borrow or steal at will. Be forewarned that this is still in developmental stages and some properties or selectors will have an x in front of them (useful to turn off a property while you are experimenting) so don't try to validate the code :oops:

Cheers,

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

MattyUK
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Hi DCElliot
I am impressed with the code but can't for the life of me figure out how it all works for hte bits I need. Looking through it however I have learnt of some attributes and CSS I wasn't aware. So thanks. It helped.

A walkthrough of the main sections would be excellent if you have the time.

I am struggling to set a div to be scrollable when I cannot dictate its height but need the height to be fluid and fulfil all available space. since the height is the issue perhaps my quest is better phrased as follows:

I am after a cross browser three row CSS structure. All three will be 100% wide and the top/bottom rows are 100px high and the center row auto fills the space and is scrollable. You have a similar structure in your site. How on earth did you accomplish it?

I take your point about the viewport but thought I had accomplished this by placing everything in a div called main and set to be absolute and 100% by 100%. I will try setting the HTML and body values as you have as well.

Yours hopefully
MattyUK

Carrots encourage. Sticks enforce. Which is needed here?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 29 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Just knocked this up as an example ~
http://www.stunicholls.myby.co.uk/cssforum/webframe.html

Works in IE6, Mozilla and Firefox.This one works by fixing the height of the html and the body to 100% then reducing the body size by placing a top and bottom margin of 100px.
You can then place absolute positioned divs outside the body area.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

MattyUK
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Hi Stu.

That’s a clever approach and one I would have been unlikely to think of myself. Thank you. I appreciate the explanation of how you achieved it. That helps me learn.

Since supporting Netscape, Opera has proven so difficult and their users typically only make a small percentage of visitors, I am leaning towards dropping cross browser support and living with one of the approaches above. Unless someone can talk me through how to support both browser engines.

It is obviously possible as DCElliott has demonstrated on the site linked to in the post above but I'll be honest and say I can't quite work out the key elements of how it was accomplished in the CSS code. I have learnt a fair amount already from the code so it has helped but am not used to using EM's and can't work out how the main areas of the CSS fit together as they do. How on earth is it that the content div expands but starts scrolling at just the right point. Smile I have tried restricting the viewport height but even in IE divs with content that exceed the viewport and have overflow auto and height auto don't suddenly start scrolling (I feel they should).
various approaches.

I am very grateful for everybody’s responses and efforts. Thank you. However DCElliott's page so far is exactly what I am after and works in both IE and Netscape. Your frames page Stu is next closest and if i can't figure out DCElliott's code then it is next on my list to spend some time getting my head around. However I do want if possible IE5.x support. I do fear DCElliott's code is beyond me without a walkthrough of the core elements.

Yours hopefully
Matt

Carrots encourage. Sticks enforce. Which is needed here?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 29 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

The only problem I have with DE's code is in Forefox, where the scrollbars allow you to scroll down but as soon as you move the mouse onto the content the page jumps back to the top (the same happens using the mousewheel).

Good luck with your project.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

MattyUK
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Forefox? I assume you mean Firefox. lol like me and Nutscrape I mean Netscape.

Stu does your test page http://www.stunicholls.myby.co.uk/cssforum/webframe.html
work in IE5.x?

Carrots encourage. Sticks enforce. Which is needed here?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 29 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Quote:
Forefox? I assume you mean Firefox.

My tipying aint wot it used ti bee Smile

As to the page working in IE5.x , well noooo it doesn't. Unfortunately it doesn't recognise the height:100%; bit and although it will look correct on first loading , the whole page will scroll (including the bottom footer).

There is, however, an example on the web (don't remember where at the moment), that has a header, scrollable body, and footer which works in all browsers. I'll see if I can find the link. Maybe other members know the one?

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 13 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Actually, you can make IE work with 100% height using some (sigh) proprietary IE code with a conditional comment (to hide from other browsers)

    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie.css" title="Internet Explorer Styles" />          
       <![endif]-->
and an IE CSS expression: property
#content, #special {
	height:expression(document.body.clientHeight-195+"px" );
}
#footer {
	font-size:12px;
	line-height:18px; 
	height:60px;
}
The expression gets the browser viewport height from the DOM and subracts the header and footer height from the content sections. The code will work back to IE5.5. NN4 is protected using an @import url("base.css"); for the positional CSS. Non CSS browsers get a div with info about how to get a browser with CSS capabilities that is normally hidden with display:none; but gets displayed in a non-CSS situation.

I am still working on the Firefox bug (and I do consider it a bug) that doesn't scroll the div in focus like IE does. This page is still under development and the challenge of supporting older browsers while still trying cutting edge CSS is not for the faint of heart.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 29 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

The only problem with conditional expressions is that they rely upon Javascript to work.

You could also do this with IE 'behaviors'
http://msdn.microsoft.com/workshop/author/behaviors/overview.asp

Doing it this way will allow the script to be placed within the CSS and automatically hides it from other browsers. But again uses Javascript.

I once used this method along with -moz-binding to apply CSS to XML (without XSLT) and allow xml to display images and clickable links.
http://www.w3xml.co.uk/behaviors.xml

(This site was produced back in myyouth ~ a couple of years ago. But I got tired of doing things the hard way and have let this site go. My peronal info is still on the site, though a little out of date)

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Pman
Pman's picture
Offline
Enthusiast
Sweden
Last seen: 14 years 24 weeks ago
Sweden
Timezone: GMT+2
Joined: 2004-04-15
Posts: 60
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

wow, hehe, I've got things to learn...Thanks MattyUK for that "overflow" tip...I'll go check it out. The linking to a div or something likewise...Eh I'll just continue to link to a "copied" page, as I've done so far and you suggest Wink

Patric.

Anything that happens to irritate you, will happen atleast once more
- p-ahlqvist.com - Online, not entirely done contentwise, but I'm up

MattyUK
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

For those that have an interest the page has moved to http://195.10.244.171/index.htm

Carrots encourage. Sticks enforce. Which is needed here?

MattyUK
Offline
Regular
Last seen: 18 years 16 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Sorry posted the wrong URL last.

http://195.10.244.171/Temp/index.htm

With the help of Stu we now have a solution.
http://www.csscreator.com/css-forum/ftopic3020.html

Wonderful code. I'm impressed and have learnt a fair deal.

Carrots encourage. Sticks enforce. Which is needed here?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 29 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

I have 'tarted up' the layouts and placed them on my s7u site for future reference.

http://www.stunicholls.myby.co.uk/layouts/bodyfix.html

The navigation links will take you to the other 3 versions which now work in all browsers including IE5.x, IE6, Opera 7.23 , NN7 and Mozilla/Firefox (Only tested on Win XP).

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Great examples Stu. =D>

three
Offline
newbie
Last seen: 12 years 29 weeks ago
Timezone: GMT-7
Joined: 2004-03-18
Posts: 8
Points: 0

Has CSS met it's match?A layout challenge!Tables=Easy,CSS=??

Hello Guys,

I realize this is my first post and I am new to css,
but you guys are pure genius. I have learned so much
from just reading your post, code, and following your links.

Thanks Three