Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > tricky css question

Reply
Thread Tools

tricky css question

 
 
Thomas Scheffler
Guest
Posts: n/a
 
      12-20-2004
Hi,

I have a difficult layout and I don't want to use tables or javascript
for it.

******************************************
* LOGO * <-- variable --> *
******************************************
* ^ * *
* T * *
* i * *
* l * *
* l * *
* * CONTENT *
* B * *
* O * *
* T * *
* T * *
* O * *
* M * *
******************************************
* <-- variable --> *
******************************************

So I hope this can be understood but I try to explain it further.
The page as a logo which is at the top left corner. There is a header
right next to the logo which should expand when the window is resized.
At the left there should be some kind of navigation panel which should
expand to the bottom so the CONTENT should do the same. At the bottom
there is a footer.
So this should be the behaviour: If the content is to big for the page
the user has to scroll of cause. But if not the window should be
"filled" to 100%. This means the footer has to be at least at the bottom
of the browser window. If the window is resized, it should be adjusted
that way. There should be no horizontal scrollbar of cause.
It's easy to implement this with css and a classic table. But how do I
do this with nothing more than CSS and divs?

The diffs should appear in this order for accessibility reasons:
LOGO, HEADER, NAVI, CONTENT, FOOTER...

Is anybody skilled with this knowledge? The best I get was either the
footer is at the bottom of the screen and is overlapping the content partly:

*************************************
* *
* CONTENT IS HERE *
*************************************
* FOOTER *
*************************************
* .... AND HERE *
* *
* *
*************************************

Or the other extreme the footer is always at the bottom of the navi AND
the CONTENT, but this could be the middle of the page, the content and
navi divs are not streched to "nearly 100%" then.
So how do I do this?

Cheers

Thomas
 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      12-20-2004
On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
<(E-Mail Removed)> wrote:

>So this should be the behaviour: If the content is to big for the page
>the user has to scroll of cause. But if not the window should be
>"filled" to 100%. This means the footer has to be at least at the bottom
>of the browser window.


This is tricky. I do have a solution that either works as desired or
degrades to standard page (footer at end of content even if content is
shorter than the window) in most browsers but there are some problems
in, IIRC, Mac IE and older versions of Opera.

See http://steve.pugh.net/test/test57a.html

It's been a while since I looked at it though and I'm unlikely to be
able to dig up my notes this side of Christmas so good luck.

Steve

 
Reply With Quote
 
 
 
 
Kris
Guest
Posts: n/a
 
      12-20-2004
In article <cq7fkl$4as$01$(E-Mail Removed)-online.com>,
Thomas Scheffler <(E-Mail Removed)> wrote:

> The diffs should appear in this order for accessibility reasons:
> LOGO, HEADER, NAVI, CONTENT, FOOTER...


I'd say for the same reasons:
LOGO, CONTENT, FOOTER, NAVI

People visit your page primarily for content. Leaving it is a close
second, but content is still #1.

If you had a navigation of a mere 5 links, who cares, though.

--
Kris
<(E-Mail Removed)> (nl)
 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      12-20-2004
On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
<(E-Mail Removed)> wrote:

> If the content is to big for the page the user has to scroll of cause.
> But if not the window should be "filled" to 100%.


You're describing a particular table layout which CSS isn't capable of
emulating. Well, it can, but it's really tricky.

See <http://users.rcn.com/neal413/testfiles/footertest.html> - I didn't
invent this way of keeping the footer on the bottom, but I don't have the
reference to who did. I used negative margins and various other tricks to
make things work out.

And as always, this is not fully tested, so reports of issues are welcome.
 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      12-20-2004
Steve Pugh:

> See http://steve.pugh.net/test/test57a.html


Ah, so you're who I stole that from!

Credit is being added...

 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-20-2004
On Mon, 20 Dec 2004 17:02:42 -0500, Neal <(E-Mail Removed)> wrote:

>Steve Pugh:
>
>> See http://steve.pugh.net/test/test57a.html

>
>Ah, so you're who I stole that from!
>
>Credit is being added...


But I stole large chunks of it from other people.
I wish I could find who they were so I could give them credit....

Steve

 
Reply With Quote
 
Thomas Scheffler
Guest
Posts: n/a
 
      12-21-2004
Steve Pugh wrote:
> On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
> <(E-Mail Removed)> wrote:
>
>
>>So this should be the behaviour: If the content is to big for the page
>>the user has to scroll of cause. But if not the window should be
>>"filled" to 100%. This means the footer has to be at least at the bottom
>>of the browser window.

>
>
> This is tricky. I do have a solution that either works as desired or
> degrades to standard page (footer at end of content even if content is
> shorter than the window) in most browsers but there are some problems
> in, IIRC, Mac IE and older versions of Opera.
>
> See http://steve.pugh.net/test/test57a.html
>
> It's been a while since I looked at it though and I'm unlikely to be
> able to dig up my notes this side of Christmas so good luck.
>

