Hi

See my mock-up at http://tinyurl.com/35tv29. The three icons are
supposed to be vertically aligned on their bottoms (using "vertical-
align: bottom"), but they aren't, they're vertically aligned on their
tops. Is there any way to align them vertically on their bottoms (or
middle for that matter) short of resorting to using a table (where
"vertical-align: bottom" does work)?

Dave

On 2008-03-17, Dave Rado <dave.rado@dsl.pipex.com> wrote:
> Hi
>
> See my mock-up at http://tinyurl.com/35tv29. The three icons are
> supposed to be vertically aligned on their bottoms (using "vertical-
> align: bottom"), but they aren't, they're vertically aligned on their
> tops. Is there any way to align them vertically on their bottoms (or
> middle for that matter) short of resorting to using a table (where
> "vertical-align: bottom" does work)?

Vertical-align doesn't apply to blocks (like divs).

But you can set it on the imgs inside the divs if you want. Or set img
to display: block which I think is more appropriate here.

Hi Ben

On 17 Mar, 17:09, Ben C <spams...@spam.eggs> wrote:

> Vertical-align doesn't apply to blocks (like divs).
>
> But you can set it on the imgs inside the divs if you want.

I tried your suggestion but must be doing something wrong. See my mock-
up at http://tinyurl.com/2qh2vy. Can you see what I'm doing wrong?


> Or set img
> to display: block which I think is more appropriate here.

I tried this suggestion as well but again, I must be doing something
wrong. See my mock-up at http://tinyurl.com/2rzobt. Can you see what
I'm doing wrong?

Perhaps I should explain that I am trying hard to understand the more
complex parts of css but am finding it a real culture shock, having
learnt my html in the early 90x, when everyone used tables, and then
moved away from web development for several years, and I am now having
to build a complex website and as I say am finding the change from
using tables for layout to using css a real culture shock and a huge
learning curve. I don't need convincing of the benefits of the change,
but I need lots of hand holding.

Dave

Hi dorayme

On 17 Mar, 22:14, dorayme <doraymeRidT...@optusnet.com.au> wrote:

> Perhaps you can develop from this idea, instead of your html:
>
> <div><img src="../images/Icons/AcrobatSmall.gif" border="0"
> height="100" width="21"></div>
>
> <div><img src="../images/Icons/Bookmark.gif" border="0"
> height="50" width="28"></div>
>
> <div><img src="../images/Icons/Key.jpg" border="0" height="250"
> width="26"></div>
>
> (I have exaggerated your img heights for demo purposes)
>
> And for css, nothing complicated at all, like:
>
> div {display: inline; margin:5%}

I tried your suggestion but must be doing something wrong - see my
mock-up at http://tinyurl.com/2pjwwy. Can you see what I'm doing
wrong? Also, I can't see anything in your code that specifies the
horizontal postions of the three icons. They need to have the exact
horizontal positions that were specified in my original mock-up at
http://tinyurl.com/35tv29.

See also my note to Ben C about my relative lack of expertise and need
for hand-holding.

Dave

On 2008-03-18, Dave Rado <dave.rado@dsl.pipex.com> wrote:
> Hi Ben
>
> On 17 Mar, 17:09, Ben C <spams...@spam.eggs> wrote:
>
>> Vertical-align doesn't apply to blocks (like divs).
>>
>> But you can set it on the imgs inside the divs if you want.
>
> I tried your suggestion but must be doing something wrong. See my mock-
> up at http://tinyurl.com/2qh2vy. Can you see what I'm doing wrong?
>
>
>> Or set img
>> to display: block which I think is more appropriate here.
>
> I tried this suggestion as well but again, I must be doing something
> wrong. See my mock-up at http://tinyurl.com/2rzobt. Can you see what
> I'm doing wrong?

You've got three different divs, two of which are absolutely positioned.

Vertical-align on the images is only going to align them if they're on
the same line, which means (at least) all in the same block box.

> Perhaps I should explain that I am trying hard to understand the more
> complex parts of css but am finding it a real culture shock, having
> learnt my html in the early 90x, when everyone used tables, and then
> moved away from web development for several years, and I am now having
> to build a complex website and as I say am finding the change from
> using tables for layout to using css a real culture shock and a huge
> learning curve. I don't need convincing of the benefits of the change,
> but I need lots of hand holding.

Best to say exactly what you are trying to do with the three images in
the first place from the top.

HI Ben

On 18 Mar, 18:32, Ben C <spams...@spam.eggs> wrote:

> Best to say exactly what you are trying to do with the three images in
> the first place from the top.

I'm not sure what information you're asking for. I need to create a
div 607px wide that is horizontally centred on the page, which I've
managed to do successfully. Within this div I need to place three
icons, one at the left edge of the div, one at the right edge of the
div, and one centred within the div. I've also managed to do this
successfully, and I' posted a mock-up (which is at http://tinyurl.com/35tv29)
showing my code which did this. However, the three icons are top-
aligned within the div and top-aligned relative to each other, whereas
I need them to be bottom-aligned - something that is a breeze to do if
one uses tables for layout, but I can't work out how to do it if one
uses divs instead of tables. I was hoping someone would look at the
code in my mock-up and tell me what modifications to make to my code
in order that the three icons would appear in exactly the same
horizontal position as before, but bottom-aligned relative to each
other. I'm not sure what other information I could provide that is
relevant. Can you ?

Dave

Dave Rado wrote:
>
> I need to create a
> div 607px wide that is horizontally centred on the page, which I've
> managed to do successfully. Within this div I need to place three
> icons, one at the left edge of the div, one at the right edge of the
> div, and one centred within the div. I've also managed to do this
> successfully, and I' posted a mock-up (which is at http://tinyurl.com/35tv29)
> showing my code which did this. However, the three icons are top-
> aligned within the div and top-aligned relative to each other, whereas
> I need them to be bottom-aligned

They really only appear to be top aligned because the line heights are
stretched as needed to fit the inline image. Baseline is the default
alignment for images. If the line heights were equal, the baseline would
be the same for all and they'd be aligned as you want.

Except maybe in IE. It doesn't do well with changing line-height of
replaced elements.

--
Berg

HI Berg

On 18 Mar, 22:59, Bergamot <berga...@visi.com> wrote:

> They really only appear to be top aligned because the line heights are
> stretched as needed to fit the inline image. Baseline is the default
> alignment for images. If the line heights were equal, the baseline would
> be the same for all and they'd be aligned as you want.
>
> Except maybe in IE. It doesn't do well with changing line-height of
> replaced elements.

It sounds like I should go back to using tables?

Dave