This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > November 2006 > Image styling





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author Image styling
Alexander Fischer

2006-11-05, 11:32 pm

Hello,

I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it's multiple line.


XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX

So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:

XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
that spans across several lines


Could you give me a hint about how to achieve the desired result?

Thanks,
Alex

dorayme

2006-11-05, 11:32 pm

In article
<1161278168.529919.49080@f16g2000cwb.googlegroups.com>,
"Alexander Fischer" <happysmithers@hotmail.com> wrote:

> Hello,
>
> I would like to have a large image with text right next to it. This
> text should a) be vertically centered and b) stay *next* to the image
> even when it's multiple line.
>
>
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX This is my text that
> XXXXXXXXXXXXXXXXX spans across several
> XXXXXXXXXXXXXXXXX lines
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
>
> So far, when I give the img the vertical-align:middle attribute, it
> works, but only the first line of text stays where it belongs:


I guess a hint is at http://www.sn2.com.au/reports.html... but it
is not quite middle...

--
dorayme
Ben C

2006-11-05, 11:32 pm

On 2006-10-19, Alexander Fischer <happysmithers@hotmail.com> wrote:
> Hello,
>
> I would like to have a large image with text right next to it. This
> text should a) be vertically centered and b) stay *next* to the image
> even when it's multiple line.
>
>
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX This is my text that
> XXXXXXXXXXXXXXXXX spans across several
> XXXXXXXXXXXXXXXXX lines
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
>
> So far, when I give the img the vertical-align:middle attribute, it
> works, but only the first line of text stays where it belongs:
>
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX This is my text that
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> XXXXXXXXXXXXXXXXX
> that spans across several lines

This is the correct behaviour-- the image sits in the text as though it
were a word, and flows with it.

> Could you give me a hint about how to achieve the desired result?

The hard part here is how to centre the text vertically. A positioned
div can be centered in its container with auto top and bottom margins,
but only if its height is specified. We can't specify the height here,
because we don't know how many lines the text is going to take up.

So I think a table is the best way to go, and the vertical-align: middle
property does just what we want:

<head>
<style type="text/css">
td
{
vertical-align: middle; /* usually the default anyway */
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="large-image.png">
</td>
<td>
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
</td>
</tr>
</table>
</body>

For the purists, you can of course do this with display: table-cell and
display: table and keep your HTML clean of layout information.
David Stone

2006-11-05, 11:32 pm

In article
<doraymeRidThis-3ACD50.06455220102006@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.au> wrote:

> In article
> <1161278168.529919.49080@f16g2000cwb.googlegroups.com>,
> "Alexander Fischer" <happysmithers@hotmail.com> wrote:
>
>
>
> I guess a hint is at http://www.sn2.com.au/reports.html... but it
> is not quite middle...

A padding-top:30px for the <p> doesn't seem like a particularly
good solution, for a number of reasons. The caption also gets cut
off (with no horizontal scrollbar) if the browser window isn't wide
enough... hopefully, there's a better solution!
dorayme

2006-11-05, 11:33 pm

In article
<no.email-30BD2E.17294319102006@news1.chem.utoronto.ca>,
David Stone <no.email@domain.invalid> wrote:

>
> A padding-top:30px for the <p> doesn't seem like a particularly
> good solution, for a number of reasons. The caption also gets cut
> off (with no horizontal scrollbar) if the browser window isn't wide
> enough... hopefully, there's a better solution!

You are right, David, it's not so good! In fact, it's terrible
come to think of it...

--
dorayme
dorayme

2006-11-05, 11:33 pm

In article <slrnejfs4n.1al.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:

> For the purists, you can of course do this with display: table-cell and
> display: table and keep your HTML clean of layout information.

Please go on and give an example, I'd be all ears... I want to be
pure and good... I have been bad and impure for too long. I am
serious.

--
dorayme
patrick j

2006-11-05, 11:33 pm

On Fri, 20 Oct 2006 01:35:11 +0100, dorayme wrote
(in article
<doraymeRidThis-4ED620.10351120102006@news-vip.optusnet.com.au> ):

> In article <slrnejfs4n.1al.spamspam@bowser.marioworld>,
> Ben C <spamspam@spam.eggs> wrote:
>
>
> Please go on and give an example, I'd be all ears... I want to be
> pure and good... I have been bad and impure for too long. I am
> serious.

Purists tend to make me a bit nervous :)

--
Patrick
Brighton, UK

<http://www.patrickjames.me.uk>

Alexander Fischer

2006-11-05, 11:33 pm

Same goes for me :-)

Honestly, thanks for the information given by everyone; in the spirit
of CSS Zen Garden I wanted to avoid any tables in the HTML...

Thanks for the help,
Alex


patrick j wrote:
> On Fri, 20 Oct 2006 01:35:11 +0100, dorayme wrote
> (in article
> <doraymeRidThis-4ED620.10351120102006@news-vip.optusnet.com.au> ):
>
>
> Purists tend to make me a bit nervous :)
>
> --
> Patrick
> Brighton, UK
>
> <http://www.patrickjames.me.uk>

Ben C

2006-11-05, 11:33 pm

On 2006-10-20, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <slrnejfs4n.1al.spamspam@bowser.marioworld>,
> Ben C <spamspam@spam.eggs> wrote:
>
>
> Please go on and give an example, I'd be all ears... I want to be
> pure and good... I have been bad and impure for too long. I am
> serious.

I've left out the unnecessary <tr>.

<head>
<style type="text/css">
div.container
{
display: table;
}
div.illustration, div.description
{
display: table-cell;
vertical-align: middle;
}
</style>
</head>

<body>
<div class="container">
<div class="illustration">
<img src="large-image.png">
</div>
<div class="description">
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
</div>
</div>
</body>
dorayme

2006-11-05, 11:33 pm

In article <slrnejgtrf.ctj.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:

> On 2006-10-20, dorayme <doraymeRidThis@optusnet.com.au> wrote:
>
> I've left out the unnecessary <tr>.
>
> <head>
> <style type="text/css">
> div.container
> {
> display: table;
> }
> di

Yes, I see. Thanks Ben.

--
dorayme
dorayme

2006-11-05, 11:33 pm

In article
<1161326733.396675.280930@b28g2000cwb.googlegroups.com>,
"Alexander Fischer" <happysmithers@hotmail.com> wrote:

> patrick j wrote:
[color=darkred]
> Same goes for me :-)
>
> Honestly, thanks for the information given by everyone; in the spirit
> of CSS Zen Garden I wanted to avoid any tables in the HTML...
>

Well, the display:table will do you for this purpose (which by
the way, is a purpose of goodness and purity... so I hope you are
not making yourself too nervous.

[btw I reversed your (impure) top-posting so all my many readers
can follow every little thing that I am involved in to the nth
degree]

--
dorayme
Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews