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).

so I tried just using a div with "vertical-align: middle" and it
doesn't work, as in

http://www.0011.com/layout/try1.html

and then "line-height:100%" using a span and it doesn't work, as in

http://www.0011.com/layout/try2.html


and also floating the 2 div left and right, and with the right hand
side "height:1em;margin:auto 0" just like centering a div
horizontally and won't work.

http://www.0011.com/layout/try3.html


i tried height: 100% and vertical-align: middle and even the the
height: 100% won't work, as indicated by the dashed border.

http://www.0011.com/layout/try4.html


again, the image on the left is unknown for the size as it is an image
from the database. Does somebody know how to make it happen without
using a table and without using javascript to get the size of the
image? thanks very much!

liketofindoutwhy@gmail.com 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).

<snip old complaint about vertical alignment>

100 images? Maybe you should cut you page down to show maybe 25 at a
time. That is your real problem. Next will the world collapse if the
text is not centered vertically with the image? If it is so important
use a table, or set div to "display: table-cell" and let IE users go hang...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Mar 19, 5:29 am, "Jonathan N. Little" <lws4...@central.net> wrote:

> 100 images? Maybe you should cut you page down to show maybe 25 at a
> time. That is your real problem. Next will the world collapse if the
> text is not centered vertically with the image? If it is so important
> use a table, or set div to "display: table-cell" and let IE users go hang...

hm... even if it is 25, the page may load slower... such as for people
who don't have broadband... (but i found that IE 7 and Firefox 2 will
both show the page before any image is loaded). So this may be out
of pure attempt to know how to do it in CSS....

the display: table-cell will work so long as height: 100px is added...
then the line is centered vertically. however, if the height: 100px
is not specified, then it won't work.... that's a problem because the
image size is unknown. Do you think you can provide the 2 or 3 lines
that will make it work? The BIGGEST reason why this is to be
vertically centered is that, the line is actually a "Delete" link...
so if the word "Delete" is shown at top or at bottom, then the user
may accidentally click the "Delete" for the wrong image. So centering
it vertically is very ful.

liketofindoutwhy@gmail.com 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).
>
> so I tried just using a div with "vertical-align: middle" and it
> doesn't work, as in
>
> http://www.0011.com/layout/try1.html
>
> and then "line-height:100%" using a span and it doesn't work, as in
>
> http://www.0011.com/layout/try2.html
>
>
> and also floating the 2 div left and right, and with the right hand
> side "height:1em;margin:auto 0" just like centering a div
> horizontally and won't work.
>
> http://www.0011.com/layout/try3.html
>
>
> i tried height: 100% and vertical-align: middle and even the the
> height: 100% won't work, as indicated by the dashed border.
>
> http://www.0011.com/layout/try4.html
>
>
> again, the image on the left is unknown for the size as it is an image
> from the database. Does somebody know how to make it happen without
> using a table and without using javascript to get the size of the
> image? thanks very much!

Give the div position:relative;
Give the span position:absolute;top:45%;

--
Gus

> The BIGGEST reason why this is to be
> vertically centered is that, the line is actually a "Delete" link...
> so if the word "Delete" is shown at top or at bottom, then the user
> may accidentally click the "Delete" for the wrong image. So centering
> it vertically is very ful.
>

Well you could give visual clues to . If each image with control
links where in a block, "pixbox" you could float image images had have
the control links have a top and bottom margins that "push" them visibly
with the top and bottom dimensions of the image. You can add margins to
the "pixbox" container to give visual separation and|or borders!

div.pixbox {
margin: 2em 0; padding: .5em; border-top: 1px solid #000;
clear: left; overflow: hidden;
}

div.pixbox img {
display: block; float: left; margin-right: 1em;
}

div.pixbox ul {
margin: 3em 0; padding: 0; list-style: none;
}



<div class="pixbox">
<img src="someimage.jpg" alt="image" width="300" height="300">
<ul>
<li><a href="removalscript.cgi?someimage">Delete Me</a></li>
<li><a href="manglescript.cgi?someimage">Mangle Me</a></li>
<li><a href="whaterverscript.cgi?someimage">Show Me That You Care</a></li>
</ul>
</div>


SAPTT (Salt And Pepper To Taste)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Mar 19, 7:32 am, "Jonathan N. Little" <lws4...@central.net> wrote:
>
> Well you could give visual clues to . If each image with control
> links where in a block, "pixbox" you could float image images had have
> the control links have a top and bottom margins that "push" them visibly
> with the top and bottom dimensions of the image. You can add margins to
> the "pixbox" container to give visual separation and|or borders!

i tried and it seems to shift the 3 text lines 2em down... so it is
somewhat more centered and it is very practical and thanks very much.
I wonder... is there any method to center it vertically and "very"
centered if table is not used? (so that if the image is 20px tall,
it is centered. if the image is 800px tall, it is centered). (hoping
to understand the mechanics of CSS along the way)

