Two Questions | |
Sorry for the somewhat enigmatic subject, but I couldn't find a better one.
I'm doing an "XHTML Strict" page, compatible with IE5+, NN6+, Opera, Mozilla
and as many others as possible. I stumbled over two problems:
1) <div id="outer">
<div id="floated">...</div>
<div id="normal">...</div>
</div>
The div "floated" is floated left, the "normal" div has a left margin wide
enough to "accomodate" the floated div, so they sit happily side by side.
The "normal" div's height is smaller than the "floated" div's height. All
the divs are positioned relative, no explicit height is specified. But when
I put a border around the "outer" div, it actually "covers" only about the
"normal" div, and the "floated" div sort of "leaks out" of the bordered
area. Does floating have a similar effect as "position:absolute", i.e.
taking the div out of the normal flow? But should not even then the
"nestedness" of the divs be preserved?
2) How do I achieve the following (I have tried, but without success):
<div id="top">...</div>
<div id="main">...</div>
<div id="bottom">...</div>
The height of the divs varies, but I want the "main" div to stretch
vertically if necessary so that the "bottom" div will never "rise" above the
bottom of the window, i.e. if the combined heights of the three is not
enough to fill the window vertically, then "main" should be stretched in
height (i.e. empty space should be added at its bottom), but if the combined
heights are greater than the window's height (and thus there is a scrollbar)
then the "bottom" div should not stick at the bottom of the window, but
remain underneath the "main" div.
Thanks in advance,
Thomas | | | | re: Two Questions
Thomas Mlynarczyk wrote:[color=blue]
> 1) <div id="outer">
> <div id="floated">...</div>
> <div id="normal">...</div>
> </div>
>
> The div "floated" is floated left, the "normal" div has a left margin
> wide
> enough to "accomodate" the floated div, so they sit happily side by side.
> The "normal" div's height is smaller than the "floated" div's height. All
> the divs are positioned relative, no explicit height is specified. But
> when I put a border around the "outer" div, it actually "covers" only
> about the "normal" div, and the "floated" div sort of "leaks out" of the
> bordered area. Does floating have a similar effect as "position:absolute",
> i.e. taking the div out of the normal flow? But should not even then the
> "nestedness" of the divs be preserved?[/color] http://www.complexspiral.com/publica...aining-floats/
--
David Dorward <http://dorward.me.uk/> | | | | re: Two Questions
"Thomas Mlynarczyk" <blue_elephant55@hotmail.com> wrote in message
news:buc5ae$lrb$00$1@news.t-online.com...[color=blue]
> 1) <div id="outer">
> <div id="floated">...</div>
> <div id="normal">...</div>
> </div>
>
> The div "floated" is floated left...[/color]
Just a side note, and one of rather minimal importance at that - I don't
know if these are the actual id's of your div's, but it is preferable to
name a div according to its content rather than its position, for HTML is a
markup language, not a presentational one. So perhaps a better structure
would be
<div id="container">
<div id="navigation">...</div>
<div id="content">...</div>
</div>
The reasoning behind this is that you can change layouts with no regard to
the names of the structural elements, because <div id="floated"> links that
div to a specific layout, whereas <div id="navigation"> does not.
Christopher Finke | | | | re: Two Questions
Also sprach Christopher Finke:
[color=blue]
> Just a side note, and one of rather minimal importance at that - I
> don't know if these are the actual id's of your div's, but it is
> preferable to name a div according to its content rather than its
> position, for HTML is a markup language, not a presentational one.[/color]
Ah, yes, of course you are right. In fact, my "real" divs have names which
are more suited to describe their contents.
| | | | re: Two Questions
In article Thomas Mlynarczyk wrote:[color=blue]
> Sorry for the somewhat enigmatic subject, but I couldn't find a better one.
> I'm doing an "XHTML Strict" page, compatible with IE5+, NN6+, Opera, Mozilla
> and as many others as possible. I stumbled over two problems:
>[/color]
[Snip description of correct behaviour on floats.]
[color=blue]
> Does floating have a similar effect as "position:absolute", i.e.
> taking the div out of the normal flow?[/color]
Yes, exept that float changes line-boxes.
[color=blue]
> 2) How do I achieve the following (I have tried, but without success):
>
> <div id="top">...</div>
> <div id="main">...</div>
> <div id="bottom">...</div>
>
> The height of the divs varies, but I want the "main" div to stretch
> vertically if necessary so that the "bottom" div will never "rise" above the
> bottom of the window, i.e. if the combined heights of the three is not
> enough to fill the window vertically, then "main" should be stretched in
> height (i.e. empty space should be added at its bottom), but if the combined
> heights are greater than the window's height (and thus there is a scrollbar)
> then the "bottom" div should not stick at the bottom of the window, but
> remain underneath the "main" div.[/color]
IIRC, this works widely in browsers: http://steve.pugh.net/test/test62.html
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään. | | | | re: Two Questions
Also sprach Lauri Raittila:
[color=blue]
> IIRC, this works widely in browsers:
> http://steve.pugh.net/test/test62.html[/color]
Thanks a lot - it seems to work, except for OP6 which puts the footer
several lines above the bottom when there is a vertical scrollbar (so that,
when scrolling to the top, the footer appears at the bottom of the window).
Is there a way to fix that? One slight drawback: the height of the footer
must be fixed. Although I could specify a relative height like "2em", this
would not take into account possible line wrappings in the footer text. Is
there a solution for this?
Thanks again,
Thomas | | | | re: Two Questions
"Thomas Mlynarczyk" <blue_elephant55@hotmail.com> wrote:[color=blue]
>Also sprach Lauri Raittila:
>[color=green]
>> IIRC, this works widely in browsers:
>> http://steve.pugh.net/test/test62.html[/color][/color]
That's an older version, which also has a problem in Opera 7 whereby
the footer appears off the bottom of screen.
This is fixed in the newer version at: http://steve.pugh.net/test/test57.html (lots of text to show footer at
end of content) http://steve.pugh.net/test/test57a.html (little text to show footer at
bottom of screen)
(Redirect now set up so anyone stumbling across this thread will end
up at the new version)
[color=blue]
>Thanks a lot - it seems to work, except for OP6 which puts the footer
>several lines above the bottom when there is a vertical scrollbar (so that,
>when scrolling to the top, the footer appears at the bottom of the window).
>Is there a way to fix that?[/color]
No, this problem occurs with the newer version as well in Operas 5 and
6. I think the solution is to hide some of the CSS from those Opera
versions so that the footer always follows after the content.
[color=blue]
>One slight drawback: the height of the footer
>must be fixed. Although I could specify a relative height like "2em", this
>would not take into account possible line wrappings in the footer text. Is
>there a solution for this?[/color]
I don't think so. You could leave the footer itself with no height
without any problems, but the content needs a padding-bottom tall
enough to leave room for the footer to be displayed.
Here's a version with no height set on the header or footer and the
absolute positioing of the footer hidden from Opera 5/6. http://steve.pugh.net/test/test57b.html
cheers,
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <steve@pugh.net> <http://steve.pugh.net/> | | | | re: Two Questions
In article Steve Pugh wrote:[color=blue]
> "Thomas Mlynarczyk" <blue_elephant55@hotmail.com> wrote:[color=green]
> >Also sprach Lauri Raittila:
> >[color=darkred]
> >> IIRC, this works widely in browsers:
> >> http://steve.pugh.net/test/test62.html[/color][/color]
>
> That's an older version, which also has a problem in Opera 7 whereby
> the footer appears off the bottom of screen.[/color]
Hm. There is propably some change happened in Opera 7, as there was no
problems using Opera 7.5p1. I remembered that there was problem with
Opera, so I thought that this was the working version as it worked in
Opera 7...
[color=blue]
> This is fixed in the newer version at:
>
> http://steve.pugh.net/test/test57.html (lots of text to show footer at
> end of content)
> http://steve.pugh.net/test/test57a.html (little text to show footer at
> bottom of screen)[/color]
Thanks.
[color=blue]
> (Redirect now set up so anyone stumbling across this thread will end
> up at the new version)[/color]
[color=blue]
> No, this problem occurs with the newer version as well in Operas 5 and
> 6. I think the solution is to hide some of the CSS from those Opera
> versions so that the footer always follows after the content.
>[color=green]
> >One slight drawback: the height of the footer
> >must be fixed. Although I could specify a relative height like "2em", this
> >would not take into account possible line wrappings in the footer text. Is
> >there a solution for this?[/color]
>
> I don't think so. You could leave the footer itself with no height
> without any problems, but the content needs a padding-bottom tall
> enough to leave room for the footer to be displayed.[/color]
There is afaik just one, and IMHO it is not good at all. It is
dublicating footer, and using visibility:hidden; for other and
positioning for other.
I wouldn't use it. It might be considered spamming search engines too.
[color=blue]
> Here's a version with no height set on the header or footer and the
> absolute positioing of the footer hidden from Opera 5/6.
>
> http://steve.pugh.net/test/test57b.html[/color]
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään. | | | | re: Two Questions
Steve Pugh wrote:[color=blue]
>
> Here's a version with no height set on the header or footer and the
> absolute positioing of the footer hidden from Opera 5/6.
>
> http://steve.pugh.net/test/test57b.html[/color]
Perhaps you can adjust this a bit more to hide nasties from MacIE5, too
<URL:http://accessat.c-net.us/screenshots/spugh-macie5.png>
Oddly enough, when I followed a link on this page, then used the browser
"back" button, the footer was magically positioned at the bottom of the
content. A reload returned it to the spot shown in the screen shot.
BTW, Safari doesn't support the min- or max- properties, but at least it
doesn't overlay the footer on any content.
--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted. | | | | re: Two Questions
Also sprach Lauri Raittila:
[color=blue]
> Hm. There is propably some change happened in Opera 7, as there was no
> problems using Opera 7.5p1. I remembered that there was problem with
> Opera, so I thought that this was the working version as it worked in
> Opera 7...[/color]
As far as I have tested, the problem appeared only in OP6 (haven't tested
earlier versions yet). It worked correctly in OP7 - a beta version.
[color=blue][color=green]
>> I don't think so. You could leave the footer itself with no height
>> without any problems, but the content needs a padding-bottom tall
>> enough to leave room for the footer to be displayed.[/color]
>
> There is afaik just one, and IMHO it is not good at all. It is
> dublicating footer, and using visibility:hidden; for other and
> positioning for other.[/color]
<dream>What we would need is something similar to "*" when specifying a
frameset: telling the browser to use all the remaining space.</dream>
| | | | re: Two Questions
Also sprach kchayka:
[color=blue]
> Perhaps you can adjust this a bit more to hide nasties from MacIE5,
> too <URL:http://accessat.c-net.us/screenshots/spugh-macie5.png>
>
> Oddly enough, when I followed a link on this page, then used the
> browser "back" button, the footer was magically positioned at the
> bottom of the content. A reload returned it to the spot shown in the
> screen shot.[/color]
That's what I had experienced with my Opera6. When the footer "rises above
the bottom" it is actually positioned so that it *would* be at the bottom
*if* you scrolled to the top of the page. I suppose the problem can be
solved by hiding some CSS rule from MacIE5, similarly to what was done to
fix the Opera problem.
| | | | re: Two Questions
Also sprach Steve Pugh:
[color=blue]
> http://steve.pugh.net/test/test57b.html[/color]
Works great - thanks a lot :-)))
By the way: the old version had a "top:0; left:0;" specified for the #holder
div, which the new one hasn't. Any particular reason for this? Because (I
think that's the reason) the lack of the explicit positioning causes NN4 to
leave some space (default margin I suppose). And is there any particular
reason why the margin-bottom of the older version (#nav and #content) was
changed to padding-bottom?
Greetings,
Thomas | | | | re: Two Questions
"Thomas Mlynarczyk" <blue_elephant55@hotmail.com> wrote:[color=blue]
>Also sprach Steve Pugh:
>[color=green]
>> http://steve.pugh.net/test/test57b.html[/color]
>
>Works great - thanks a lot :-)))
>By the way: the old version had a "top:0; left:0;" specified for the #holder
>div, which the new one hasn't. Any particular reason for this?[/color]
I can't remember making that change. Sorry.
Looking at the code, #holder still has position: absolute; and the
calculated values of top and left in this case should be 0. I probably
removed them for debugging purposes at some point as they made no
difference forgot to put them back in.
[color=blue]
>Because (I think that's the reason) the lack of the explicit positioning
>causes NN4 to leave some space (default margin I suppose).[/color]
So long as there's no overlapping text in NN4 I think we should be
thankful. At the moment none of the CSS in the test pages is hidden
from NN4 (apart from the workarounds for Opera 5/6) and nothing
horrendous happens, that's quite
[color=blue]
>And is there any particular reason why the margin-bottom of the
>older version (#nav and #content) was changed to padding-bottom?[/color]
Yes. The problem in Opera 7 (at least with the 7.2x versions I tested
with; from other posts it seems that 7.5 may have changed things)
seems to have been that Opera 7 was the only browser to collapse
vertical margins properly and this resulted in the footer being
positioned off the screen. Changing margin-bottom to padding-bottom
solved that. See http://groups.google.com/groups?selm...ews.cis.dfn.de
for the details.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <steve@pugh.net> <http://steve.pugh.net/> | | | | re: Two Questions
kchayka <kcha-un-yka@sihope.com> wrote:
[color=blue]
>Steve Pugh wrote:[color=green]
>>
>> Here's a version with no height set on the header or footer and the
>> absolute positioing of the footer hidden from Opera 5/6.
>>
>> http://steve.pugh.net/test/test57b.html[/color]
>
>Perhaps you can adjust this a bit more to hide nasties from MacIE5, too
><URL:http://accessat.c-net.us/screenshots/spugh-macie5.png>[/color]
Sigh. At least hiding from Mac IE5 is easy. Now done in the version at
the URL above.
[color=blue]
>BTW, Safari doesn't support the min- or max- properties, but at least it
>doesn't overlay the footer on any content.[/color]
I really don't know enough about the details of Safari's CSS support.
Win IE doesn't support min-height either but that's not a problem as
it gets height and overflow wrong anyway. What does Safari do? Just
slap the footer after the content regardless?
Hmm, the number of browsers this works in is shrinking all the time.
Still it does work in Win IE5+, Gecko, Opera 7 (7.2 only?) and
degrades gracefully in the rest.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <steve@pugh.net> <http://steve.pugh.net/> | | | | re: Two Questions
Lauri Raittila <lauri@raittila.cjb.net> wrote:[color=blue]
>In article Steve Pugh wrote:[color=green]
>> "Thomas Mlynarczyk" <blue_elephant55@hotmail.com> wrote:[color=darkred]
>> >Also sprach Lauri Raittila:
>> >
>> >> IIRC, this works widely in browsers:
>> >> http://steve.pugh.net/test/test62.html[/color]
>>
>> That's an older version, which also has a problem in Opera 7 whereby
>> the footer appears off the bottom of screen.[/color]
>
>Hm. There is propably some change happened in Opera 7, as there was no
>problems using Opera 7.5p1. I remembered that there was problem with
>Opera, so I thought that this was the working version as it worked in
>Opera 7...[/color]
The problem was definitely there this morning in Opera 7.23.
I've not downloaded the 7.5 beta yet. I've also had reports of other
problems in 7.11. Sometimes I think that Opera moves far too fast to
keep up with.
cheers,
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <steve@pugh.net> <http://steve.pugh.net/> | | | | re: Two Questions
Also sprach Steve Pugh:
[color=blue]
> Looking at the code, #holder still has position: absolute; and the
> calculated values of top and left in this case should be 0. I probably
> removed them for debugging purposes at some point as they made no
> difference forgot to put them back in.[/color]
But it seems they do in fact make a difference to NN4 - I just tested:
without them, the #header is offset by a few pixels from the top left
corner, with them, it is not. Of course, with NN4, #header and #footer don't
stretch to the full width of the window, nor does the #footer stick to the
bottom when there is little content, but considering what one is used to
when it comes to displaying a page in NN4, your code works very well indeed.
Greetings,
Thomas
| | | | re: Two Questions
Steve Pugh wrote:[color=blue][color=green][color=darkred]
>>>
>>> http://steve.pugh.net/test/test57b.html[/color][/color]
>
> What does Safari do? Just
> slap the footer after the content regardless?[/color]
Yup, at least build 85 does.
--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted. | | | | re: Two Questions
kchayka wrote:[color=blue]
>
> Safari doesn't support the min- or max- properties[/color]
Ouch. That's quite disappointing for a browser that seems so good
otherwise. I've only played with it a bit at my sister's, so maybe
it's not all I thought it was.
--
Brian (follow directions in my address to email me) http://www.tsmchughs.com/ |  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,295 network members.
|
