468,553 Members | 1,304 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,553 developers. It's quick & easy.

Mixing pixel and em sizing to align images and text

I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).

See http://www.trawna.com/test/header1.html for some examples of what I've
tried. IE6/Win shows the second one how I want it, but Opera 7.23 and
Mozilla 1.0 don't like any of them. (Too bad we can't use mathematical
operators in CSS; I keep finding places where something resembling
{ margin-top:70px-0.5em; } would come in handy.)

I have a suspicion that the solution will be very simple, and I'll learn
something highly useful out of all this.

(1) A related problem will occur if the default font for h1 text makes it
taller than the image. Would { height:70px; min-height:1em; } be the
"right way" to solve this, and if so what browsers will it still break in?

--
Greg Schmidt gr***@trawna.com
Trawna Publications http://www.trawna.com/
Jul 20 '05 #1
6 6699
Greg Schmidt <gr***@trawna.com> wrote:
I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).


img{vertical-align:middle}
h1{display:inline}

<img ...>
<h1>Header</h1>

--
Spartanicus
Jul 20 '05 #2
Greg Schmidt wrote:
I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).


Make the image a background of the text's block element, positioned at
0% 50%. Set that element's padding-left to include space for the image.
Adjust other properties such that the text is always vertically-centred
in the block.

This will fail if the containing element gets smaller than the image
height, of course.

It's the same technique I (and many others) use for the little external
link icon, although on the other side of the text. See
http://tranchant.plus.com/notes/cable-wrap for an example.

--
Mark.
http://tranchant.plus.com/
Jul 20 '05 #3
On Mon, 05 Jul 2004 22:00:47 +0100, Spartanicus wrote:
Greg Schmidt <gr***@trawna.com> wrote:
I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).


img{vertical-align:middle}
h1{display:inline}

<img ...>
<h1>Header</h1>


Changing this to <h1><img ...>Header</h1> makes the vertical spacing a
little bit better on some browsers, plus it keeps the logo and the heading
on the same line (albeit not centred with each other) in NN4. The text is
a little bit high in IE5, but I can live with that.

This seems like the best so far. All five trials are still at
http://www.trawna.com/test/header1.html for anyone who wants to see what
I've tried, or make further suggestions.

--
Greg Schmidt gr***@trawna.com
Trawna Publications http://www.trawna.com/
Jul 20 '05 #4
On Tue, 06 Jul 2004 07:56:38 +0100, Mark Tranchant wrote:
Greg Schmidt wrote:
I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).


Make the image a background of the text's block element, positioned at
0% 50%. Set that element's padding-left to include space for the image.
Adjust other properties such that the text is always vertically-centred
in the block.

This will fail if the containing element gets smaller than the image
height, of course.

It's the same technique I (and many others) use for the little external
link icon, although on the other side of the text. See
http://tranchant.plus.com/notes/cable-wrap for an example.


I got this to work pretty well in all modern browsers, but the logo is
completely lost in NN4, which isn't acceptable in this instance. I know
that NN4 is likely to end up rendering everything I do significantly
different from other browsers, and that's fine, but losing the corporate
logo is too high a price to pay.

It's an excellent strategy for your external links, particularly because
there is no extra HTML required, but in my situation I think that the logo
is more like content than presentation.

All five trials are still at http://www.trawna.com/test/header1.html for
anyone who wants to see what I've tried, or make further suggestions.

--
Greg Schmidt gr***@trawna.com
Trawna Publications http://www.trawna.com/
Jul 20 '05 #5
Greg Schmidt <gr***@trawna.com> wrote:
plus it keeps the logo and the heading
on the same line (albeit not centred with each other) in NN4.


For future queries you might want to mention up front if something needs
to work in NS4 (if you don't we assume otherwise).

People who are aware of what CSS NS4 can and cannot handle are rapidly
becoming extinct (we have one in the local Zoo here, but there's a sign
on the fence saying that we're not allowed to feed him).

--
Spartanicus
Jul 20 '05 #6
On Tue, 06 Jul 2004 22:45:57 +0100, Spartanicus wrote:
Greg Schmidt <gr***@trawna.com> wrote:
plus it keeps the logo and the heading
on the same line (albeit not centred with each other) in NN4.
For future queries you might want to mention up front if something needs
to work in NS4 (if you don't we assume otherwise).


Well, there are different levels of "working". I don't believe that
everyone here has abandoned graceful degradation, but what may be
considered graceful depends greatly on the situation.

Mark's proposal works for him, because in his situation losing the image
can be considered graceful, but it didn't work for me because my situation
is different. (It's tucked away in the bag of tricks for when I do need
something like that.)

If your suggestion was the only way to get the effect I wanted and there
was no way to get it to work in NN4, then I'd accept that, but as it turns
out the minor modification that I made doesn't appear to break anything
plus it works better in NN4. You got me 95% of the way there, and I didn't
mean to sound like I was ungrateful or disappointed that I had to do the
last 5%; I was just adding what I had discovered for anyone else who finds
the information useful.
People who are aware of what CSS NS4 can and cannot handle are rapidly
becoming extinct (we have one in the local Zoo here, but there's a sign
on the fence saying that we're not allowed to feed him).


I long ago gave up any expectation that I would be able to get pages to
look the same in NN4 and, well, anything else. But I do still put some
small effort into making it look decent.

--
Greg Schmidt gr***@trawna.com
Trawna Publications http://www.trawna.com/
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Richard | last post: by
33 posts views Thread by Dave (DreamIsle) | last post: by
2 posts views Thread by vinit_mahajan99 | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by UniDue | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.