24 replies [Last post]
MattyUK
Offline
Regular
Last seen: 17 years 32 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Hi

I am struggling to decide which forum to put this into so admin please feel free to move it if necessary.

I can't find an exact match for the layout requirements in the knowledge base or in any other articles/tutorials. So really I have an article request. I feel/hope it is one that would benefit many.

<<>>
I have been doing tableless design for some time and frameless for longer. However I have a layout problem I could use some feedback on. Imagine the frames layout with the following code:

<frameset rows="100,*,100" cols="*" framespacing="1" frameborder="yes" border="1" bordercolor="#000000">
<frame src="banner.htm" name="bannerFrame" scrolling="No" noresize="noresize" id="bannerFrame" title="topFrame" />
<frameset cols="100,*" frameborder="yes" border="1" framespacing="1">
<frame src="sidebar.htm" name="sidebarFrame" scrolling="No" noresize="noresize" id="sidebarFrame" title="leftFrame" />
<frame src="content.htm" name="contentFrame" id="contentFrame" title="contentFrame" />
</frameset>
<frame src="footer.htm" name="footerFrame" scrolling="No" noresize="noresize" id="footerFrame" title="footerFrame" />
</frameset>

Or view it here. http://195.10.244.***/Temp/frames.htm (link now dead)

Fairly simple layout.

I can't reproduce it in CSS that works on most browsers. I am aiming for the following browser support:
IE5.5, IE6, Mozilla, Opera, Firefox (should be ok once tackled Mozilla).
Netscape and IE5.01 would be nice but not essential.

I have tried using margins, padding, absolute and relative DIV's in many combinations to achieve this layout. It can be achieved in IE6 in many ways but not all the other browsers. I now have an approach (with the help of another cheers Stu) that works on Mozilla, Firefox, IE6 but not IE5.5.

One of the approaches is here: http://195.10.244.***/Temp/almostworks.htm (link now dead)
or a worse first attempt at:
http://195.10.244.***/Temp/ (link now dead)

The layout is different to many CSS layouts with columns and footers as the footer needs to remain always visible whereas on the other CSS layouts covered by articles/tutorials it can be off the screen and reached by a scroll. Since in this approapch the footer will contain navigation it can never be off screen.

Ok I had a similar post but honestly I can't see a good way of doing this. So I have revamped the challenge and am issuing it again. Can anyone meet it? Can anyone point me at an article or tutorial for exactly this layout (not the usual cols and footer ones please). Can anyone write a brief walkthrough?

Is it possible at all?

<<>>
Yours hopefully
MattyUK

Edited 2006-01-27 (Removed dead links)

Carrots encourage. Sticks enforce. Which is needed here?

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

Frames vs CSS. How to make CSS win?? Article Request.

The nearest I can get to your requirements is ~

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

This works in IE5.01, IE5.5, IE6, Opera 7.23
Has a small problem with the scroll bar using the mousewheel on Mozilla and Firefox.
In NN7 causes position:absolute; to be interpeted as position:fixed.

I will work on this a bit longer, but this is probably as good as it gets.

(I have added this layout to my s7u site ~ so the comments link is active.)

Edited:
Have got rid of the mousewheel problem in Mozilla and Firefox.

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

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

Frames vs CSS. How to make CSS win?? Article Request.

And finally this one works in all except Opera ~

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

and the final...final which almost works in Opera

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

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: 17 years 32 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Stu you truly deserve your title.

thank you.

My target browsers are IE5.5, IE6, Mozilla and Firefox latest versions. I had given up hope on netscape and opera and was despairing at IE5.01.

I am very impressed with your code and slightly scared by the obvious amount at which I have left to learn.

A walkthrough or article would be heavenly but as it is I suspect with a bit of head scratching I will be able to work out your code. I will start tomorrow. thank you again.

Carrots encourage. Sticks enforce. Which is needed here?

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

Frames vs CSS. How to make CSS win?? Article Request.

I even surprised myself with the last two versions.
It's just a pity that Opera doesn't quite get it right.

The basic idea was to firstly switch IE6 into quirks mode by adding <?xml version="1.0" encoding="UTF-8"?> (and also keeping it xhtml1.1 strict).

Setting html to height 100% with overflow hidden gets rid of the scrollbars.
Setting body also to height 100% and overflow hidden removes the body scrollbars so that all you have left is the blank screen to play with.

