vertical alignment of img inside a div?

[tomasio]

Dear NG-Users,

[1] I would like to vertically center the images containing arrows
when the content area is stretched because the user chooses a bigger
font. although I explored many methods in the net to achieve this,
none of them worked.
[2] Additionally IE seems to have problems with the float-property I
used to position the text between the two arrow-images.

I would like not to use background images because I want to achieve a
rollover-effect when hovering over them.

Here's the example site: http://tomasio.at/temp/liquid.html
and here's the regarding CSS: http://tomasio.at/temp/stylesheet.css

and here is how it should look like when the text extends beyond the
height of the images: http://tomasio.at/temp/correct.png

Any help will be appreciated.

[Neredbojias]

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

Dear NG-Users,

[1] I would like to vertically center the images containing arrows
when the content area is stretched because the user chooses a bigger
font. although I explored many methods in the net to achieve this,
none of them worked.
[2] Additionally IE seems to have problems with the float-property I
used to position the text between the two arrow-images.

I would like not to use background images because I want to achieve a
rollover-effect when hovering over them.

Here's the example site: http://tomasio.at/temp/liquid.html
and here's the regarding CSS: http://tomasio.at/temp/stylesheet.css

and here is how it should look like when the text extends beyond the
height of the images: http://tomasio.at/temp/correct.png

Any help will be appreciated.

With other necessary styling, you can position the images at 50% of the
height of the container (top:50%;) and negative top-margin them half of
their height.

--
Neredbojias
Infinity has its limits.

[tomasio]

On Wed, 14 Jun 2006 01:57:38 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

Dear NG-Users,

[1] I would like to vertically center the images containing arrows
when the content area is stretched because the user chooses a bigger
font. although I explored many methods in the net to achieve this,
none of them worked.
[2] Additionally IE seems to have problems with the float-property I
used to position the text between the two arrow-images.

I would like not to use background images because I want to achieve a
rollover-effect when hovering over them.

Here's the example site: http://tomasio.at/temp/liquid.html
and here's the regarding CSS: http://tomasio.at/temp/stylesheet.css

and here is how it should look like when the text extends beyond the
height of the images: http://tomasio.at/temp/correct.png

Any help will be appreciated.

With other necessary styling, you can position the images at 50% of the
height of the container (top:50%;) and negative top-margin them half of
their height.

Hi Neredbojas,

I tried the solution styling the container the way you suggested to me
with the result that the contained img is only 50% viewable. You can
look after it at http://tomasio.at/temp/liquid2.html.

