SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cannot get this text to line up with image.

    I have an image on this page called naturalchoicesthumb.jpg. I also have some text out to the right how it, basically explaining what the image is. Everything looks like I want it, except for the text which is placed to the right of the image is not aligned properly with the top of the image. The text starts half way down the image...I can't seem to figure this out.

    Here is my code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>deronsizemore.com - Deron Sizemore's personal portfolio site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body, html {height: 100%;}
    body {
    margin: 0;
    padding: 0;
    color: #000000;
    background: url(images/bg2.gif);
    }
    #outer {
    width: 700px;
    background: url(images/bg.gif) repeat-y left top;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    min-height: 100%;
    _height: 100%;
    margin: auto;
    clear: both;
    position: relative;
    }
    html>#outer {height:auto;}
    #header {
    border-bottom: 1px solid #000000;
    background: #ffffff;
    height: 30px;
    width: 700px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    padding-top: 2px
    }
    #leftheader {
    float: left;
    margin-right: 200px;
    }
    #rightheader {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    padding-top: 7px;
    }
    #rightheader a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #rightheader a:hover {
    color: #6666ff; 
    text-decoration: underline; 
    }
    #rightheader a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #rightheader a:visited:hover {
    color: #6666ff; 
    text-decoration: underline;
    }
    #picheader {
    height: 150px;
    background: url(images/blueback4.gif);
    border-bottom: 1px solid #000000;
    }
    #picheader img {
    border-right: 1px solid #000000;
    float: left;
    width: 600;
    }
    #content {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    width: 499px;
    margin-left: 100px;
    margin-top: 2px;
    clear: both;
    }
    #content a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #content a:hover {
    color: #6666ff; 
    text-decoration: underline; 
    }
    #content a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #content a:visited:hover {
    color: #6666ff; 
    text-decoration: underline;
    }
    #title {
    padding-left: 4px;
    padding-bottom: 4px;
    }
    #paragraph {
    padding-bottom: 10px;
    border-bottom: 1px solid #cccccc;
    width: 475px;
    margin-left: 10px;
    }
    .naturalchoicesthumb {
    float: left;
    display: block;
    margin-right: 2px;
    }
    #footer {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    width: 501px;
    margin-left: 98px;
    border-top: 1px solid #9999ff;
    text-align: center;
    margin-top: 15px;
    height: 15px;
    position: absolute;
    bottom: 0;
    }
    #footer a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #footer a:hover {
    color: #6666ff; 
    text-decoration: underline; 
    }
    #footer a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #footer a:visited:hover {
    color: #6666ff; 
    text-decoration: underline;
    }
    #clearfooter {
    height: 35px;
    }
    </style>
    </head>
    
    <body>
    <div id="outer"> 
      <div id="header"> 
        <div id="leftheader"> <img src="images/deronsizemorelogo.gif" alt="" title="deronsizemore.com logo" /> 
        </div>
        <div id="rightheader"> <a href="index.php">Home</a> | <a href="resume.php">Resume</a> 
          | <a href="portfolio.php">Portfolio</a> | <a href="services.php">Services</a> 
          | <a href="contact.php">Contact</a> </div>
      </div>
      <div id="picheader"> <img src="images/watersplash.jpg" alt="" title="Water Splash" /> 
      </div>
      <div id="content"> 
        <div id="paragraph"> 
    	 <p>This page has examples of my work.  You will find websites, logos, icons, and images that I have either designed or edited.</p>
    	 <div id="title"><strong>Natural-Choices</strong></div>
         <img src="images/naturalchoicesthumb.jpg" class="naturalchoicesthumb" alt="natural choices" title="natural choices" />
    	 <p>Natural Choices is dedicated to the work of Carol Perkins who is a Naturopathic Physician (N.D.). Naturopathic Physicians are educated and trained as general practitioners who specialize in natural medicine.</p>
        </div>
      </div>
      <div id="clearfooter"></div>
      <div id="footer"> All Content &copy; Deron Sizemore - 2004 </div>
    </div>
    </body>
    </html>
    Last edited by deronsizemore; Sep 16, 2004 at 09:16.


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
  •