Anything off screen will now vanish.

We can now place divs anywhere on the screen and they will stay 'fixed' as there is no way you can scroll them off screen Smile

So the header and footer divs can be positioned absolutely at the top and bottom of the screen with a fixed height and width 100%.

The centre content can also be positioned absolutely using height 100% and by adding a top and bottom border the same size as the header and footer (100px in this example) they will fit between the header and footer. With IE in quirks mode and Mozilla / Firefox / NN7 these borders are held within the 100% height (the actual content height is reduced by 200px).
Using overflow auto on the content will cause scrollbars to appear when required and only be as high as 100%-200px.

So with this method you can place divs anywhere on the screen, they will stay fixed and they can have scrollbars if you want.
Now if only we could target divs with links we would all be happy Smile

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: 17 years 32 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Thanks Stu

That makes a hell of a lot of sense and aids me tremendously. I am sure it will others as well.

Thanks again.

Carrots encourage. Sticks enforce. Which is needed here?

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

Frames vs CSS. How to make CSS win?? Article Request.

Been playing around with this idea and now believe that it is possible to get all browsers to perform correctly.
I will have a further look at my layouts tonight, but in the mean time I have put a simple demo here ~

http://www.s7u.co.uk/layouts/bodyfix.html

Which works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla/Firefox and NN7 on Windows XP Home. Unable to test on any other combination so feedback from users of other combinations would be nice Smile

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: 17 years 32 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Wonderful

I can report it works on the same browsers on WinXP Pro as the platform. But I am sure we could have guessed that.

Bug in netscape on the absolute positioned divs you mention: well I suspect that is as close as we can get cross browser. I'll go through the code and figure out how you did it. The walkthrough above helps a lot thanks.

1.4%for netscape is latest stats (yes I know all about not taking them seriously and the problems inherent in stats assumptions) are to be believed. So some minor bugs ont hat platform don't fret me too much. Any Mac users care to comment, I'd be interested as to the results on a MAC. BTW I am assuming the same rough target audience as the site I am obtaining the stats info from with perhaps a more home user/IE slant. http://www.w3schools.com/browsers/browsers_stats.asp

Sorry about triggering a -beep- with my reference to a certain mythical residence of a horned individual, a residence that is about as likely to freeze over as IE is of correctly supporting standards or having no bugs whatsoever.

MattyUK

Carrots encourage. Sticks enforce. Which is needed here?

prizepatrol
Offline
newbie
Atlanta
Last seen: 14 years 36 weeks ago
Atlanta
Joined: 2004-05-28
Posts: 5
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Been working on my CSS to try to figure out the CSS code needed and haven't gotten it to work. My center div overwrites and scrolls over the head div. Any help appreciated. I think I haven't got my center div positioned correctly. Here is my CSS code:

div#head {
overflow: hidden;
position: absolute;
top: auto;
height: 100px;
width: 100%;
}

div#center {
overflow: auto;
position: absolute;
height: 100%;
border-top: 200px;
border-bottom: 100px;
}

div#foot {
overflow: hidden;
position: absolute;
height: 100px;
width: 100%;
}

My HTML code then is:

<div id=head><h1>This is my Web page heading</h1></div>
<div id=center><p>this is really lots of text and graphics.</p></div>
<div id=foot><p>&nbsp;</p></div>

Thanks for any help,
Roger

Stu wrote:
We can now place divs anywhere on the screen and they will stay 'fixed' as there is no way you can scroll them off screen Smile

So the header and footer divs can be positioned absolutely at the top and bottom of the screen with a fixed height and width 100%.

The centre content can also be positioned absolutely using height 100% and by adding a top and bottom border the same size as the header and footer (100px in this example) they will fit between the header and footer. With IE in quirks mode and Mozilla / Firefox / NN7 these borders are held within the 100% height (the actual content height is reduced by 200px).
Using overflow auto on the content will cause scrollbars to appear when required and only be as high as 100%-200px.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 18 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Here it is

It is important that you use the same xml declaration and doctype as Stu used.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Layout </title>

<style type="text/css">

html {
	height:100%; 
	max-height:100%; 
	overflow:hidden; 
	padding:0; 
	margin:0; 
	border:0; 
	}

body {
	height:100%; 
	max-height:100%; 
	overflow:hidden; 
	padding:0; 
	margin:0; 
	border:0;
	} 

#head {
	position:absolute; 
	top:0; 
	width:100%; 
	min-width:100%; 
	max-width:100%; 
	height:100px; 
	background:#fff; 
	z-index:5;
	padding: 5px; 
	border:1px solid #000;
	}

* html #head {
	top:2px; width:100%; height:98px;
	}

#center {
	display:block; 
	overflow:auto; 
	position:absolute; 
	z-index:3; 
	top:100px; 
	bottom:100px; 
	width:100%; 
	padding: 5px; 
	}

* html #center {
	top:0; 
	bottom:0; 
	height:100%;
	width:100%;
	border-top:100px solid #fff; 
	border-bottom:100px solid #fff;
	}	
	
#foot { 
overflow: hidden; 
position: absolute;
bottom: 0px; 
height: 100px; 
width: 100%; 
} 

#foot {
	position:absolute; 
	bottom:0; 
	width:100%; 
	min-width:100%;
	max-width:100% 
	height:100px; 
	z-index:5; 
	border:1px solid #000;
	}

* html #foot {
	bottom:2px; width:100%; height:98px;
	}


</style>

Nice code Stu!

The only way to learn is to do it yourself

prizepatrol
Offline
newbie
Atlanta
Last seen: 14 years 36 weeks ago
Atlanta
Joined: 2004-05-28
Posts: 5
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Many thanks!! That does the trick. Now to reverse engineer it to see what I missed. Indeed very good code.

Roger Smile

Daybreak_0 wrote:
Here it is

It is important that you use the same xml declaration and doctype as Stu used.

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Combining with float

Stu, cause you are the guru Laughing out loud How do I add something like my attempt at http://www.dummy.nu/divver.html ?

I want the menu to display:block for using bigger space for the content. Of cource I can have the menu in another z-index floating over the content, but that is not an option.

I want the content to fill ALL between the brown divver and the right side, regardless of the content in the contentdiv. click on the + to see what I mees.

The scroll will ONLY be for the content if it is overflow.

Do you think you, or someone else, can solve that? I am even willing to pay for the soloution Wink

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

Frames vs CSS. How to make CSS win?? Article Request.

I think that you are looking for something like this
http://stunicholls.myby.co.uk/cssforum/StibPelle.html

This is a fairly complex layout that requires a bit of understanding before it is modified.
The content div has a left border (220px) in IE but is positioned left:220px in other browsers.
The tab div is positioned absolute with a fixed width of 20px

Hope this is what you are after.

BTW the vertical text will only work in IE.

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

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Stu wrote:
I think that you are looking for something like this
http://stunicholls.myby.co.uk/cssforum/StibPelle.html

This is a fairly complex layout that requires a bit of understanding before it is modified.
The content div has a left border (220px) in IE but is positioned left:220px in other browsers.
The tab div is positioned absolute with a fixed width of 20px

Hope this is what you are after.

BTW the vertical text will only work in IE.
I know that vertical text is IE only, that will be an image later on..

You are correct in the middle layer positions. BUT, if the right content only have "Click me" and not all the "Lorem Ipsum" text, will it still take all space between the tab div and right margin? That is what I want!

And the second, if I click on an Javascript-link with the action to set menu div style 'none' then the tab div should move to "left: 0px" as it does if I use float:left. And the content div should follow and became wider taking up all space between the leftmoved tab-div and the right edge.

See http://www.dummy.nu/divver2.html in IE/PC, if you don't resize the window, and click somewhere in the "tab-div" you will see the effect I am loonging for. My soloution don't work if iI resize the window, and as far as I know only IE support body.onresize?

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

Frames vs CSS. How to make CSS win?? Article Request.

1. The content div will always occupy the same space no matter what text is inserted.

2. The Javascript will need to alter the dimensions of the #tab div and #content div to change ~

#tab {left:0;} /* moves the #tab div to the left hand side */

#content {left:20px;} /* expands #content in Mozilla etc */
* html #content {border-left:20px;} /* reduces the IE #content border to 20px and expands the #content width */

#left {display:none;} /*removes the #left div */

