...

View Full Version : How to align image with text?



jch439
10-21-2010, 10:14 PM
I want to align an image of a tree to the left of a paragraph of text in HTML coding. Right now, with the coding I've made below, the image is to the left, but the paragraph is aligned so it is at the top of the image, when I want to text to be aligned with the bottom of the image. Despite the fact that I already have align="bottom" in my code, it still does nothing.

Does anyone know what I'm doing wrong/how I can fix this? Here is my coding:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A5Forests</title>
<style type = "text/css" media = "all">
p {text-indent:50px;}
</style>
</head>

<p><img src="tree.gif" align="bottom" style="float:left;"> <b>Trees</b> are typically defined as woody, single-stemmed, self-supporting, plants at least 15 feet tall at maturity and at least 3 inches in diameter, these are perennial and have notable foliage. Trees represent some the oldest living life forms on the planet. Trees were instrumental in the development and support of civilizations. They along with other vegetation form important links in the earth's hydrological, geological, chemical.</p>

kansel
10-21-2010, 10:31 PM
You're probably better off using positioning to afix the tree image to the bottom of the paragaph than trusting float and vertical-align.


<head>
<title>A5Forests</title>
<style type = "text/css" media = "all">
p {text-indent:50px; position: relative; padding-left: 75px; }

.atree {
position: absolute;
bottom: 0;
left: 0;
}

</style>
</head>
<body>
<p><img class="atree" src="tree.gif"> <b>Trees</b> are typically defined
as woody, single-stemmed, self-supporting, plants at least 15 feet tall at
maturity and at least 3 inches in diameter, these are perennial and have
notable foliage. Trees represent some the oldest living life forms on the
planet. Trees were instrumental in the development and support of
civilizations. They along with other vegetation form important links in the
earth's hydrological, geological, chemical.</p>
</body>

Here I am assuming your tree image is 75px wide. (You'd probably want the padding a bit wider to make a gutter between the image and the text.)

*This is 100% untested code off the top of my head, but it should come close to what you want.

maxhudson
10-22-2010, 12:20 AM
If it were me, I would use this code (place it in between the style tags) and just manually position it:


.tree
{
position: absolute;
margin-left: #px;
margin-top: #px;
}

.caption
{
text-indent: 50px;
position: relative;
margin-left: #px;
margin-top: #px;
}

and then just add
class="caption" to the caption and
class="img" to the image

Major Payne
10-22-2010, 01:26 PM
Might look better to have the text flow around the image:

Example 1 Code (http://paynelessdesigns.com/dsns/dsn_textwrap_images.shtml)

Example 2 Code (http://paynelessdesigns.com/dsns/dsn_imagesintext.shtml)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum