Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to align image with text?

    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>

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    You're probably better off using positioning to afix the tree image to the bottom of the paragaph than trusting float and vertical-align.

    Code:
    <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.

  • #3
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    If it were me, I would use this code (place it in between the style tags) and just manually position it:

    Code:
    .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
    Code:
    class="caption"
    to the caption and
    Code:
    class="img"
    to the image

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Might look better to have the text flow around the image:

    Example 1 Code

    Example 2 Code
    ☠ ☠RON☠ ☠


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •