Re: [WSG] Vertically aligned text without tables
Good solution, James! > The display:inline declaration was unnecessary in this context. I > accidentally left it in when playing around with the box positioning. It > worked in aye-eeeh 6, but it came unstuck in Opera 6. Maybe it could be > tweaked to work reliably. > * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Vertically aligned text without tables
The display:inline declaration was unnecessary in this context. I
accidentally left it in when playing around with the box positioning. It
worked in aye-eeeh 6, but it came unstuck in Opera 6. Maybe it could be
tweaked to work reliably.
-Original Message-
From: George Karabelas [mailto:[EMAIL PROTECTED]
Sent: Friday, 26 September 2003 12:22 PM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Vertically aligned text without tables
Thanks Russ & James,
James, looks like it should work. I'll play around with it to see if I
can get consistent results. At the moment some of the boxes are offset
by a few pixels in Opera and Mozilla but I feel it's somehow related the
the rest of my page. Thanks!
cheers,
George
> -Original Message-
> From: James Gollan [mailto:[EMAIL PROTECTED]
> Sent: Friday, 26 September 2003 11:00 AM
> To: [EMAIL PROTECTED]
> Subject: RE: [WSG]Vertically aligned text without tables
>
>
> I'm probably missing something here (so just ignore this
> post), but what
> about a containing div with positioning relative, and then
> position your
> boxes within this div. Your text inside is positioned absolutely from
> the bottom of the containing box.
>
>
> #sectionheader
> {
> position:relative;
> }
>
> #box1, #box2, #box3
> {
> position:absolute;
> display:inline;
> margin:10px;
> height:100px;
> width:100px;
> border:1px solid #666;
> }
> #box2 {
> left:110px
> }
> #box3 {
> left:220px
> }
> .bottom_text
> {
> position:absolute;
> bottom:0px;
> margin:10px;
> }
>
>
>
>
>
>
> some text
> more text
> more text
>
>
> It would be more elegant with display:inline for the boxes, but that
> caused problems for Opera (don't know why!??).
>
> James
> -Original Message-
> From: George Karabelas [mailto:[EMAIL PROTECTED]
> Sent: Thursday, 25 September 2003 7:43 PM
> To: [EMAIL PROTECTED]
> Subject: [WSG]Vertically aligned text without tables
>
>
> hi everyone,
>
> Time to stop lurking.
>
> We have recently converted our corporate site
(http://hww.com.au) from a
table based layout to (almost) pure CSS. Unfortunately I have had to use
a table to align text to the bottom of a box. See:
http://hww.com.au/syndication/ (the 3 boxes below the header and above
the content id="subHeading")
Can this be achieved without tables?
cheers,
George
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Vertically aligned text without tables
Thanks Russ & James,
James, looks like it should work. I'll play around with it to see if I can get
consistent results. At the moment some of the boxes are offset by a few pixels in
Opera and Mozilla but I feel it's somehow related the the rest of my page. Thanks!
cheers,
George
> -Original Message-
> From: James Gollan [mailto:[EMAIL PROTECTED]
> Sent: Friday, 26 September 2003 11:00 AM
> To: [EMAIL PROTECTED]
> Subject: RE: [WSG]Vertically aligned text without tables
>
>
> I'm probably missing something here (so just ignore this
> post), but what
> about a containing div with positioning relative, and then
> position your
> boxes within this div. Your text inside is positioned absolutely from
> the bottom of the containing box.
>
>
> #sectionheader
> {
> position:relative;
> }
>
> #box1, #box2, #box3
> {
> position:absolute;
> display:inline;
> margin:10px;
> height:100px;
> width:100px;
> border:1px solid #666;
> }
> #box2 {
> left:110px
> }
> #box3 {
> left:220px
> }
> .bottom_text
> {
> position:absolute;
> bottom:0px;
> margin:10px;
> }
>
>
>
>
>
>
> some text
> more text
> more text
>
>
> It would be more elegant with display:inline for the boxes, but that
> caused problems for Opera (don't know why!??).
>
> James
> -Original Message-
> From: George Karabelas [mailto:[EMAIL PROTECTED]
> Sent: Thursday, 25 September 2003 7:43 PM
> To: [EMAIL PROTECTED]
> Subject: [WSG]Vertically aligned text without tables
>
>
> hi everyone,
>
> Time to stop lurking.
>
> We have recently converted our corporate site
(http://hww.com.au) from a
table based layout to (almost) pure CSS. Unfortunately I have had to use
a table to align text to the bottom of a box. See:
http://hww.com.au/syndication/ (the 3 boxes below the header and above
the content id="subHeading")
Can this be achieved without tables?
cheers,
George
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG]Vertically aligned text without tables
I'm probably missing something here (so just ignore this post), but what
about a containing div with positioning relative, and then position your
boxes within this div. Your text inside is positioned absolutely from
the bottom of the containing box.
#sectionheader
{
position:relative;
}
#box1, #box2, #box3
{
position:absolute;
display:inline;
margin:10px;
height:100px;
width:100px;
border:1px solid #666;
}
#box2 {
left:110px
}
#box3 {
left:220px
}
.bottom_text
{
position:absolute;
bottom:0px;
margin:10px;
}
some text
more text
more text
It would be more elegant with display:inline for the boxes, but that
caused problems for Opera (don't know why!??).
James
-Original Message-
From: George Karabelas [mailto:[EMAIL PROTECTED]
Sent: Thursday, 25 September 2003 7:43 PM
To: [EMAIL PROTECTED]
Subject: [WSG]Vertically aligned text without tables
hi everyone,
Time to stop lurking.
We have recently converted our corporate site (http://hww.com.au) from a
table based layout to (almost) pure CSS. Unfortunately I have had to use
a table to align text to the bottom of a box. See:
http://hww.com.au/syndication/ (the 3 boxes below the header and above
the content id="subHeading")
Can this be achieved without tables?
cheers,
George
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG]Vertically aligned text without tables
Hi George,
First of all, that is one very nice looking site!
CSS-driven vertical alignment does not work on block level elements. For the
definitive answer (from Eric Meyer's "Cascading Stylesheets Programmers
Reference"):
Vertical-align determines the alignment of text within a line or within a
table cell.
There are ways you can trick a block level element using line-height set to
the same height as the containing box and then setting the text to
vertical-align: bottom. It involves a lot of stuffing around and at least
one extra level of nesting (with a span or an additional div). Happy to send
a rough sample if you want to give it a try.
Another option which is supported by every browser except Win and Mac IE
(which immediately kills it for any commercial use) is "display:
table-cell". You can then use a rule set like:
#container
{
display: table-cell;
height: 100px;
background-color: #3CF;
vertical-align: bottom;
}
So, I reckon (and could be wrong) that you're probably far safer using
tables in this instance. Sorry : (
Anyone else got a solution?
Russ
>
> Can this be achieved without tables?
>
*
The discussion list for http://webstandardsgroup.org/
*
