SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Aling prob :-(


    http://i216.photobucket.com/albums/c...tter_align.jpg

    Writting my first HTML newsletter: http://www.pauserefreshment.co.uk/ne...ewsletter.html and all was going good until i added a row of images on the right. The last one is mis aligned and I just cant figure out why is not in line with the above two. Heres the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    <title>pause... refreshment newsletter</title>
    <style type="text/css">
    </style>
    </head>
    <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
    <table width="100%" style="height: 100%;" cellpadding="0" cellspacing="0" table border="2" bordercolor="#D68126">
      <caption align=bottom style="text-align: left;">
      To unsubscribe email <a href="mailto:hello@pause.co.uk;pauseorders@googlemail.com ">hello@pause</a> with "Unsubscribe" in subject line
      </caption>
      <tr>
        <!-- ============ HEADER SECTION ============== -->
        <td colspan="2" bgcolor="#A6AE1F" ><img align=right src="../images/model_bean/taste_profile_3.jpg" alt="fancy a cuppa? Call 01924 363091 :-)" style="padding:0px; margin:0px;">
        <h1 style="color:#622449; padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif">pause... refreshment newsletter<br>
        "Professional coffee machine suppliers"</h1></td>
      </tr>
      <tr>
        <!-- ============ LEFT COLUMN (MENU) ============== -->
        <td width="20%" valign="top" bgcolor="#F1F1F1" background="../images/model_bean/bean_4.jpg"><h4 style="font-size:16px; text-align:center; padding-bottom:0px; border-bottom:0px; color:#D68126;">Barista buddy</br>
            "Articles all about how to make professional "</h4>
          <p style="color:#622449; font-weight:200"><a href="#" style="color:#D68126; font-weight:bold">Barista Training</a><br>
            Get the low down on how to join the super league...[more]<br><a href="#" style="color:#D68126; font-weight:bold">Latte Art</a>
          <br>
          Learn the brush strokes of Latte Art and wow your cafe customers...[more]<br>
          
         
          <a href="#" style="color:#D68126; font-weight:bold">Flat White?</a><br>
          The Australian import that gots the high street coffee chains buzzing. Learn how to make it...[more] 
          </p></td>
        <!-- ============ RIGHT COLUMN (CONTENT) ============== -->
        <td width="80%" valign="top" bgcolor="#f1f1f1" background="../images/model_bean/bean_4.jpg"><h2 style="color:#D68126">pause... refreshment wins world snooker contract<img align="right" src="../images/newsletter/snooker_ronnie_2.jpg" style="padding:0px; margin:20px;" ></h2>
          <p style="color:#622449; font-weight:200">Here's a two column layout with header and footer sections that span the width of both columns. The first table row creates the header and contains a single table cell which uses the colspan="2" attribute-value pair.</p>
          <p style="color:#622449; font-weight:200">The second table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1".</p>
          <h2 style="color:#D68126">pause refreshment expands bean to cup range<img align="right" src="../images/newsletter/cimbali_3.jpg" alt="La Cimbali coffee machine" width="110" height="149" style="padding:0px; margin:20px;"></h2>
          <p style="color:#622449; font-weight:200">The third table row creates the footer. Like the header, it contains a single table cell which uses the colspan="2" attribute-value pair.</p>
          <p style="color:#622449; font-weight:200">Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah </p>
          <h2 style="color:#D68126";>You Tube vids demo coffee machines bla bla blah <img align="right" src="../images/newsletter/you_tube.jpg" alt="La Cimbali coffee machine" width="110" height="149" style="padding:0px; margin:20px;"></h2>
          <p style="color:#622449; font-weight:200">The end of promo copy the beginning of online show and tell?Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah Blah Blah blah</p>     
      </tr>
      <!-- ============ FOOTER SECTION ============== -->
      <tr>
        <td colspan="2" align="center" height="20" bgcolor="#D68126"><p style="color:#FFFFFF; font-weight:bold; font-family:Arial, Helvetica, sans-serif;">pause refreshment 128 Thornes Lane, Wakefield, WF2 7RE</p></td>
      </tr>
    </table>
    </body>
    </html>
    Any insights welcome
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Try throwing "clear:both;" on those images.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    Try throwing "clear:both;" on those images.
    brilliant thank you your solution worked :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

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