www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need Help Correcting Alignment of Text and Pictures

  1. #1
    Join Date
    Jan 2011
    Posts
    4

    Need Help Correcting Alignment of Text and Pictures

    I am working on a website and I have pictures on it with text below. It is centering all four above each other on the page. I am looking to have a set of two above the other two so they are set up like 4 corners to each other. Here is the code so far

    <p>
    <center><a href="Beta.html"><img src="../IMG_0594.gif" alt="Picture 1 Home" width="150" height="113"><div class="imgText" style="width:150px">Beta Building</div></a><a href="Delta.html"><img src="../IMG_0596.gif" alt="Picture 2 Home" width="150" height="113"><div class="imgText" style="width:150px">Delta Building</div></a><a href="Gamma.html"><img src="../IMG_0603.gif" alt="Picture 3 Home" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building</div></a><a href="Date Stone.JPG" target="_blank"><img src="../Date Stone.gif" alt="Home Picture 4" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building Stone. Founded 1820</div></a></center>

    the website is www.pinecreekcrossing.com.... If you take a look you will see what I mean on the home page.

    Thank You for the help

  2. #2
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    74
    You should really consider using <div>s, but anyway what are you using to code this? There is some unnecessary tagging going on. Are you doing tables? If so you can just put the pictures in columns
    HTML Code:
    <table width="100" border="0" cellspacing="12" cellpadding="0">
      <tr>
        <td valign="top" align="center"><a href="Beta.html"><img src="../IMG_0594.gif" alt="Picture 1 Home" width="150" height="113"><div class="imgText" style="width:150px">Beta Building</div></a></td>
        <td valign="top" align="center"><a href="Delta.html"><img src="../IMG_0596.gif" alt="Picture 2 Home" width="150" height="113"><div class="imgText" style="width:150px">Delta Building</div></a></td>
      </tr>
      <tr>
        <td valign="top" align="center"><a href="Gamma.html"><img src="../IMG_0603.gif" alt="Picture 3 Home" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building</div></a></td>
        <td valign="top" align="center"><a href="Date Stone.JPG" target="_blank"><img src="../Date Stone.gif" alt="Home Picture 4" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building Stone. Founded 1820</div></a></td>
      </tr>
    </table>

  3. #3
    Join Date
    Jan 2011
    Posts
    4
    Quote Originally Posted by mikewgd View Post
    You should really consider using <div>s, but anyway what are you using to code this? There is some unnecessary tagging going on. Are you doing tables? If so you can just put the pictures in columns
    HTML Code:
    <table width="100" border="0" cellspacing="12" cellpadding="0">
      <tr>
        <td valign="top" align="center"><a href="Beta.html"><img src="../IMG_0594.gif" alt="Picture 1 Home" width="150" height="113"><div class="imgText" style="width:150px">Beta Building</div></a></td>
        <td valign="top" align="center"><a href="Delta.html"><img src="../IMG_0596.gif" alt="Picture 2 Home" width="150" height="113"><div class="imgText" style="width:150px">Delta Building</div></a></td>
      </tr>
      <tr>
        <td valign="top" align="center"><a href="Gamma.html"><img src="../IMG_0603.gif" alt="Picture 3 Home" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building</div></a></td>
        <td valign="top" align="center"><a href="Date Stone.JPG" target="_blank"><img src="../Date Stone.gif" alt="Home Picture 4" width="150" height="113"><div class="imgText" style="width:150px">Gamma Building Stone. Founded 1820</div></a></td>
      </tr>
    </table>
    I am using Dreamweaver CS5. and correct me if I am wrong, but I am using <div>s... Am I using them wrong? I was trying to stay away from tables.

  4. #4
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    74
    Oh, ok. Im just noticing <table> in your source code and a lot of these <p class="MsoNormal"> and empty <p>. Sorry don't mean to "critique" your site. I would just put those in <div> tags. I could come up with something if you would like.

  5. #5
    Join Date
    Jan 2011
    Posts
    4
    Quote Originally Posted by mikewgd View Post
    Oh, ok. Im just noticing <table> in your source code and a lot of these <p class="MsoNormal"> and empty <p>. Sorry don't mean to "critique" your site. I would just put those in <div> tags. I could come up with something if you would like.
    Yea I took over this project from someone else. I could use all the help I could get. Thanks.

  6. #6
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    74
    Well I would do this:
    HTML Code:
    <a href="#" class="logo"><logo image></a>
    <div id="contents">
        <div id="sidebar">
            -- Have your navigation in there (make unordered list)
            -- Map stuff
        </div>
        <div id="content">
            -- All of your content here text should be wrapped in <p>
            -- For your images with text I would add a div called 4col or something and then   
                have stuff aligned
        </div>
    </div>
    <p id="footer">Footer text</p>
    I would probably do something along those lines.

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