473,837 Members | 1,611 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Header, Footer, Content Layout using DIV and CSS?

Hi,

I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the
bottom using fixed height and a content layer using what's left of the browsers window.

So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px
and the content is defined as top:40px;bottom :40px;

This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement of
the content div, if a top statement is given.

How do I realize it correctly?
Aug 19 '06 #1
11 16594
Grischa Brockhaus <z0****@arcor.d ewrote:
>I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the
bottom using fixed height and a content layer using what's left of the browsers window.
A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.
>So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px
and the content is defined as top:40px;bottom :40px;
Given that the header and/or the footer contain text, using px units is
a bad decision, remember that you only have limited say over the text
size at the client end.
>This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement of
the content div, if a top statement is given.

How do I realize it correctly?
IE doesn't support CSS2 well enough to do what you want. You's also need
"position:fixed " support for the footer which IE also doesn't do.

The layout you want suffers from a serious problem, it requires
generating a scrollbar on the "content" div, in-document scroll bars are
a usability nightmare. The only half decent browser support for
in-document scrolling panes is through frames, and as I hope you know,
frames come with a raft of problems of their own.

So you'd do well to bin the idea.

--
Spartanicus
Aug 19 '06 #2
Spartanicus schrieb:
>I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the
bottom using fixed height and a content layer using what's left of the browsers window.

A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.
It holds advertisement images.
>So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px
and the content is defined as top:40px;bottom :40px;

Given that the header and/or the footer contain text, using px units is
a bad decision, remember that you only have limited say over the text
size at the client end.
Header and footer (nearly) contains images only.
>This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement of
the content div, if a top statement is given.

How do I realize it correctly?

IE doesn't support CSS2 well enough to do what you want. You's also need
"position:fixed " support for the footer which IE also doesn't do.
"absolute" works with firefox, too.
The layout you want suffers from a serious problem, it requires
generating a scrollbar on the "content" div, in-document scroll bars are
a usability nightmare. The only half decent browser support for
in-document scrolling panes is through frames, and as I hope you know,
frames come with a raft of problems of their own.
Scrollbars are no problem, too, the content div only holds an iframe (having scrollbars itself).

So.. Is there an answer to my problem not only a discussion about good and bad layout? I *have* to
do it that way, as the customer wants it that way. Is there a solution? Or do I have to go back to
tables and frames for this? :-/

Thanks for input..

Grischa
Aug 19 '06 #3
Grischa Brockhaus <z0****@arcor.d ewrote:
>A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.

It holds advertisement images.
Let them scroll.
>Given that the header and/or the footer contain text, using px units is
a bad decision, remember that you only have limited say over the text
size at the client end.

Header and footer (nearly) contains images only.
Nearly doesn't suffice.
>IE doesn't support CSS2 well enough to do what you want. You's also need
"position:fixe d" support for the footer which IE also doesn't do.

"absolute" works with firefox, too.
Try scrolling this: http://homepage.ntlworld.ie/spartanicus/temp2.htm
>The layout you want suffers from a serious problem, it requires
generating a scrollbar on the "content" div, in-document scroll bars are
a usability nightmare. The only half decent browser support for
in-document scrolling panes is through frames, and as I hope you know,
frames come with a raft of problems of their own.

Scrollbars are no problem, too, the content div only holds an iframe (having scrollbars itself).
Iframes have all the problems that regular frames suffer from with the
added disadvantage that clients support is not as good.
>So.. Is there an answer to my problem not only a discussion about good and bad layout?
This is a usenet discussion group, not your personal help desk. Propose
something here and we will discuss the implications, like it or not.
>I *have* to do it that way, as the customer wants it that way.
Customers rarely have a clue about web design, you don't have that
excuse. It's your job to deliver something that works well.
>Is there a solution? Or do I have to go back to
tables and frames for this? :-/
See my previous message.

--
Spartanicus
Aug 19 '06 #4
Spartanicus schrieb:
>Is there a solution? Or do I have to go back to
tables and frames for this? :-/

See my previous message.
Okay.. I have to find the solution on my own, I guess.. I didn't want to discuss abstract layout
stuff, I just had a simple question about fixing a DIV. I understand your point of view, but this
doesn't help here really..

To make it more accurate: I need an iframe in the middle of the page, having an dynamic height and
fixed distance to top and bottom. There is no way of getting rid of the IFrame, as this is the
meaning of the page.

At the moment I put it into a div and give the iframe a height of 100%, but I am not able to fix the
div the way I would like to have it. If there is another way of fixing an iframe this way, I would
be happy to hear about this. I know how to do this with javascript, but this is and looks very nasty
for my taste (dynamically adjusting the iframes height by reading the browser window height).

Thanks for your input anyway..

Grischa
Aug 19 '06 #5
Spartanicus schrieb:
>So.. Is there an answer to my problem not only a discussion about good and bad layout?

This is a usenet discussion group, not your personal help desk. Propose
something here and we will discuss the implications, like it or not.
Oh, I overlooked this one.

Yes, of course, you are right at this point. I didn't meant to disallow this, of course, I just
asked, if there is some input *beside* of this, that helps solving my problem.

Sorry, if I sound too rude, English is not my mothers tongue.

Grischa
Aug 19 '06 #6
Gazing into my crystal ball I observed Grischa Brockhaus
<z0****@arcor.d ewriting in
news:44******** **************@ newsspool1.arco r-online.net:
To make it more accurate: I need an iframe in the middle of the page,
having an dynamic height and fixed distance to top and bottom. There
is no way of getting rid of the IFrame, as this is the meaning of the
page.

