How can I align images on my MySpace page?

Question

I want to put pictures at the top of my myspace page above the ad on my band profile. I can put one picture up just fine, but when I try to put pictures on top of one another they just overlap each other.

I would like to do something like this.

Any tips for how I can fix this?

I used:

<style type="text/css"> 
  body { 
    background-position:top center;margin-top: H;
  }
  div.topbanner {
    top: 150%;
    left: 49%;
    margin-left: -600px;
    width: 100%;
    height: 800px;
    position: absolute;
  }
</style>
<div class="topbanner">
  <IMG SRC="http://www.victoryhardcore.com/myspaceimages/atdr/homesick/adtr_myspace_top_26.jpg" border="0">
</div>

This is what I have so far:

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=446378267

I want a picture above that, but whenever I put the code in again the new picture just sits on top of the old picture.

Answer 1

It's because you're using "position: absolute", presumably for both, so they're trying to sit on top of each other. Try making the 2nd one "position:relative".

Answer 2

The page you want to copy uses a table layout with images in each cell:

Just to show the first rows:

<table width="1260" height="1414" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="5" rowspan="2">
      <img src="image01.jpg" width="481" height="107" alt="">
    </td>
    <td colspan="6">
      <img src="image02.jpg" width="290" height="47" alt="">
    </td>
    <td colspan="5" rowspan="2">
      <img src="image03.jpg" width="489" height="107" alt="">
    </td>
  </tr>
  <tr>
    <td colspan="6">
    </td>
  </tr>
  <tr>
    <td>
      <img src="image05.jpg" width="239" height="428" alt="">
    </td>
    <td colspan="14">
    </td>
    <td>
      <img src="image07.jpg" width="244" height="428" alt="">
    </td>
  </tr>
</table>

It's going to take some time to copy that ;-).