Re: [WSG] Centre DIV Vertically? Any compliant methods?

[Matthew Cruickshank]

Dean Jackson wrote:
Yeah! Wouldn't it have been fantastic to have a real multi-column,
grid-like layout mechanism? (It probably *still* would be fantastic to
have one :).
Yeah, although I'm glad tables are gone the one thing I miss is the 
width or height of one cell affecting the next. Grids were useful that 
way. It's annoying to have to manually lay out divs, and make sure 
things don't overlap.

One way of doing grids for layout would be dockable divs. It'd be a nice 
way of ensuring things don't overlap, and it'd easily allow footers 
extending across the whole page. Eg,

...
...
...
#menu {dock: left #content; width:30%}
#content {left:30%;width:70%;}
#footer {dock: bottom #content; width:100%;}
There's also the related issue of keeping constant heights and widths 
across divs (in case #menu is longer than #content), perhaps with a 
syntax of,

#menu {dock: left #content; share-max-height: #content; width:30% }
#content {left:30%; share-max-height: #menu; width:70%;}
#footer {dock: bottom #content; width:100%;}
I guess this wishlist is deviating a bit from web standards so I'll stop 
now ;)

.Matthew Cruickshank
http://holloway.co.nz/

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

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[Dean Jackson]

On 23 Feb 2005, at 09:49, John Allsopp wrote:
John,
What I want is the ability to align the content of a DIV, for 
instance, or any block element, vertically, and I'm asking why it 
wasn't included in CSS-1.

I can't think of any policy-type reason why it wasn't, that's all, 
and I don't see vertical alignment as being directly related to 
table-cell display either.
I think you want the 'display-align' property from XSL:FO.
http://www.w3.org/TR/xsl/slice7.html#area-alignment
Unfortunately, it's not available in CSS 1, 2, 2.1 or 3 (yet?). It will
be available in SVG 1.2 (we added a new property before realising
that XSL:FO had already done it "the right way").
I wouldn't be surprised if Bert gave a reason as to why 'display-align'
will not be in CSS.
I can't speak for Hakon Lie or Bert Bos  but...
The original proposal was taking shape in 95/95, really before the 
abomination of tables for layout had ruined the web :-)

So I'm guessing that it simply wasn't something everyone wanted to do, 
like it is now.

Ditto multi column layout f'rinstance.
Yeah! Wouldn't it have been fantastic to have a real multi-column,
grid-like layout mechanism? (It probably *still* would be fantastic to
have one :).
It would also be nice to bind an HTML element to a particular cell
in the layout, allowing the author to order the source in the most
appropriate manner and not resort to floats and abs positioning to
achieve the layout they desire.
Maybe Bert will have an answer :-)
In my experience Bert always has the answer, and if I notice
I disagree with him then that's usually first step towards
realising I'm wrong :)
Dean
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[Matthew Cruickshank]

John Horner wrote:
You have a point, but that's CSS version *two*, isn't it?
What I want is the ability to align the content of a DIV, for 
instance, or any block element, vertically, and I'm asking why it 
wasn't included in CSS-1.

I can't think of any policy-type reason why it wasn't, that's all, and 
I don't see vertical alignment as being directly related to table-cell 
display either.
CSS-1 didn't have hardly any layout ability, just text/list styling and 
some padding/margins for blocks. It just had floats for layout, and no 
absolute positioning < http://www.w3.org/TR/REC-CSS1 >.

What I mean to say is that vertical positioning was probably a minor 
concern until they got the basic layout concepts done in CSS2.

But yeah, it seems crazy that they didn't reimplement basic layout 
features already available in HTML.

//
About accessible ways to avoid spam. For web form submissions some sites 
use images of text to try and make it difficult for computers to parse, 
and to hopefully ensure a person's at the other end (which obviously 
excludes blind people, as the images intentionally don't have ALT text). 
This technique can be broken by spammers too < 
http://sam.zoy.org/projects/pwntcha/ >. I guess another approach would 
be using sentences, as in "write the 4th word in the following sentence 
into the box labelled Passcode", but unfortunately it's only a matter of 
time until that's broken too.

.Matthew Cruickshank
http://holloway.co.nz/
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[John Allsopp]

John,
What I want is the ability to align the content of a DIV, for 
instance, or any block element, vertically, and I'm asking why it 
wasn't included in CSS-1.

I can't think of any policy-type reason why it wasn't, that's all, and 
I don't see vertical alignment as being directly related to table-cell 
display either.
I can't speak for Hakon Lie or Bert Bos  but...
The original proposal was taking shape in 95/95, really before the 
abomination of tables for layout had ruined the web :-)

So I'm guessing that it simply wasn't something everyone wanted to do, 
like it is now.

Ditto multi column layout f'rinstance.
Maybe Bert will have an answer :-)
John
John Allsopp
:: westciv :: http://www.westciv.com/
software, courses, resources for a standards based web
:: style master blog :: http://westciv.typepad.com/dog_or_higher/
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[John Horner]

centered
The word "centered" is nicely centered (at least in FF).
Internet Explorer does not support table-cell, or table-row for
display, but this is not the fault of CSS.
You have a point, but that's CSS version *two*, isn't it?
What I want is the ability to align the content of a DIV, for 
instance, or any block element, vertically, and I'm asking why it 
wasn't included in CSS-1.

I can't think of any policy-type reason why it wasn't, that's all, 
and I don't see vertical alignment as being directly related to 
table-cell display either.


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

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

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[Rimantas Liubertas]

On Tue, 22 Feb 2005 09:41:39 +1100, John Horner <[EMAIL PROTECTED]> wrote:
> Slightly off-[this]topic, but does anyone have an explanation for how
> vertical alignment got "missed" in the creation of CSS? This topic
> comes up again and again. I mean, forgive me for being crass, but did
> they just forget? Or was it not considered necessary?
> I imagined that they would have a big list called "Stuff You Can
> Already Do" which they worked through -- and vertical alignment
> should have been on it...
<...>

Let's recall how did we do that  "Stuff You Can Already Do" -- placing
content into the table cell and putting and using attribute
valign="middle".

Now try this:
centered

The word "centered" is nicely centered (at least in FF).
Internet Explorer does not support table-cell, or table-row for
display, but this is not the fault
of CSS.

You may also be interested in this:
http://www.456bereastreet.com/lab/equal_height/

Regards,
Rimantas
--
http://rimantas.com/
**
The discussion list for  http://webstandardsgroup.org/

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

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[Isac Backlund]

Joey skrev:
Hi Everyone,
I wondered if anyone has a solution on how to centre a DIV vertically. 
I found this information, 
_http://www.quirksmode.org/css/centering.html_ but its uses a table. 
And I don’t want to use a table as I am conforming to WAI AAA.

Anyone know any methods to centre vertically using standard code???
Cheers guys
Josef
Hi.
maybe this could help http://www.456bereastreet.com/lab/centered/both/
mv icaaq
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[John Horner]

Slightly off-[this]topic, but does anyone have an explanation for how 
vertical alignment got "missed" in the creation of CSS? This topic 
comes up again and again. I mean, forgive me for being crass, but did 
they just forget? Or was it not considered necessary?

I imagined that they would have a big list called "Stuff You Can 
Already Do" which they worked through -- and vertical alignment 
should have been on it...

It offends my sense of logic to see all these complex hacks and 
workarounds for such a simple thing.

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

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

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

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[designer]

Hi Joey,

I've wanted to do this for ages, and never found a solution which is rigid
AND which works in IE. In addition, the published methods usually need you
to know the dimensions of the div you are centering, and I want a method
which centers both horizontally AND vertically, nomatter what size the
content.

It can be done by purely standards methods as follows:


body, html {
 margin  : 0;
 padding  : 0;
 height  : 100%;
}
#layoutgrid{
 display  : table;
 height  : 100%;
 width  : 100%;
}
#layoutgridinner {
 display : table-cell;
 vertical-align : middle;
 text-align  : center;
}
-->





  
middle
  



But, Since IE doesn't support  'display table-cell' it will only work in
other standards browsers, like Firefox.


So, the only way I've found which is usable in the real world,  uses a
single-cell
table, and so I use it with a clear conscience! :-) Here it is:


  
  /* Thanks to Rimantas Liubertas <[EMAIL PROTECTED]> for suggesting 'td'
*/
  body, html {
   margin  : 0;
   padding  : 0;
   height  : 100%;
  }
  #layoutgrid{
   display  : table;
   height  : 100%;
   width  : 100%;
  }
  #layoutgrid td {
   vertical-align : middle;
   text-align  : center;
  }
  -->
  


  
  


  
middle
  

  
  

I believe that when the table-less approach fails (as it does here), it is
acceptable to use one, so long as it is minimal !

Not what you asked for, but I HTH.

Bob McClelland,
Cornwall (U.K.)
www.gwelanmor-internet.co.uk

- Original Message - 
From: Joey
To: wsg@webstandardsgroup.org
Sent: Monday, February 21, 2005 6:17 PM
Subject: [WSG] Centre DIV Vertically? Any compliant methods?


Hi Everyone,
I wondered if anyone has a solution on how to centre a DIV vertically. I
found this information, http://www.quirksmode.org/css/centering.html but its
uses a table. And I don't want to use a table as I am conforming to WAI AAA.
Anyone know any methods to centre vertically using standard code???
Cheers guys
Josef

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

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

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[David Laakso]

On Tue, 22 Feb 2005 07:19:12 +1300, Darren Wood  
<[EMAIL PROTECTED]> wrote:

Joey wrote:
Hi Everyone,
 I wondered if anyone has a solution on how to centre a DIV vertically.

Josef,
I've seen this a couple times:
http://www.wpdfd.com/editorial/thebox/deadcentre3.html
It doesn't use tables, and I'm fairly sure its compliant.
HTH
Darren
I'ts compliant; however, with that method  if the browser window is  
smaller than the centered content, it crops it off without giving you  
scrollbars.
David

--
de gustibus non est disputandum
http://www.dlaakso.com/
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[David Laakso]

On Mon, 21 Feb 2005 18:17:08 -, Joey <[EMAIL PROTECTED]>  
wrote:

I wondered if anyone has a solution on how to centre a DIV vertically. I
found this information, http://www.quirksmode.org/css/centering.html
...
Josef

David
--
de gustibus non est disputandum
http://www.dlaakso.com/
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] Centre DIV Vertically? Any compliant methods?

[Darren Wood]

Joey wrote:
Hi Everyone,
I wondered if anyone has a solution on how to centre a DIV vertically. I 
found this information, _http://www.quirksmode.org/css/centering.html_ 
but its uses a table. And I don’t want to use a table as I am conforming 
to WAI AAA.

Anyone know any methods to centre vertically using standard code???
Cheers guys
Josef
Josef,
I've seen this a couple times:
http://www.wpdfd.com/editorial/thebox/deadcentre3.html
It doesn't use tables, and I'm fairly sure its compliant.
HTH
Darren
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**