You have to be sure that the content is available for those that cannot
access an Iframe, it its content is that important.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Aug 19 '06 #7
AES
In article <p3************ *************** *****@4ax.com>,
Spartanicus <in*****@invali d.invalidwrote:
A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.
1) Many professional-caliber applications display workspace windows
with one or more toolbars across the top, another toolbar in a footer
across the bottom, and a scrollable workspace in between. These "footer
toolbars" may contain secondary tools, information boxes, buttons, or
useful links. I find this a very useful design concept (in competition
with floating palettes all over the screen or the workspace for example).

2) Many search engines, online forums, bibliographic reference sites,
travel booking sites, and professional-caliber online databases may
respond to a query with many tens of pages of information, often with
page lengths longer than normal screen heights at comfortable type sizes
and widths (with Google as just one prime example).

To step ahead by one or several pages in these applications, you
typically have to scroll to the bottom of the current page to get to the
Next and Previous buttons or the array of clickable page numbers -- and
the page you jump to will typically open scrolled to the top of the
page, so you have to scroll down again if you need to make another jump.

I can see why new pages should open this way; I have less understanding
why the links for further navigation can't be at the top rather than the
bottom of these pages. But it's another frequently occurring situation
where a fixed footer with navigation links in it could be very useful.
Aug 20 '06 #8
AES <si*****@stanfo rd.eduwrote:
>A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.

1) Many professional-caliber applications display workspace windows
with one or more toolbars across the top, another toolbar in a footer
across the bottom, and a scrollable workspace in between.
"Foot'er noun a line of type printed at the foot of each page
(printing); football (colloquial)."

(c) Larousse plc. All rights reserved

A UI bar at the bottom of the screen in so called "web-applications" is
not a footer.

--
Spartanicus
Aug 20 '06 #9
"Spartanicu s" <in*****@invali d.invalidwrote in message
news:u1******** *************** *********@4ax.c om...
[SNIP]
"Foot'er noun a line of type printed at the foot of each page
(printing); football (colloquial)."

(c) Larousse plc. All rights reserved

A UI bar at the bottom of the screen in so called "web-applications" is
not a footer.
What is it called to differentiate it from the banner at the top, the
sidebar for onsite navigation on the left, and the adbar for offsite
navigation (eg. sponsored sites, eCommerce, advertisements) on the right?

Thanks in Advance...

--
Timothy Casey GPEMC! >11950 is the nu****@fieldcra ft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz
Aug 20 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

16
6175
by: Dan V. | last post by:
How do you do a css 2 column layout with header and footer, with the 2nd column auto-stretching so entire page looks good for 800 x 600 resolution as min. and 1024 x 768 resolution as a max? Ideally the layout would be centered so it scales better visually. This would be great for me. Thanks,
4
1945
by: sonya11 | last post by:
hi all, sorry I realize the topic is well known, anyway is there a way without using javascript to have a footer always under a 3 column layout with Absolute Positioning ? I don' t want to use float 'cause I want to organize content in a better order for accessibility and search engine optimization ( content first ) and I cannot know in advance the height of the central column 'cause the content is taken
1
4811
by: AndrewF | last post by:
Hi all, I am sure something like this has been covered somewhere so I am hoping a quick answer or pointer may suffice, however a couple of days trawling and I can't find anything on it. I'm building a layout and for reasons of PDA and text based browsers I want to have my primary navigation at the bottom of the HTML layout. Thus the main content and supplementar content are positioned higher in the document structure then the links go...
7
8736
by: xkeops | last post by:
Thinking of creating a website, most of the pages will have a general toolbar menu, a content and a footer. The content will be the only one who's gonna change but the rest (header,footer) will remain the same. I am interested to know your opinions/suggestions in finding an easy way of doing it. In asp one could have something like this:
2
1695
by: ~john | last post by:
I'm trying to get my header to have 2 images, one for the top left and one for the top right. Here's a link to my page... http://levelwave.com/dev/div/index.html and will eventually be images but what I'm wanting is for the to be aligned left and to be aligned right. As of now they're both squished to the left and I'm not sure how to change my CSS to do this.
1
2728
by: KoosHopeloos | last post by:
L.S., I'm trying to make a layout which is completely fixed in width and height if needed by using three divs rows (header, content, footer) which have each 3 div again to be able to play around better with the webdesign. The problem is that I need the content div row to nudge up automatically to the header div row, independantly of the header height. The same goes for the footer/content div row.
2
1794
by: Mel | last post by:
I have a master page where I want to define a header (centered at top of browser window), content, and footer (centered at bottom of browser window). Then I can apply this master page layout to all of my other pages. Can anyone direct me to some resources to implement this type of web page? Can I do it with CSS? If so, how? Anyone have any examples? - Mel
2
3197
by: darkzone | last post by:
Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in the header, a container a 20% wide box for a list, two 80% wide boxes for content, a footer with the same image set up to end it. It was looking almost there for white but the footer image could now be viewed. ?= <!DOCTYPE HTML PUBLIC...
0
2217
by: krishnagovindaraj | last post by:
Hi, I have to create word document with header and footer..its working in web layout.In Print Layput,the header is displayed two times..Plz give me the solution...its very urgent.. strBody = "<html xmlns:o='urn:schemas-microsoft-com:office:office' " & _ "xmlns:w='urn:schemas-microsoft-com:office:word'" & _ "xmlns='http://www.w3.org/TR/REC-html40'>" strBody = strBody + "<!-->" & _ "<xml>" & _ "<w:WordDocument>" & _
0
9843
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9682
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10875
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10566
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10623
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9401
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5669
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4474
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4040
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.