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
10  1542 
In article
<11*********************@f16g2000cwb.googlegroups. com>,
"Alexander Fischer" <ha***********@hotmail.comwrote:
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
On 2006-10-19, Alexander Fischer <ha***********@hotmail.comwrote:
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.
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
In article
<11*********************@f16g2000cwb.googlegroups. com>,
"Alexander Fischer" <ha***********@hotmail.comwrote:
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...
A padding-top:30px for the <pdoesn'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!
In article
<no****************************@news1.chem.utoront o.ca>,
David Stone <no******@domain.invalidwrote:
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 <pdoesn'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
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
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
On Fri, 20 Oct 2006 01:35:11 +0100, dorayme wrote
(in article
<do**********************************@news-vip.optusnet.com.au>):
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>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.
Purists tend to make me a bit nervous :)
--
Patrick
Brighton, UK
<http://www.patrickjames.me.uk>
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
<do**********************************@news-vip.optusnet.com.au>):
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
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.
Purists tend to make me a bit nervous :)
--
Patrick
Brighton, UK
<http://www.patrickjames.me.uk>
On 2006-10-20, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>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.
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>
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2006-10-20, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
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've left out the unnecessary <tr>.
<head>
<style type="text/css">
div.container
{
display: table;
}
di
Yes, I see. Thanks Ben.
--
dorayme
In article
<11**********************@b28g2000cwb.googlegroups .com>,
"Alexander Fischer" <ha***********@hotmail.comwrote:
patrick j wrote:
On Fri, 20 Oct 2006 01:35:11 +0100, dorayme wrote
(in article
<do**********************************@news-vip.optusnet.com.au>):
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>
>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...
Purists tend to make me a bit nervous :)
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Imran |
last post by:
Hi,
I am attempting to create a CSS-driven website, in that I want to be
able to control the display/content from the CSS file. I do not want
to use tables.
On a page, I have a background...
|
by: Marek Mänd |
last post by:
Can the
<button><img></button>
mutated via CSS so, that the inner image of <BUTTON>
would entirely visually become the button itsself - I mean without the
outer elements borders and so...
...
|
by: Dave |
last post by:
Hi,
if I have a body colour (white) specified in an external css sheet,
what should I do in an individual webpage that is to have a
background-image, i.e. override the attribute 'white' set in the...
|
by: Kerberos |
last post by:
I followed Dan Cederholm's image replacement tutorial, to replace a header
tag by a logo. The h1 is clickable if no CSS is applied but it I replace
it by the logo, the area isn't clickable anymore...
|
by: Chris Beall |
last post by:
See
http://pages.prodigy.net/chris_beall/Demo/photo%20block%20experiments.html
I've ended up with what seems like a rather complex structure for what I
thought would be a somewhat simple...
|
by: shapper |
last post by:
Hello,
Is there a way to make the browse button an image?
Thanks,
Miguel
|
by: Roy Smith |
last post by:
Be kind to me, I'm a CSS newbie...
I've been playing with drupal, building a web site (hyc-test.org). I
started with the "sky" theme, but didn't like the way it rendered list
items in menus.
...
|
by: mcfly1204 |
last post by:
I have an image link, an image within an anchor tag, that I would like to remove the styling of. When I say styling, I mean the default blue box around the image. I have tried:
text-decoration:...
|
by: stevedude |
last post by:
CSS newbie again. I have a problem trying to get coffee mug images
within anchor tags to center with my link text for a vertical list
menu. If I use the horizontal/vertical properties of...
|
by: GArlington |
last post by:
I am trying to implement an image map (in this particular case a
country map) with few <area ...>s on it.
The challenge is to add background image (dot) to each <areaso it
will display over the...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
