CSS: a simple layout won't work in CSS

Neredbojias wrote:

On 19 Mar 2008, wrote:

A simple layout is attempted in CSS but can't be made into practice...


The result desired is displayed on:
http://www.0011.com/layout/want_to.html

(it is validated as HTML 4.01 Strict)

but that is done using a table. I don't want to use a table because i
think for some browsers, if there are 100 rows... then the table won't
be rendered until all 100 rows of images have been detected for the
width and height... the page may be empty until all 100 images are
loaded. (that might be for some older browsers). Nevertheless, I want
to try using span or div to do it.


A big issue is that I don't know the size of the image in advance (it
can be any image in the database).

Uh, text can be vertically-aligned to an image as in the following example.
Dunno what else you mean.

http://www.neredbojias.com/tsttst/vctst.html

Sorry if this was covered in the thread, but I didn't grok it.

Yes, this is the best IMHO.

--
Gus

liketofindoutwhy (AT) gmail (DOT) com wrote:

so eric.j had a nice solution on

http://www.sitepoint.com/forums/show...81#post3761981

it is simplest... and probably can lead to more understanding of the
inline elements (probably need to read some reference like the CSS
Definitive guide by Eric Meyer)

Found it! ;-)
Check this out for all possibilities:
<http://www.student.oulu.fi/~laurirai/www/css/middle/>
By: Lauri Raittila

--
Gus

On Mar 20, 8:12*pm, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:

liketofindout... (AT) gmail (DOT) com wrote:
so eric.j had a nice solution on

*http://www.sitepoint.com/forums/show...81#post3761981

it is simplest... *and probably can lead to more understanding of the
inline elements (probably need to read some reference like the CSS
Definitive guide by Eric Meyer)

Found it! *;-)
Check this out for all possibilities:
http://www.student.oulu.fi/~laurirai/www/css/middle/
By: *Lauri Raittila

erik.j's solution doesn't work? really? coz it works for me... using
IE 7 and Firefox 2

this first version is the one that doesn't work:

<div style="border:1px solid blue;width:500px; margin: 0 auto">
<img style="border:1px dashed orange" src="pic.jpg" alt="pic">Hello
</div>

and then, just by adding vertical-align to the image:


<div style="border:1px solid blue;width:500px; margin: 0 auto">
<img style="border:1px dashed orange;vertical-align:middle"
src="pic.jpg" alt="pic">Hello
</div>

now it will work. this might be the simplest solution. why the
vertical-align is added to the image part... i think reading more on
inline elements is needed to fully understand it.

The same goes for text: (to vertically center the "Hello")

THIS WON'T WORK: even if you add style="vertical-align:middle" to the
outer div, it won't work either.

<div>
<span style="font-size:100px;">XY</span><span style="vertical-
align:middle">Hello</span>
</div>


THIS ALSO WON'T WORK: even if you add style="vertical-align:middle" to
the outer div, it also won't work either.

<div>
<span style="vertical-align:middle"><span style="font-size:
100px;">XY</span>Hello</span>
</div>


NOW if the vertical-align is added to the big text portion, now the
small text is vertically centered... this is wrecking my brain right
now

<div>
<span style="font-size:100px;vertical-align:middle">XY</span>Hello
</div>

On 2008-03-21, kenneth02394832 <kenneth.kin.lum (AT) gmail (DOT) com> wrote:

The same goes for text: (to vertically center the "Hello")

THIS WON'T WORK: even if you add style="vertical-align:middle" to the
outer div, it won't work either.

Vertical-align doesn't apply to blocks and isn't inherited, so no point
in ever applying it to a div unless you've changed the div to display:
inline or table-cell.

div
span style="font-size:100px;">XY</span><span style="vertical-
align:middle">Hello</span
/div

The second span is vertically aligned with respect to the "strut" of its
container, which has normal font-size.

If you add vertical-align: middle to the _first_ span, then the second
one ends up roughly halfway up it.

The reason this is all so counterintuitive is that both spans are being
aligned to something that you can't see.

The affect of aligning the big span is to move the top edge of the
invisible imaginary inline parent which the second span is aligned
relative to, relative to the containing div. So the second span (which
is positioned relative to that imaginary inline parent) moves on the
screen.

THIS ALSO WON'T WORK: even if you add style="vertical-align:middle" to
the outer div, it also won't work either.

div
span style="vertical-align:middle"><span style="font-size:
100px;">XY</span>Hello</span
/div

There too the word Hello is vertically aligned within its inline parent,
which since it doesn't have one, is this so called "strut" of the div.
That has normal line-height, so "Hello" doesn't move much.

NOW if the vertical-align is added to the big text portion, now the
small text is vertically centered... this is wrecking my brain right
now

div
span style="font-size:100px;vertical-align:middle">XY</span>Hello
/div

Yes exactly! It is very confusing.

I will try to explain again.

Vertical-align (on an inline box) aligns it with respect to its inline
parent. The obvious case in which this makes sense is when you nest one
span inside another. The two spans may have different font sizes.
Normally the inner span's baseline lines up with that of the larger one
(its inline parent), but you can move it up and down with
vertical-align. The obvious time you might want to do this is for super
or subscript.

If an inline element doesn't have an inline parent (because its parent
is a block), then it's treated as though it had an inline parent anyway,
with the font-size that applies to the block. That imaginary inline
parent is called the "strut".

In this case, the strut is not particularly tall-- it has font-size:
normal. The first span, the one containing XY, is lined up so that its
middle is at the middle of the strut.

The second span is lined up with its baseline at the strut's baseline.
So why does the second span move up? Because the alignment of the first
span causes the line box top edge to move down relative to the
strut's baseline.

Once both the spans have been lined up with respect to the strut, then a
bounding box is drawn around the whole lot. That's the line box. The
line box sits in the div with its top edge at the top of the div.

The first span is the biggest thing on the line. It's therefore what
determines the height of the line box. If it's vertical-align: baseline,
it pushes the top of the line box up more than it pushes the bottom of
it down. If it's vertical-align: middle, it pushes the top up less and
the bottom down more.

Here are some diagrams: http://tidraso.co.uk/misc/vertical-align.html

liketofindoutwhy (AT) gmail (DOT) com wrote:

On Mar 20, 8:12 pm, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:
liketofindout... (AT) gmail (DOT) com wrote:
so eric.j had a nice solution on
http://www.sitepoint.com/forums/show...81#post3761981
it is simplest... and probably can lead to more understanding of the
inline elements (probably need to read some reference like the CSS
Definitive guide by Eric Meyer)
Found it! ;-)
Check this out for all possibilities:
http://www.student.oulu.fi/~laurirai/www/css/middle/
By: Lauri Raittila


erik.j's solution doesn't work? really? coz it works for me... using
IE 7 and Firefox 2

When I clicked on the link provided, it brought me to the version using
overflow: hidden; and this one did not work.

The one also discussed by Ben and Neredbojias works.

--
Gus

Neredbojias wrote:

Uh, text can be vertically-aligned to an image as in the following example.
Dunno what else you mean.

http://www.neredbojias.com/tsttst/vctst.html

It works great except that in the div these two items are not needed:
line-height:100%;vertical-align:middle;

--
Gus

Ben C wrote:

On 2008-03-21, kenneth02394832 <kenneth.kin.lum (AT) gmail (DOT) com> wrote:
The same goes for text: (to vertically center the "Hello")

THIS WON'T WORK: even if you add style="vertical-align:middle" to the
outer div, it won't work either.

Vertical-align doesn't apply to blocks and isn't inherited, so no point
in ever applying it to a div unless you've changed the div to display:
inline or table-cell.

div
span style="font-size:100px;">XY</span><span style="vertical-
align:middle">Hello</span
/div

The second span is vertically aligned with respect to the "strut" of its
container, which has normal font-size.

If you add vertical-align: middle to the _first_ span, then the second
one ends up roughly halfway up it.

The reason this is all so counterintuitive is that both spans are being
aligned to something that you can't see.

The affect of aligning the big span is to move the top edge of the
invisible imaginary inline parent which the second span is aligned
relative to, relative to the containing div. So the second span (which
is positioned relative to that imaginary inline parent) moves on the
screen.

THIS ALSO WON'T WORK: even if you add style="vertical-align:middle" to
the outer div, it also won't work either.

div
span style="vertical-align:middle"><span style="font-size:
100px;">XY</span>Hello</span
/div

There too the word Hello is vertically aligned within its inline parent,
which since it doesn't have one, is this so called "strut" of the div.
That has normal line-height, so "Hello" doesn't move much.

NOW if the vertical-align is added to the big text portion, now the
small text is vertically centered... this is wrecking my brain right
now

div
span style="font-size:100px;vertical-align:middle">XY</span>Hello
/div

Yes exactly! It is very confusing.

I will try to explain again.

Vertical-align (on an inline box) aligns it with respect to its inline
parent. The obvious case in which this makes sense is when you nest one
span inside another. The two spans may have different font sizes.
Normally the inner span's baseline lines up with that of the larger one
(its inline parent), but you can move it up and down with
vertical-align. The obvious time you might want to do this is for super
or subscript.

If an inline element doesn't have an inline parent (because its parent
is a block), then it's treated as though it had an inline parent anyway,
with the font-size that applies to the block. That imaginary inline
parent is called the "strut".

In this case, the strut is not particularly tall-- it has font-size:
normal. The first span, the one containing XY, is lined up so that its
middle is at the middle of the strut.

The second span is lined up with its baseline at the strut's baseline.
So why does the second span move up? Because the alignment of the first
span causes the line box top edge to move down relative to the
strut's baseline.

Once both the spans have been lined up with respect to the strut, then a
bounding box is drawn around the whole lot. That's the line box. The
line box sits in the div with its top edge at the top of the div.

The first span is the biggest thing on the line. It's therefore what
determines the height of the line box. If it's vertical-align: baseline,
it pushes the top of the line box up more than it pushes the bottom of
it down. If it's vertical-align: middle, it pushes the top up less and
the bottom down more.

Here are some diagrams: http://tidraso.co.uk/misc/vertical-align.html

Great stuff Ben. Where did you get this "strut" thing from? Sounds like
something for my car.

--
Gus

On 2008-03-21, Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

Ben C wrote:
[...]
Great stuff Ben. Where did you get this "strut" thing from? Sounds like
something for my car.

It's mentioned in the CSS specification. Apparently it's a TeX term.

Ben Bacarisse wrote:

Ben C <spamspam (AT) spam (DOT) eggs> writes:

On 2008-03-21, Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:
Ben C wrote:
[...]
Great stuff Ben. Where did you get this "strut" thing from? Sounds like
something for my car.
It's mentioned in the CSS specification. Apparently it's a TeX term.

... taken (by TeX) from the world of metal type where it was exactly
what you would expect -- a metal strut that was used to hold space
open in a layout.

Careful, you're taking a chance to be called a Dipstick. ;-)

--
Gus