liketofindoutwhy@gmail.com wrote:
>
> The result desired is displayed on:
> http://www.0011.com/layout/want_to.html
>
> A big issue is that I don't know the size of the image in advance (it
> can be any image in the database).

If it's coming from a database, get the image dimensions from there as
well and set the appropriate sizes when the HTML is generated. Should be
easy enough to do in your server-side script, whatever language it may be.

--
Berg

On Mar 19, 8:30 am, dorayme <doraymeRidT...@optusnet.com.au> wrote:

> earlier you mentioned 100 images per page, ten the discussion
> turned to 25 sort of, throughout you are concerned with speed of
> [page loading, now you are talking 800px high images, what is
> going on? Are you loading thumbnails (the sensible thing to do
> so that the user can leverage up his requirements)?

the real thing is... i want to find out how to vertically center that
text on the right without using table but just using div and span.
turns out it is rather difficult... and maybe i can do it after
reading the whole chapters of CSS Definitive Guide for Inline elements
and Positioning. I already read the whole chapter for Block elements.

liketofindoutwhy@gmail.com wrote:
> On Mar 19, 8:30 am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
>
>> earlier you mentioned 100 images per page, ten the discussion
>> turned to 25 sort of, throughout you are concerned with speed of
>> [page loading, now you are talking 800px high images, what is
>> going on? Are you loading thumbnails (the sensible thing to do
>> so that the user can leverage up his requirements)?
>
> the real thing is... i want to find out how to vertically center that
> text on the right without using table but just using div and span.
> turns out it is rather difficult... and maybe i can do it after
> reading the whole chapters of CSS Definitive Guide for Inline elements
> and Positioning. I already read the whole chapter for Block elements.

What do you find difficult or perhaps wrong with my suggestion?

--
Gus

"Gus Richter" <gusrichter@netscape.net> wrote in message
news:G6GdnSBb9cOISnzanZ2dnUVZ_hjinZ2d@golden.net.. .
> liketofindoutwhy@gmail.com wrote:
>> On Mar 19, 8:30 am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
>>
>>> earlier you mentioned 100 images per page, ten the discussion
>>> turned to 25 sort of, throughout you are concerned with speed of
>>> [page loading, now you are talking 800px high images, what is
>>> going on? Are you loading thumbnails (the sensible thing to do
>>> so that the user can leverage up his requirements)?
>>
>> the real thing is... i want to find out how to vertically center that
>> text on the right without using table but just using div and span.
>> turns out it is rather difficult... and maybe i can do it after
>> reading the whole chapters of CSS Definitive Guide for Inline elements
>> and Positioning. I already read the whole chapter for Block elements.
>
> What do you find difficult or perhaps wrong with my suggestion?

Possibly the difficulty is that the OP can't see your post. I can't.

--
Richard.

On Mar 19, 8:18 pm, Gus Richter <gusrich...@netscape.net> wrote:

> > the real thing is... i want to find out how to vertically center that
> > text on the right without using table but just using div and span.
> > turns out it is rather difficult... and maybe i can do it after
> > reading the whole chapters of CSS Definitive Guide for Inline elements
> > and Positioning. I already read the whole chapter for Block elements.
>
> What do you find difficult or perhaps wrong with my suggestion?

Right, Hi Gus... the previous post you put there is the only post i
see in this thread...

liketofindoutwhy@gmail.com wrote:
> On Mar 19, 8:18 pm, Gus Richter <gusrich...@netscape.net> wrote:
>
>>> the real thing is... i want to find out how to vertically center that
>>> text on the right without using table but just using div and span.
>>> turns out it is rather difficult... and maybe i can do it after
>>> reading the whole chapters of CSS Definitive Guide for Inline elements
>>> and Positioning. I already read the whole chapter for Block elements.
>> What do you find difficult or perhaps wrong with my suggestion?
>
> Right, Hi Gus... the previous post you put there is the only post i
> see in this thread...

Don't know why since I see it, LOL. Here it is again:

Give the div position:relative;
Give the span position:absolute;top:45%;

--
Gus

Gus Richter wrote:
> liketofindoutwhy@gmail.com wrote:
>> On Mar 19, 8:18 pm, Gus Richter <gusrich...@netscape.net> wrote:
>>
>>>> the real thing is... i want to find out how to vertically center that
>>>> text on the right without using table but just using div and span.
>>>> turns out it is rather difficult... and maybe i can do it after
>>>> reading the whole chapters of CSS Definitive Guide for Inline elements
>>>> and Positioning. I already read the whole chapter for Block elements.
>>> What do you find difficult or perhaps wrong with my suggestion?
>>
>> Right, Hi Gus... the previous post you put there is the only post i
>> see in this thread...
>
> Don't know why since I see it, LOL. Here it is again:
>
> Give the div position:relative;
> Give the span position:absolute;top:45%;

This wa in reply to the OP.

--
Gus

Gus Richter wrote:
> liketofindoutwhy@gmail.com wrote:
>> On Mar 19, 8:18 pm, Gus Richter <gusrich...@netscape.net> wrote:
>>
>>>> the real thing is... i want to find out how to vertically center that
>>>> text on the right without using table but just using div and span.
>>>> turns out it is rather difficult... and maybe i can do it after
>>>> reading the whole chapters of CSS Definitive Guide for Inline elements
>>>> and Positioning. I already read the whole chapter for Block elements.
>>> What do you find difficult or perhaps wrong with my suggestion?
>>
>> Right, Hi Gus... the previous post you put there is the only post i
>> see in this thread...
>
> Don't know why since I see it, LOL. Here it is again:

I took out ALT.HTML and left only CIWAS so you guys looking at
ALT.HTML don't see it. Did so since it's a pure CSS problem.

--
Gus

"Gus Richter" <gusrichter@netscape.net> wrote in message
news:aPSdnSKqBa9YlH_anZ2dnUVZ_s7inZ2d@golden.net.. .
> Gus Richter wrote:
>> liketofindoutwhy@gmail.com wrote:
>>> On Mar 19, 8:18 pm, Gus Richter <gusrich...@netscape.net> wrote:
>>>
>>>>> the real thing is... i want to find out how to vertically center that
>>>>> text on the right without using table but just using div and span.
>>>>> turns out it is rather difficult... and maybe i can do it after
>>>>> reading the whole chapters of CSS Definitive Guide for Inline elements
>>>>> and Positioning. I already read the whole chapter for Block elements.
>>>> What do you find difficult or perhaps wrong with my suggestion?
>>>
>>> Right, Hi Gus... the previous post you put there is the only post i
>>> see in this thread...
>>
>> Don't know why since I see it, LOL. Here it is again:
>
> I took out ALT.HTML and left only CIWAS so you guys looking at
> ALT.HTML don't see it.

So you intentionally confused us? Dipstick!

If you took out alt.html in your first post why did you not take alt.html
out of your second post? Perhaps the OP was only looking at alt.html,
knowing, or at least hoping, that messages would be crossposted to both
groups. Maybe the OP was like me, in a hurry, and only checked alt.html,
leaving CWIAS for later in the day.

And what is wrong with CSS problems in alt.html anyway, which covers just
about everything?

--
Richard.

rf wrote:
>
> So you intentionally confused us? Dipstick!
>
> If you took out alt.html in your first post why did you not take alt.html
> out of your second post? Perhaps the OP was only looking at alt.html,
> knowing, or at least hoping, that messages would be crossposted to both
> groups. Maybe the OP was like me, in a hurry, and only checked alt.html,
> leaving CWIAS for later in the day.
>
> And what is wrong with CSS problems in alt.html anyway, which covers just
> about everything?

If he's going to post to both, then he should check both.
I don't like posting to where I don't subscribe, because I might not see
responses to what I wrote. Just as happened to you here.

One good thing is that next time you won't be so easily confused.

--
Gus

On Mar 19, 11:51 pm, Gus Richter <gusrich...@netscape.net> wrote:
> Gus Richter wrote:
> > liketofindout...@gmail.com wrote:
> >> On Mar 19, 8:18 pm, Gus Richter <gusrich...@netscape.net> wrote:
>
> >>>> the real thing is... i want to find out how to vertically center that
> >>>> text on the right without using table but just using div and span.
> >>>> turns out it is rather difficult... and maybe i can do it after
> >>>> reading the whole chapters of CSS Definitive Guide for Inline elements
> >>>> and Positioning. I already read the whole chapter for Block elements.
> >>> What do you find difficult or perhaps wrong with my suggestion?
>
> >> Right, Hi Gus... the previous post you put there is the only post i
> >> see in this thread...
>
> > Don't know why since I see it, LOL. Here it is again:
>
> > Give the div position:relative;
> > Give the span position:absolute;top:45%;

so this is absolute within a relative positioned div... i think it
will work almost... because the top: 45% is more like 50% - 1em
(50% minus 1em). Another person in sitepoint or digitalpoint
suggested using relative div outside and absolute div inside with
bottom and right being 0, and height: 60%... so it is more like 50% +
1em... and if using table, the text can be 1 line or 2 lines or 3
lines... it is still centered. if done using this method, it is "sort
of" centered...

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)

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.

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

liketofindoutwhy@gmail.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)

Does not work right for me. Had to use 11% for 300x300 img.
Try using different size images.

--
Gus

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@gmail.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:12pm, Gus Richter <gusrich...@netscape.net> wrote:
> liketofindout...@gmail.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@gmail.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