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]

Re: vertical alignment of img inside a div?

To further the education of mankind, tomasio <frognsnedso@bl ed.de>
vouchsafed:
[color=blue]
> 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.[/color]

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]

Re: vertical alignment of img inside a div?

On Wed, 14 Jun 2006 01:57:38 -0400, Neredbojias
<http://www.neredbojias .com/fliam.php?cat=a lt.html> wrote:
[color=blue]
>To further the education of mankind, tomasio <frognsnedso@bl ed.de>
>vouchsafed:
>[color=green]
>> 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.[/color]
>
>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.[/color]
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]

Re: vertical alignment of img inside a div?

tomasio <frognsnedso@bl ed.de> schrieb:
[color=blue]
>On Wed, 14 Jun 2006 01:57:38 -0400, Neredbojias
><http://www.neredbojias .com/fliam.php?cat=a lt.html> wrote:
>[color=green]
>>To further the education of mankind, tomasio <frognsnedso@bl ed.de>
>>vouchsafed:
>>[color=darkred]
>>> 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.[/color]
>>[/color][/color]
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]

Re: vertical alignment of img inside a div?

To further the education of mankind, tomasio <frognsnedso@bl ed.de>
vouchsafed:
[color=blue][color=green]
>>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.[/color]
> 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 :.([/color]

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:absolu te; and position:relati ve; functioned as stated. Ergo,
some re-designing will be necessary if you wish to do this.

--
Neredbojias
Infinity has its limits.

[tomasio]

Re: vertical alignment of img inside a div?

On Thu, 15 Jun 2006 00:19:40 -0400, Neredbojias
<http://www.neredbojias .com/fliam.php?cat=a lt.html> wrote:
[color=blue]
>To further the education of mankind, tomasio <frognsnedso@bl ed.de>
>vouchsafed:
>[color=green][color=darkred]
>>>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.[/color]
>> 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 :.([/color]
>
>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:absolu te; and position:relati ve; functioned as stated. Ergo,
>some re-designing will be necessary if you wish to do this.[/color]

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]

Re: vertical alignment of img inside a div?

To further the education of mankind, tomasio <frognsnedso@bl ed.de>
vouchsafed:
[color=blue][color=green]
>>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:absolu te; and
>>position:rela tive; functioned as stated. Ergo, some re-designing will
>>be necessary if you wish to do this.[/color]
>
> 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[/color]

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

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

--
Neredbojias
Infinity has its limits.

[tomasio]

Re: vertical alignment of img inside a div?

Neredbojias <http://www.neredbojias .com/fliam.php?cat=a lt.html>
schrieb:
[color=blue]
>To further the education of mankind, tomasio <frognsnedso@bl ed.de>
>vouchsafed:
>[color=green][color=darkred]
>>>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:absolu te; and
>>>position:rel ative; functioned as stated. Ergo, some re-designing will
>>>be necessary if you wish to do this.[/color]
>>
>> 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[/color]
>
>Here's an "out-take" demonstrating the method:
>
>http://www.neredbojias.com/zyxix/liquidIIb.html[/color]

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]

Re: vertical alignment of img inside a div?

To further the education of mankind, tomasio <damnit@jan.e t> vouchsafed:
[color=blue]
> 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[/color]

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.