Picture Aligment

Neodude1123201

Neodude1123201

Bogan
Messages
8,474
Location
Australia
Im currently building this website:www.nerd-arcade.net.tf

and i cant get the 2 dividers to aligh properly,i want it too look like this:

alighn.gif
 
best way is to use a table.
I know people hate when I say that, although I don't know why.
Code: 
<table id="mainTable">
 <thead>
  <tr>
    <th colspan="2" valign="bottom" align="center" style="text-align: center;">
    This is the table header
   </th>
 </tr>
</thead>
<tbody>
 <tr>
  <td colspan="2" valign="top" align="center" style="text-align: center;">
  This is your first block of text
  </td>
 </tr>
 <tr>
  <td colspan="2" valign="top" align="center" style="text-align: center;">
  <img src="imageGoesHere.gif" alt="" />
  </td>
 </tr>
</tbody>
</table>
then just replace the tr sections in the tbody tag as many times as needed.
 
you have to change the part that says image goes here with the url of the image you want to load.
Here is a cleaned up version that you could play with if you want.
Code: 
<?xml version="1.0" enctype="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en-US" lang="en-US" dir="ltr">
 <head>
  <meta name="verify-v1" content="HoiO6k6ZGX8SXwjIqrQY/qnEQWVUXnMxDVQkxuczv14=" />
  <title>N3RD M.A.M.E Arcade Cabinet</title>
  <meta name="verify-v1" content="HoiO6k6ZGX8SXwjIqrQY/qnEQWVUXnMxDVQkxuczv14=" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script>
     var d='nerd-arcade.net.tf';
  </script>
  <script type="text/javascript" src="[URL]http://85787978.statistiq.com/85787978.js[/URL]">
  </script>
  <style type="text/css">
  body
  {
   background-image: url('http://au.geocities.com/hack3r.112320//Code2.jpg');
   background-repeat: repeat-y;
   background-color: #000000;
   color: #ffffff;
   font-size: 18px;
   font-family: Century Gothic, Sans-Serif;
  }
  #mainDiv
  {
   position: absolute;
   top: 65px;
   left: 10px;
   z-index: 0;
   height: auto;
   width: auto;
  }
  #mainTable
  {
   width: 1000px;
   height: auto;
  }
  .linkImage
  {
   width: 100px;
   height: 30px;
   border-width: 0px;
  }
  </style>
 </head>
 <body>
 </body dir="ltr" lang="en-us">
  <div id="mainDiv">
   <table id="mainTable">
    <tbody>
     <tr>
       <td colspan="1" valign="top" align="left" style="width: 375px;">
       <!-- This is the table that holds the links -->
         <table id="linksTable" cellpadding="0" cellspacing="0">
          <tr>
            <th id="linkHeader" colspan="1" valign="bottom" align="center" style="text-align: center;">
             Navigation
            </th>
          </tr>
         </thead>
         <tbody>
          <tr>
            <td colspan="1" valign="top" align="left">
             <a href="index.html" target="_self">
              <img name="graphics1" class="linkImage" src="[URL]http://au.geocities.com/hack3r.112320//b8.png[/URL]" alt="Home" />
             </a>
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="top" align="left">
             <a href="intro.html" target="_self">
              <img name="graphics2" class="linkImage" src="[URL]http://au.geocities.com/hack3r.112320//b1.png[/URL]" alt="Intro" />
             </a>
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="top" align="left">
             <a href="const.html" target="_self">
              <img name="graphics3" class="linkImage" src="[URL]http://au.geocities.com/hack3r.112320//b2.png[/URL]" alt="Construction" />
             </a>
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="top" align="left">
             <a href="pain.html" target="_self">
              <img name="graphics4" class="linkImage" src="[URL]http://au.geocities.com/hack3r.112320//b3.png[/URL]" alt="Paint" />
             </a>
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="top" align="left">
             <a href="sys.html" target="_self">
              <img name="graphics5" class="linkImage" src="[URL]http://au.geocities.com/hack3r.112320//b4.png[/URL]" alt="System" />
             </a>
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="top" align="left">
             <a href="gal.html" target="_self">
              <img name="graphics6" class="linkImage" src="[URL]http://au.geocities.com/hack3r.112320//b5.png[/URL]" alt="Gallery" />
             </a>
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="top" align="left">
             <a href="link.html" target="_self">
              <img name="graphics7" class="linkImage" src="[URL]http://au.geocities.com/hack3r.112320//b6.png[/URL]" alt="Links" />
             </a>
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="top" align="left">
             <a href="contact.html" target="_self">
              <img name="graphics8" class="linkImage" src="[URL]http://au.geocities.com/hack3r.112320//b7.png[/URL]" alt="Contact Us" />
             </a>
            </td>
          </tr>
         </tbody>
        </table>
       <!--End of the table that holds the links -->
       </td>
       <td colspan="1" valign="top" align="center" style="width: 625px;">
        <table id="contentTable" style="width: 100%;">
         <thead>
          <tr>
            <th id="contentHeader" colspan="1" valign="bottom" align="center" style="text-align: center; font-size: 38px; font-weight: normal;">
             N3rd M.A.M.E. Cabinet
            </th>
          </tr>
         <tbody>
          <tr>
            <td colspan="1" valign="top" align="center" style="text-align: center;">
            <sup style="font-size: 12px;">Est. April 16, 2007</sup>
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="top" align="center" style="text-align: center;">
             This website is dedicated to my arcade Machine!
             <br />
             <img src="[URL]http://au.geocities.com/hack3r.112320/div.gif[/URL]" alt="" />
             <br />
             April 18, 2007: Test!!!
             <br />
             <img src="[URL]http://au.geocities.com/hack3r.112320/div.gif[/URL]" alt="" />
             <br />
             <span style="font-size: 20px;" The N3RD M.A.M.E. Cabinet!!
            </td>
          </tr>
          <tr>
            <td colspan="1" valign="middle" align="center" style="text-align: center;">
             Before you start surfing though the website, I would like to take this opportunity to thank:
             <br />
             My Dad, Joe Santillo for helping me
             <br style="clear: both;" />
             <hr style="width: 150px; color: #ffffff;" size="1px" />
            </td>
          </tr>
         </tbody>
        </table>
       </td>
     </tr>
     <tr>
       <td colspan="1" valign="top" align="left">
         
       </td>
       <td id="footer" colspan="1" valign="bottom" align="right" style="font-size: 14px; text-align: left;">
        <script type="text/javascript">
         <!--
          document.write("This Website,Unless otherwise stated is created by Luke Santillo,Including all Graphics and coding.The Dividers on this page are curtosy of Design tote.");
         //-->
        </script>
       </td>
     </tr>
    </tbody>
   </table>
  </div>
 </body>
</html>
 
You must log in or register to reply here.

Similar threads

R
Cosmesity changes
Replies
0
Views
277
Rustyz
R
Harper
Previewing my monitor 2 on monitor 1 / Presentation Software
Replies
1
Views
605
Harper
Harper
R
windows upgrade nightmare (dell laptop from home to pro win11)
Replies
8
Views
1K
camilasaunder89
C
Nukem
Powercolor 6800XT Red Dragon
Replies
2
Views
751
Nukem
Nukem
grantheo
tschicka tschicka
Replies
0
Views
216
grantheo
grantheo
Back
Top Bottom