What _other_ necessary styling should I add? Does it maybe have to do
with declaring <img> as block element in my external stylesheet? I did
it because I had imgs smaller than the default font-size. Or with the
float-property? I eliminated both of them, but it did not have any
effect on the img position :.(

Thank you again for your help.

[tomasio]

tomasio <fr*********@bled.de> schrieb:

On Wed, 14 Jun 2006 01:57:38 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

Dear NG-Users,

[1] I would like to vertically center the images containing arrows
when the content area is stretched because the user chooses a bigger
font. although I explored many methods in the net to achieve this,
none of them worked.
[2] Additionally IE seems to have problems with the float-property I
used to position the text between the two arrow-images.

I would like not to use background images because I want to achieve a
rollover-effect when hovering over them.

Here's the example site: http://tomasio.at/temp/liquid.html
and here's the regarding CSS: http://tomasio.at/temp/stylesheet.css

and here is how it should look like when the text extends beyond the
height of the images: http://tomasio.at/temp/correct.png

Any help will be appreciated.

I just found out that [2] has something to do with the width of the
containing div (cont-dyn): Setting its width to 808px or more will
allow the content to flow correctly. Naturally that's not what I want
because the layout will crash then.

Does anybody has an idea how to get that centering issue[1] and that
thing with the float property[2] working correctly?

Please help, I am a little desparate already *grn*
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

[Neredbojias]

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

With other necessary styling, you can position the images at 50% of the
height of the container (top:50%;) and negative top-margin them half of
their height.

Hi Neredbojas,

I tried the solution styling the container the way you suggested to me
with the result that the contained img is only 50% viewable. You can
look after it at http://tomasio.at/temp/liquid2.html.

What _other_ necessary styling should I add? Does it maybe have to do
with declaring <img> as block element in my external stylesheet? I did
it because I had imgs smaller than the default font-size. Or with the
float-property? I eliminated both of them, but it did not have any
effect on the img position :.(

I think the problem is that your container does not have a well-established
height because the content is floated. In order for my suggested procedure
to work, the height must be obtainable. I did make a simple mock-up and
both position:absolute; and position:relative; functioned as stated. Ergo,
some re-designing will be necessary if you wish to do this.

--
Neredbojias
Infinity has its limits.

[tomasio]

On Thu, 15 Jun 2006 00:19:40 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

With other necessary styling, you can position the images at 50% of the
height of the container (top:50%;) and negative top-margin them half of
their height.

Hi Neredbojas,

I tried the solution styling the container the way you suggested to me
with the result that the contained img is only 50% viewable. You can
look after it at http://tomasio.at/temp/liquid2.html.

What _other_ necessary styling should I add? Does it maybe have to do
with declaring <img> as block element in my external stylesheet? I did
it because I had imgs smaller than the default font-size. Or with the
float-property? I eliminated both of them, but it did not have any
effect on the img position :.(

I think the problem is that your container does not have a well-established
height because the content is floated. In order for my suggested procedure
to work, the height must be obtainable. I did make a simple mock-up and
both position:absolute; and position:relative; functioned as stated. Ergo,
some re-designing will be necessary if you wish to do this.

Please, could you be so kind to show me what you've done? Maybe paste
the code here or give me a link to your mock-up? I gave the floated
container (cont-back) a height-value, and the result is as shown here:
http://tomasio.at/temp/liquid2.html

[Neredbojias]

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

I think the problem is that your container does not have a
well-established height because the content is floated. In order for
my suggested procedure to work, the height must be obtainable. I did
make a simple mock-up and both position:absolute; and
position:relative; functioned as stated. Ergo, some re-designing will
be necessary if you wish to do this.

Please, could you be so kind to show me what you've done? Maybe paste
the code here or give me a link to your mock-up? I gave the floated
container (cont-back) a height-value, and the result is as shown here:
http://tomasio.at/temp/liquid2.html

Here's an "out-take" demonstrating the method:

http://www.neredbojias.com/zyxix/liquidIIb.html
--
Neredbojias
Infinity has its limits.

[tomasio]

Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
schrieb:

To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

I think the problem is that your container does not have a
well-established height because the content is floated. In order for
my suggested procedure to work, the height must be obtainable. I did
make a simple mock-up and both position:absolute; and
position:relative; functioned as stated. Ergo, some re-designing will
be necessary if you wish to do this.

Please, could you be so kind to show me what you've done? Maybe paste
the code here or give me a link to your mock-up? I gave the floated
container (cont-back) a height-value, and the result is as shown here:
http://tomasio.at/temp/liquid2.html

Here's an "out-take" demonstrating the method:

http://www.neredbojias.com/zyxix/liquidIIb.html

Wohooo! Made it finally because of your help. The way you avoided to
use the float-property is admirable for a CSS-Rookie like me. Here is
a working example (Navigation and Links are only Template-imgs):
http://tomasio.at/temp/Us_Templ.html
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

[Neredbojias]

To further the education of mankind, tomasio <da****@jan.et> vouchsafed:

Wohooo! Made it finally because of your help. The way you avoided to
use the float-property is admirable for a CSS-Rookie like me. Here is
a working example (Navigation and Links are only Template-imgs):
http://tomasio.at/temp/Us_Templ.html

Looking pretty good, bud. Css takes practice and patience, just like most
anything else. And it isn't perfect, either.

--
Neredbojias
Infinity has its limits.