473,795 Members | 2,667 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
11 16585
"Grischa Brockhaus" <z0****@arcor.d ewrote in message
news:44******** *************** @newsspool2.arc or-online.net...
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?
#1 There are print issues to be considered. Make sure that the foot banner
either disappears or is inserted into the flow for print media or it will
obscure text in the printout. There is a *_substantial_* market share held
by printed media as many people prefer to print a web page and take it into
the kitchen to read over a cup of coffee, or outside to read in the sun.
Keep your print media specification simple; B&W, no unnecessary margins,
etc. People who print your material will greatly appreciate your respect of
their economy.
#2 You need to use the Strict HTML 4.01 DTD for fixed containers to work
reliably, which makes frames unreliable and not valid.
#3 IE5, IE5.5, IE6, IE7 all put the scrollbar on the wrong side of the
container edge (inside) making it disappear altogether if the contained
containers are not positioned at least "right:16px ".
#4 IE5, IE5.5, IE6, IE7 all then add the width of the scrollbar to 100% of
the width of the container, so if your scrolling container is supposed to be
100% of screen width and not going to put the scrollbar outside the browser
viewing area, its width needs to be set to 99% instead of 100%!
#5 You now have to write fairly equal code to both IE and Gecko, as IE7 now
reads the hierarchical references in a cascading style sheet just like Gecko
& Opera eg: body>div.conten t {margin:111px 95px 45px 165px}

Points #3 & #4 & #5 present an interesting little conundrum whose solution
leaves a less than equal presentation in browsers not using the IE engine.
This can be compensated for by making the background of the HTML element
equal in colour to the background of your fixed containers. For the
suspicious of mind, the tactic of ignoring key aspects of certain standards
is called, "Market Segmentation".. .

I might suggest that branding and core navigation features such as menu
system and site information toolbar go in the head banner at the top,
localised navigation goes in the sidebar to the left, advertising and
eCommerce goes in the adbar to the right, and if required, qualifications
and reference buttons go in the foot banner along the bottom. See
www.fieldcraft.com.au for an example. Frames cannot be reliably applied
under the strict HTML 4.01 standard. In my experience, the Frameset version
of HTML 4.01 isn't quite so friendly to the practical application of fixed
containers.

On the use of iFrames...

If you are trying to keep the SPAM harvesters out of email contacts and
eCommerce buttons, then encrypt your eCommerce buttons and set your email
contact on an unindexed page (set robots metatag to "noindex,nofoll ow") by
itself with a suitable harvester trap and use mixed plain text, and various
forms of encoding for characters (some starting with #, some with %, & some
with &). The UAs get it but people out to make an easy buck generally don't
have the energy to code around little hurdles like this. Thanks to people
like the folks ate www.monkeys.com/wpoison, SPAMmers are getting the message
that if they don't want to have their databases poisoned all the time, they
have to leave unindexed pages alone.

If you are trying to hide your source code, talk to your hosting provider
and get it tucked away on the server to run server side. This ensures that
everyone benefits from your work and that the only people capable of
stealing your source code are those who wouldn't need it!

If the content is common to multiple pages, then use server side includes to
import from a single file.

Just some thoughts. Hope some of this is useful to you...

--
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 21 '06 #11
"Number 11950 - GPEMC! Replace number with 11950"
<nu****@fieldcr aft.bizwrote:
>"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?
There are few commonly agreed on names for non framed site sections.
Some options are "Navbar", "Sidebar" and "Panel". The adjectives "Top",
"Left", "Right" and "Bottom" can be added to refer to position on
screen.

"Footer" was an established phrase from the print world that is now also
used for web pages. It should refer to a blurb that appears beneath the
content section of a site, a typical example would be a copyright blurb.
Ergo a panel can appear below a footer .

--
Spartanicus
Aug 21 '06 #12

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

Similar topics

16
6167
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
1941
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
4808
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
8731
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
1691
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
2724
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
1788
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
3192
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
2216
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
9672
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
9519
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,...
1
10163
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
9040
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...
1
7538
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6780
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5436
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...
0
5563
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2920
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.