www.webdeveloper.com
Results 1 to 2 of 2

Thread: How can I align text with the top of an image?

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    How can I align text with the top of an image?

    I have an image and want to display text to the left of it. Unfortunately the text appears about 1/3rd of the way down the image and starts to wrap.
    Is there a way to get the text to align with the top of the image? The way that I have read doesn't work.

    I am also having problems with the text below the sub heading. I would like more space between it and the image. I've put 50px but it is not working.

    the html code;
    HTML Code:
    <div id="bookmark">
        <img src="http://www.what-do-christians-believe.co.uk/wdcb-images/both bookmrk.png" class="texttop" "alt="Photo of Stockholm" align="left" hspace="4px" />
     <h3> Bookmark</h3>
     <p> View of both sides.<br/>
      Printed on gloss card<br/>
      Size 210 x 74 mm </p>
    </div>
    the css code
    Code:
    #bookmark {border-style: solid;
               border-width: 1px;
               border-color: black;
               padding: 10px;
              }
    #bookmark img.align-left {float: left;
                                       padding-left: 50px;
    }
    #bookmark .texttop  {vertical-align: text-top;}
    #postcard {Margin-top: 20px;
               border-style: solid;
               border-width: 1px;
               border-color: black;
               padding-left: 20px;
              }
    You can see the url here

  2. #2
    Join Date
    Jul 2013
    Location
    France
    Posts
    16
    hello there,

    open you CSS style and add this :

    Code:
    p.text {
    display: block;
    margin-top:-20px;
    }
    Then open your html page and change this :
    Code:
    <h3> Bookmark</h3>
     <p> View of both sides.<br/>
      Printed on gloss card<br/>
      Size 210 x 74 mm </p>
    To :

    Code:
    <p class="text">
    <h3> Bookmark</h3>
    View of both sides.<br/>
      Printed on gloss card<br/>
      Size 210 x 74 mm 
    </p>
    You can use the same Class for the other images / text

    Goodluck

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles