Trouble structuring my site

Z

zacariaz

Imagine this:
The site layout is split in three parts: 'top', 'middle' and 'bottom'.
all three parts are 100% width, 'top' and 'bottom' are x pixels high
and middle hight is to fill the rest of the page. Standard scrolling
is disabled and 'middle' is set to (css) 'overflow:auto'.
Problems:
1. i can't get the structure right without using table, but tables are
not my favorit solution and it seems to me that it should be possible
doing it just with 'div' tags and css.
2. I have been unable to specify a doctype which allows (css)
'overflow', all though it works without a doctype.
3. (css) 'overflow' doesn't work, with or without doctype, in 'Mozilla
Firefox'.

I have tried over nad over again, i've asked at various forums etc.
but seemingly there is not solution to the problem... I refuse to
accept that.

I hope you can help.


Regards
 
C

Chris F.A. Johnson

Imagine this:
The site layout is split in three parts: 'top', 'middle' and 'bottom'.
all three parts are 100% width, 'top' and 'bottom' are x pixels high
and middle hight is to fill the rest of the page. Standard scrolling
is disabled and 'middle' is set to (css) 'overflow:auto'.
Problems:

The problems are stated clearly in your first paragraph.

You have no idea what anyone's browser window look like. Setting a
height in pixels (for anything other than a fixed-size object like
an image) is doomed to failure.
1. i can't get the structure right without using table, but tables are
not my favorit solution and it seems to me that it should be possible
doing it just with 'div' tags and css.

It is possible. You are trying to do the wrong thing.
2. I have been unable to specify a doctype which allows (css)
'overflow', all though it works without a doctype.

It works in HTML 4.01 strict.
3. (css) 'overflow' doesn't work, with or without doctype, in 'Mozilla
Firefox'.

It works in my Firefox browser.
I have tried over nad over again, i've asked at various forums etc.
but seemingly there is not solution to the problem... I refuse to
accept that.

Post a URL demonstrating the problem.
 
Z

zacariaz

The problems are stated clearly in your first paragraph.

You have no idea what anyone's browser window look like. Setting a
height in pixels (for anything other than a fixed-size object like
an image) is doomed to failure.
I know for a fact that it is possible with the use of tables, an
example:
http://www.zacariazdisciples.net/g33kz-inn/ (doesnt work as i have
specified doctype, but it should be clear from the code)
It is possible. You are trying to do the wrong thing.
Yes, but it seems to me that if it is possible in tables it should
allso be possible by the use of divs, but maybe im mistaken.
It works in HTML 4.01 strict.
this is the doctype i am currently using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
If this is correct, im really confused, assuming you are correct of
course.
It works in my Firefox browser.
well it doesnt in mine, but it may allso have to do with the fact that
i this havent solved the doctype problem.
Post a URL demonstrating the problem.
http://www.zacariazdisciples.net/g33kz-inn/index.htm
http://www.zacariazdisciples.net/g33kz-inn/layout.jpg (what it is
suposed to look like and does in IE without specityed doctype)
 
Z

zacariaz

edit:
I read that wrong.
What you are saying here is contradiction it self.
1. you say it is possible.
2. you say im trying to do the wrong thing, e.g. its not possible? or
do you mean that i am using the wrong methode? In than case i would
like to know how.
 
R

Rob Waaijenberg

(e-mail address removed) schreef:
edit:

I read that wrong.
What you are saying here is contradiction it self.
1. you say it is possible.
2. you say im trying to do the wrong thing, e.g. its not possible? or
do you mean that i am using the wrong methode? In than case i would
like to know how.

Other possibily: you are trying to achieve the wrong effect.
(that would not contradite it being possible)
 
Z

zacariaz

ok, so youre saying that:

<body style="height:100%">
<div style="height:xpx">top</div>
<div style="height:100%">middle</div>
<div style="height:xpx">bottom</div>
</body>

is just not possible?
 
J

julian.bash

ok, so youre saying that:

<body style="height:100%">
<div style="height:xpx">top</div>
<div style="height:100%">middle</div>
<div style="height:xpx">bottom</div>
</body>

is just not possible?

You should use absolute positioning, like this:

div { position:absolute; width:100%; }
#top { height:100px; }
#middle { height:100%; margin-top:100px; margin-bottom:100px; }
#bottom { height:100px; bottom:0; }
// Make it work in ie (bottom:0 doesn't work, javascript needed)
#bottom { margin-top: expression(document.body.clientHeight-100); }

Read more about absolute positioning here: <http://www.alistapart.com/
articles/conflictingabsolutepositions>

--Julian
 
D

dorayme

ok, so youre saying that:

<body style="height:100%">
<div style="height:xpx">top</div>
<div style="height:100%">middle</div>
<div style="height:xpx">bottom</div>
</body>

is just not possible?

if x>0, how can this be possible? Forget about anything else,
just look at your code here.
 
Z

zacariaz

You should use absolute positioning, like this:

div { position:absolute; width:100%; }
#top { height:100px; }
#middle { height:100%; margin-top:100px; margin-bottom:100px; }
#bottom { height:100px; bottom:0; }
// Make it work in ie (bottom:0 doesn't work, javascript needed)
#bottom { margin-top: expression(document.body.clientHeight-100); }

Read more about absolute positioning here: <http://www.alistapart.com/
articles/conflictingabsolutepositions>

--Julian

This approach doesnt seem to work neither in IE or MZ with or without
doctype.
 
J

julian.bash

Wouldn't that would make the total height 100% plus 200px?

You're right, this works for me:

body { margin:0; }
div { position:absolute; width:100%; }
#top { height:100px; }
#middle { top:100px; bottom:100px; }
#middle { height:expression(document.body.clientHeight-100); }
#bottom { height:100px; bottom:0; }
#bottom { margin-top:expression(document.body.clientHeight-100); }

--Julian
 
Z

zacariaz

Ok, it is pretty clear by now that it is a problem without a perfect
solution, however there are ways, so i wont bother with that anymore.
Still thee is the overflow problem, no matter which doctype i specity,
it just wont support overflow.
current doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
 
K

Kevin Scholl

Ok, it is pretty clear by now that it is a problem without a perfect
solution, however there are ways, so i wont bother with that anymore.
Still thee is the overflow problem, no matter which doctype i specity,
it just wont support overflow.
current doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">

There is rarely a "perfect" solution. However, what you are trying to
achieve is quite possible. Do a Google search for "sticky footer". Here
is one tutorial:

http://www.themaninblue.com/experiment/footerStickAlt/

--

*** Remove the DELETE from my address to reply ***

======================================================
Kevin Scholl http://www.ksscholl.com/
(e-mail address removed)
 
R

Rob Waaijenberg

(e-mail address removed) schreef:
Ok, it is pretty clear by now that it is a problem without a perfect
solution, however there are ways, so i wont bother with that anymore.
Still thee is the overflow problem, no matter which doctype i specity,
it just wont support overflow.
current doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">

Would you please quote the texts that you are replying to.
 
A

Andy Dingley

The site layout is split in three parts: 'top', 'middle' and 'bottom'.
all three parts are 100% width, 'top' and 'bottom' are x pixels high
and middle hight is to fill the rest of the page. Standard scrolling
is disabled and 'middle' is set to (css) 'overflow:auto'.

"Letterbox" scrolling usually looks ugly. You've limited the effective
window height for reading in and you've swapped the scrolling control
from the window's frame to some embedded frame. Both of these are a
bad idea usability-wise.

If you want "persistent branding", then I'd set the footer to
position:fixed down at the bottom, make it a bit transparent, and then
leave the scrolling of the header and main content to the window frame
itself.

I don't believe you need to have the navigation bar permanently
available like this. Users know where to find it and how to get there
by scrolling upwards. Is your content really so bad that you need to
provide an easy escape route from it? :cool: If it's a bloggish site
then you might well want a floating fixed toolbar for "task" buttons,
but that's not the same as a hefty great 100% width header.
 
Z

zacariaz

I have accepted the fact that it will simply be to much work and if i
ever get it to work, it will probably be so mezzy that it wont
validate and will probably allso be browser specific.

Therefor i have switched to xhtml 1.0 strict, and it works quite
nicely.
http://www.zacariazdisciples.net/G33kz-Inn/xhtml.htm
I have two small problem as it is.
1. In IE i cant make the scrollbar disapear when not needed.
(overflow:auto doesnt work on body)
2. In MZ have a minor problem with a line thats is... well, out of
line.

Other that that it works fine and validates, so thank you for your
help.
 
J

julian.bash

I have accepted the fact that it will simply be to much work and if i
ever get it to work, it will probably be so mezzy that it wont
validate and will probably allso be browser specific.

Therefor i have switched to xhtml 1.0 strict, and it works quite
nicely.http://www.zacariazdisciples.net/G33kz-Inn/xhtml.htm
I have two small problem as it is.
1. In IE i cant make the scrollbar disapear when not needed.
(overflow:auto doesnt work on body)
2. In MZ have a minor problem with a line thats is... well, out of
line.

Other that that it works fine and validates, so thank you for your
help.

1) Setting html { overflow:auto } shoud work
2) Which line is out of line?
 
Z

zacariaz

1) Setting html { overflow:auto } shoud work
2) Which line is out of line?

do you mean html {overflow:auto} instead of body {overflow:auto} ?
ill try it at once.

in my mozilla browser the line over the menu is too width.
 
Z

zacariaz

do you mean html {overflow:auto} instead of body {overflow:auto} ?
ill try it at once.

in my mozilla browser the line over the menu is too width.- Skjul tekst i anførselstegn -

- Vis tekst i anførselstegn -

Ok, problem one solved (more or less), it is a bit messy af IE and MZ
treath the width of the site different when overflow is activates. But
it works, and it look allright. You can hardly see theres something
wrong.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top