473,394 Members | 1,715 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Footer css positioning problem

Hello

I am close to finishing my first properly css-friendly site (at least I hope
it is), and am looking for some general feedback, plus a specific question
answered, if possible.

http://www.ediecast.co.uk/ is the url.

The specific question is whether anyone can give me any help getting the
footer to actually go at the bottom of the page, rather than staying in the
wrong place, see
http://www.ediecast.co.uk/stocklist/...TyID=36&ScID=1

Any sort of comments are welcome. I have made the Cart pages as clear as
possible - to encourage people not to abandon the shopping process.

Thanks

Richard
Jul 20 '05 #1
2 2142
Els
Tim Charles wrote:
Hello

I am close to finishing my first properly css-friendly site
(at least I hope it is), and am looking for some general
feedback, plus a specific question answered, if possible.

http://www.ediecast.co.uk/ is the url.

The specific question is whether anyone can give me any
help getting the footer to actually go at the bottom of the
page, rather than staying in the wrong place, see
http://www.ediecast.co.uk/stocklist/...sp?ManID=30&Pr
TyID=36&ScID=1

Any sort of comments are welcome.


Try adding a doctype, and then validate the HTML.
http://validator.w3.org/

You've put a <link> element in the footer.
This should be in the head, where you already have it.

You used absolute positioning for the most important divs,
this will never get the footer to the bottom of the page.
Just to scare you a bit: look at your page in a Netscape,
Mozilla or Firefox browser, and press ctrl and '+' once or
twice. This is the direct result of the position:absolute
you're using.
It doesn't do this in IE only, because you used pixels for
font-size, which makes it impossible to scale the size. Very
bad for people with worse eyesight than very good.

Instead, work with floats, and put clear:both on the footer.
put font-size:100% in the body, and use only percentages of
that in other elements where appropriate.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 20 '05 #2
DU
Tim Charles wrote:
Hello

I am close to finishing my first properly css-friendly site (at least I hope
it is), and am looking for some general feedback, plus a specific question
answered, if possible.

http://www.ediecast.co.uk/ is the url.

The specific question is whether anyone can give me any help getting the
footer to actually go at the bottom of the page, rather than staying in the
wrong place, see
http://www.ediecast.co.uk/stocklist/...TyID=36&ScID=1

Any sort of comments are welcome. I have made the Cart pages as clear as
possible - to encourage people not to abandon the shopping process.

Thanks

Richard


You've got hundreds of markup and CSS errors in both files. First,
define a doctype declaration (I recommend you use strict HTML 4.01), put
all your <script>, <link> in the head part and very important, first
validate your document. Elements can not have the same id; id must be
unique for documents. You don't seem to know what improper nesting is:
so you have to start with understanding this very common situation.
You first need to tackle all of these issues. Then and only then,
positioning your footer will be very very easy to do.
I would avoid using absolute positioning, unless this is necessary and
unless of course you know well what abs. pos. means and implies. As far
as I can see, you don't need abs. pos. in your document.

http://validator.w3.org/check?verbos...diecast.co.uk/

http://validator.w3.org/check?verbos...D36%26ScID%3D1

http://jigsaw.w3.org/css-validator/v...diecast.co.uk/

http://jigsaw.w3.org/css-validator/v...D36%26ScID%3D1

Incorrect nesting of elements:
http://www.htmlhelp.com/tools/valida...s.html#nesting

List of valid doctype decl.:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

W3C Quality assurance tips for webmasters:
http://www.w3.org/QA/Tips/

{
Good usage of CSS's font properties
Recommended Practices
(...)
* Do not specify the font-size in pt, or other absolute length
units. They render inconsistently across platforms and can't be resized
by the User Agent (e.g browser).
}
W3C Quality assurance tip for webmasters:
Care with font size
http://www.w3.org/QA/Tips/font-size#goodpractice

DU
Jul 20 '05 #3

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

Similar topics

82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
0
by: Roderik | last post by:
I am trying to place a footer div on the bottom of my webpage, the heigth of the text area above the footer depends on the amount of text. As described at: http://www.archytas.nl/test/problem.php...
2
by: Tristan Miller | last post by:
Greetings. I have a two-column web layout, where the first column is just the regular body text with a "marign-right" of 16em, and the second column is an "absolute"-positioned div with a width...
2
by: Sailor Foley | last post by:
Hey i have created a footer class in a style sheet using absolute positioning but the problem is when i shrink the browser window this footer overlaps the main content as the windows shrinks. I...
1
by: Will Buntin | last post by:
I am trying to design my site without tables, using CSS for positioning and am having limited success. My main issue is I have a three column layout and my footer needs to run across the page,...
7
by: Andrew | last post by:
I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work,...
17
by: Cerebral Believer | last post by:
Hi all, I would like to know how to get two rows of text links to appear at the bottom of a page. Generally I have been using <div> tags with the id attribute and CSS to place blocks of text,...
4
by: john | last post by:
Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web...
7
by: Big Moxy | last post by:
site - http://projects.zanalysts.com/hearingaids1000/default.aspx css - http://projects.zanalysts.com/hearingaids1000/css/styles.css js -...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
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,...
0
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...
0
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...

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.