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>