RE: [WSG] Div-based design example

[Mike Foskett]

John,

Personally I'd avoid position: absolute completely.
In this specific case:
Take the absolute positioning off the copyrighthome div and add a clear all.

#copyrighthome
{
 position: absolute;
 left: 180px;
 top: 460px;
}

becomes

#copyrighthome {margin-left:180px; clear:both}

hope that helps

mike foskett
 
[EMAIL PROTECTED]
http://www.webSemantics.co.uk
 


-Original Message-
From: John Horner [mailto:[EMAIL PROTECTED] 
Sent: 24 August 2004 05:27
To: [EMAIL PROTECTED]
Subject: [WSG] Div-based design example


A friend of mine is working on a div-based design, and as far as I 
can see, has pretty much straight away run up against some common 
problems for CSS-P newbies.

You can see a kind of stripped-down version of it here:

  http://johnhorner.nu/wsg/

and essentially the problems are that the DIVs are fine as long as 
the content fits. So if I hit Apple-Plus (increase font size) twice, 
the font size is too big and two things happen, the upper DIV starts 
to slide behind the lower ones, and the lower ones start to overlap 
the footer. This is in FireFox by the way.

What would members recommend? Does this design, for instance, require 
relative, not absolute positioning?


"Have You Validated Your Code?"
John Horner(+612 / 02) 9333 2110
Senior Developer, ABC Online  http://www.abc.net.au/


**
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
 Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**




**
This email and any files transmitted with it are confidential and
intended solely for the use of the individual or entity to whom they
are addressed. If you have received this email in error please notify
the system manager.
This footnote also confirms that this email message has been swept by
MIMEsweeper for the presence of computer viruses.
www.mimesweeper.com
**


**
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
 Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] Div-based design example

[Nick Gleitzman]

On Tuesday, Aug 24, 2004, at 14:27 Australia/Sydney, John Horner wrote:
What would members recommend? Does this design, for instance, require 
relative, not absolute positioning?
I haven't closely checked the the CSS, but in principal, yes - 
absolutely (umm... yuh.).

I think your friend needs to study up on the theory of document flow. 
JZ's DWWS is a good start.

Absolute positioning is absolute, but relative to something else - in 
this case the browser window. If there's a containing div within which 
the absolutely positioned div is placed, its actual position on the 
screen will change if the containing div is resized - say by text zoom.

CSS-P design must allow for the expansion downwards of layout elements 
on the page as their contents are resized.

Clear as mud? Thought so. Personally, along with floats, I found abs v 
rel positioning one of the trickier concepts to get a handle on. Stick 
with it... it becomes clearer after a while.

HTH
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
**
The discussion list for  http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**