See http://stunicholls.myby.co.uk/cssforum/StibPelle2.html

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

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Stu wrote:
2. The Javascript will need to alter the dimensions of the #tab div and #content div to change ~

well, I guess that has to be the soloution, but how the heck does I write a Javascript that change * html #content??

I will try right now to change * html #content to use class like * html .ContentIn and * html .contentOut and just change ClassName, thatr is much easyer.

Do you otherwise have any suggestions about that?

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

Frames vs CSS. How to make CSS win?? Article Request.

I guess you would check for browser = IE and if yes change the left-border value, if no then change the left margin (using getElementById)

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

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Stu wrote:
I guess you would check for browser = IE and if yes change the left-border value, if no then change the left margin (using getElementById)

Well I will try that.

I just made an example using class and it works.. almost Sad
I have 2 classes XXXXIn and XXXXOut of both tab and content.
I set the classname using ASP like http://www.dummy.nu/divver4.asp?ShowMenu=0 and http://www.dummy.nu/divver4.asp?ShowMenu=1, then it does position it correctly.
But when i change the className with JS it doesnt move the layers. I use that JS in other applications and it does move or change colors etc...

Strange.. ButI will try to just change leftborder/leftmargin and see the magic Wink

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Work hardcoded

Well, I have set the CSS file hardcoded using IF request in ASP and then it works exakt as I want.
http://www.dummy.nu/divver6.asp?ShowMenu=0
http://www.dummy.nu/divver6.asp?ShowMenu=1

But How hard I try i cant get it running with JS Sad

http://www.dummy.nu/divver7.asp
It almost works in IE. I haven't look for some script validating IE and not Opera/Moz acting like IE so I added the &IE=true or &IR=false in the URL to change...
(http://www.dummy.nu/divver7.asp?showMenu=0&IE=true)

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

Frames vs CSS. How to make CSS win?? Article Request.

I have a very basic version
http://stunicholls.myby.co.uk/cssforum/StibPelle.html

which works in IE but not quite there in Firefox (not sure why) but perhaps you can play around with the script.
The other way to achieve this is to have the two CSS styles held in different files which can be loaded 'onClick'.

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

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Stu wrote:
I have a very basic version
http://stunicholls.myby.co.uk/cssforum/StibPelle.html

Well, basic and basic, it works EXAKT the way i want it in IE....

Stu wrote:
but not quite there in Firefox (not sure why) but perhaps you can play around with the script.

I will give it a try, but it seems strange that the left div moves to left but not the content with the same script...???

Stu wrote:
The other way to achieve this is to have the two CSS styles held in different files which can be loaded 'onClick'.

Well, I do'nt want it that way cause I already load diferent CSS due to skincolours...

If you got some time during the weekend please update for Mozilla/Safari. It works 100% correct in IE which I am very greatful for.. Wink

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

Frames vs CSS. How to make CSS win?? Article Request.

I will see what I can do Wink

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

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

Frames vs CSS. How to make CSS win?? Article Request.

Ok ... sorted.

It was really simple once I realised that the value change should be in pixels, so for instance ~

document.getElementById('content').style.left = 20;

becomes

document.getElementById('content').style.left = '20px';

Now works in IE and Firefox etc.

http://stunicholls.myby.co.uk/cssforum/StibPelle.html

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

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Frames vs CSS. How to make CSS win?? Article Request.

Stu wrote:
Ok ... sorted.
document.getElementById('content').style.left = '20px';

Gr8!
I guess i can't write "luve you" but it is almost what I feel at the moment... *bg*

Then the last Q.
document.getElementById('content').style.left = '20px';
If I wanna have it more dymanic, I didn't solve it like
document.getElementById('content').style.left = document.getElementById('tab').style.width +'px';
Or even in isMenu
document.getElementById('content').style.left = document.getElementById('menu').style.width + document.getElementById('tab').style.width +'px';

Any suggestions in that?

I post you afterwords a PM... Wink

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

Frames vs CSS. How to make CSS win?? Article Request.

Use ~

var tabWidth = document.getElementById('tab').offsetWidth + 'px';

and

if (document.all) {document.all('content').style.borderLeftWidth = tabWidth;}
else {document.getElementById('content').style.left = tabWidth;}

Works in IE and Mozilla but not Opera.

http://stunicholls.myby.co.uk/cssforum/StibPelle.html

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