Thank you for your great example. It works around the most difficult
issue with the footer. But the "height:auto" of the navigation panel did
not work as expected. It's not streched to the footer. Since the
navigation bar can grow on large content to the right. I don't want to
hack by backgrounding the content or holder div here.

Cheers Thomas
 
Reply With Quote
 
Thomas Scheffler
Guest
Posts: n/a
 
      12-21-2004
Thomas Scheffler wrote:
> Steve Pugh wrote:
>
>> On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
>> <(E-Mail Removed)> wrote:
>>
>>
>>> So this should be the behaviour: If the content is to big for the
>>> page the user has to scroll of cause. But if not the window should be
>>> "filled" to 100%. This means the footer has to be at least at the
>>> bottom of the browser window.

>>
>>
>>
>> This is tricky. I do have a solution that either works as desired or
>> degrades to standard page (footer at end of content even if content is
>> shorter than the window) in most browsers but there are some problems
>> in, IIRC, Mac IE and older versions of Opera.
>> See http://steve.pugh.net/test/test57a.html
>>
>> It's been a while since I looked at it though and I'm unlikely to be
>> able to dig up my notes this side of Christmas so good luck.
>>

> Thank you for your great example. It works around the most difficult
> issue with the footer. But the "height:auto" of the navigation panel did
> not work as expected. It's not streched to the footer. Since the
> navigation bar can grow on large content to the right. I don't want to
> hack by backgrounding the content or holder div here.

Another issue I just noticed is the hard width of 150px for the navi
which is needed for the content as the left margin. If the navigation
has some long word, this breaks the layout. As I said this is really
tricky )

Cheers
Thomas
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-21-2004
On Tue, 21 Dec 2004 13:43:56 +0100, Thomas Scheffler
<(E-Mail Removed)> wrote:
>Steve Pugh wrote:
>> On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
>> <(E-Mail Removed)> wrote:
>>
>>>So this should be the behaviour: If the content is to big for the page
>>>the user has to scroll of cause. But if not the window should be
>>>"filled" to 100%. This means the footer has to be at least at the bottom
>>>of the browser window.

>>
>> This is tricky. I do have a solution that either works as desired or
>> degrades to standard page (footer at end of content even if content is
>> shorter than the window) in most browsers but there are some problems
>> in, IIRC, Mac IE and older versions of Opera.
>>
>> See http://steve.pugh.net/test/test57a.html
>>
>> It's been a while since I looked at it though and I'm unlikely to be
>> able to dig up my notes this side of Christmas so good luck.
>>

>Thank you for your great example.


Your welcome.

>But the "height:auto" of the navigation panel did
>not work as expected. It's not streched to the footer.


That is working as expected.

>Since the
>navigation bar can grow on large content to the right. I don't want to
>hack by backgrounding the content or holder div here.


What you do between the header and footer is the same as any other web
page. To have mulitple columns with backgrounds that stretch to the
height of the longest you need to use a trick of some sort and
background images are amongst the most reliable.

It's shame that IE doesn't support CSS tables as
http://steve.pugh.net/test/test72.html demonstrates.

Steve

 
Reply With Quote
 
Thomas Scheffler
Guest
Posts: n/a
 
      12-21-2004
Neal wrote:
> On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
> <(E-Mail Removed)> wrote:
>
>> If the content is to big for the page the user has to scroll of cause.
>> But if not the window should be "filled" to 100%.

>
>
> You're describing a particular table layout which CSS isn't capable of
> emulating. Well, it can, but it's really tricky.
>
> See <http://users.rcn.com/neal413/testfiles/footertest.html> - I didn't
> invent this way of keeping the footer on the bottom, but I don't have
> the reference to who did. I used negative margins and various other
> tricks to make things work out.
>
> And as always, this is not fully tested, so reports of issues are welcome.

Hi,

thanks for your response. The issue is that your navi-div named column
is not as long as to the bottom, which makes it difficult to change the
background here. It's also affected by long words which does not expand
the div to the right and increases the margin-left of the content. I
think is just not possible to pin div togehter in just a complex manner.
The thing of Steve would do the trick if you can have to divs of equal
height: the navi and content div. THen you can have the navi floating to
the left and have no issues with big words in the navi as this increases
the with of it. Also you have no issues withe the content of the content
div floating around the navi div. But I cannot see how this can be achieved.

cheers
Thomas
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: correction: A question about css (was: A question about css) richard HTML 12 03-09-2010 08:52 PM
a tricky if else(maybe not tricky but impossible) nirkheys@gmail.com C Programming 9 04-25-2006 06:13 PM
Tricky JavaScript/ASP.NET Question Roy ASP .Net 2 06-06-2005 01:30 PM
Tricky Replace String Question localhost ASP .Net 6 12-22-2003 02:28 AM
Tricky Question: Page_Load VB Programmer ASP .Net 3 06-30-2003 08:03 PM



Advertisments