www.webdeveloper.com
Results 1 to 4 of 4

Thread: Aligning multiple pic on one page

  1. #1
    Join Date
    Mar 2006
    Posts
    5

    Aligning multiple pic on one page

    I am having a lot of trouble getting this to work.
    I made a template in photoshop and broke it down to smaller pictures.
    I am fairly new to HTML, so I hope this isn't something really stupid.
    I tested the code out on photobuckets HTML practice and it worked just fine!
    Then I tried it in Myspace, completely screwed up! there were gaps everywhere, they were not aligned, and the image map was completely screwed up. Then I tried it on Ebay (which is what it is for) The images didn't line up on ebay. One code Three different results. I tweeked it a little to fix one of the pics but I am clueless on the rest.
    Here is the code:

    <html>
    <body bgcolor="34021f">
    <a href="http://savage-steel.com" target="_blank"><img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/top.jpg" border="0" alt="Image hosting by Photobucket"></a><BR><img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/top2.jpg" usemap="#top2" alt="" style="border-style:none" />



    <map id="top2" name="top2">
    <area shape="rect" coords="34,54,105,87" href="http://savage-steel.com%22 target=%22_blank" title="" />
    <area shape="rect" coords="147,55,213,84" href="http://stores.ebay.com/SAVAGE-STEEL/My-Shipping-and-Wholesale-Policy.html" title="" />
    <area shape="rect" coords="260,53,329,85" href="http://stores.ebay.com/SAVAGE-STEEL/Piercing-Aftercare.html" title="" />
    <area shape="default" nohref="nohref" alt="" />
    </map>
    <BR>
    <img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/nav.jpg"
    align="left" usemap="#nav" alt="" style="border-style:none" />



    <map id="nav" name="nav">
    <area shape="rect" alt="" coords="24,19,242,37" href="http://stores.ebay.com/SAVAGE-STEEL_Plugs-Tunnels-Tapers_W0QQcolZ4QQdirZ1QQfsubZ12QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,42,221,57" href="http://stores.ebay.com/SAVAGE-STEEL_ONE-CENT-JEWELRY_W0QQcolZ4QQdirZ1QQfsubZ2QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="23,67,205,81" href="http://stores.ebay.com/SAVAGE-STEEL_Dangling-Navel-Rings_W0QQcolZ4QQdirZ1QQfsubZ8QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="22,90,199,110" href="http://stores.ebay.com/SAVAGE-STEEL_Basic-Navels_W0QQcolZ4QQdirZ1QQfsubZ9QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,112,200,130" href="http://stores.ebay.com/SAVAGE-STEEL_Captive-Hoops-Horseshoes_W0QQcolZ4QQdirZ1QQfsubZ13QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="25,133,198,153" href="http://stores.ebay.com/SAVAGE-STEEL_Surface-Industrial-Bars_W0QQcolZ4QQdirZ1QQfsubZ15QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="22,155,196,175" href="http://stores.ebay.com/SAVAGE-STEEL_Logo-Navel-Rings_W0QQcolZ4QQdirZ1QQfsubZ6QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,178,171,197" href="http://stores.ebay.com/SAVAGE-STEEL_Eyebrow-Jewelry_W0QQcolZ4QQdirZ1QQfsubZ14QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="25,201,166,220" href="http://stores.ebay.com/SAVAGE-STEEL_Titanium_W0QQcolZ4QQdirZ1QQfsubZ18QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,221,164,240" href="http://stores.ebay.com/SAVAGE-STEEL_Natural-Organic_W0QQcolZ4QQdirZ1QQfsubZ17QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="26,243,160,262" href="http://stores.ebay.com/SAVAGE-STEEL_Tongue-Barbells_W0QQcolZ4QQdirZ1QQfsubZ3QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,263,157,281" href="http://stores.ebay.com/SAVAGE-STEEL_Nipple-Rings-Shields_W0QQcolZ4QQdirZ1QQfsubZ10QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="25,285,150,300" href="http://stores.ebay.com/SAVAGE-STEEL_Heavy-Gauges_W0QQcolZ4QQdirZ1QQfsubZ5QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="26,306,149,321" nohref title="" />
    <area shape="rect" alt="" coords="26,305,150,323" href="http://stores.ebay.com/SAVAGE-STEEL_Glass_W0QQcolZ4QQdirZ1QQfsubZ4QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="26,325,138,344" href="http://stores.ebay.com/SAVAGE-STEEL_Labret-Studs_W0QQcolZ4QQdirZ1QQfsubZ11QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="28,345,107,363" href="http://stores.ebay.com/SAVAGE-STEEL_Silver-Pendants_W0QQcolZ4QQdirZ1QQfsubZ16QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="25,365,134,383" href="http://stores.ebay.com/SAVAGE-STEEL_Other_W0QQcolZ4QQdirZ1QQfsubZ1QQftidZ2QQtZkm" title="" />
    <area shape="default" nohref="nohref" alt="" />
    </map><BR>

    <img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/btmlip.jpg" border="0" alt="Image hosting by Photobucket"><BR>
    <img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/description.jpg" border="0" alt="Image hosting by Photobucket"><P>
    How the hell do I get this Open spot to change color?
    <img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/btm.jpg" border="0" alt="Image hosting by Photobucket">

    </body>
    </html>

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Are you pasting this into existing pages, or posting it 'as is?'

    There are several elements missing from you page, if you're using it as is.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Mar 2006
    Posts
    6
    Try this: (Though I have no idea what you mean by open space.)

    <html>

    <head>
    <title>Savage Steal</title>
    </head>

    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" topmargin="0" marginheight="0">
    <table align="center" cellpadding="0" cellspacing="0" width="780" bgcolor="#340320">
    <tr>
    <td width="780" colspan="2"><a href="http://savage-steel.com" target="_blank"><img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/top.jpg" border="0" alt="Image hosting by Photobucket"></a></td>
    </tr>
    <tr>
    <td width="780" colspan="2"><img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/top2.jpg" usemap="#top2" alt="" style="border-style:none" /></td>
    </tr>
    <tr>
    <td width="248" align="left" valign="top"><img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/nav.jpg" align="left" usemap="#nav" style="border-style:none" />

    </td>
    <td width="531" align="left" valign="top">
    <img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/btmlip.jpg" border="0" alt="Image hosting by Photobucket"><img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/description.jpg" border="0" alt="Image hosting by Photobucket">
    </td>
    </tr>
    <tr>
    <td width="780" colspan="2">
    <img src="http://i17.photobucket.com/albums/b96/reptedjess/web%20makeup/btm.jpg" border="0" alt="Image hosting by Photobucket">
    </td>
    </tr>
    </table>
    <map id="top2" name="top2">
    <area shape="rect" coords="34,54,105,87" href="http://savage-steel.com%22 target=%22_blank" title="" />
    <area shape="rect" coords="147,55,213,84" href="http://stores.ebay.com/SAVAGE-STEEL/My-Shipping-and-Wholesale-Policy.html" title="" />
    <area shape="rect" coords="260,53,329,85" href="http://stores.ebay.com/SAVAGE-STEEL/Piercing-Aftercare.html" title="" />
    <area shape="default" nohref="nohref" alt="" />
    </map><map id="nav" name="nav">
    <area shape="rect" alt="" coords="24,19,242,37" href="http://stores.ebay.com/SAVAGE-STEEL_Plugs-Tunnels-Tapers_W0QQcolZ4QQdirZ1QQfsubZ12QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,42,221,57" href="http://stores.ebay.com/SAVAGE-STEEL_ONE-CENT-JEWELRY_W0QQcolZ4QQdirZ1QQfsubZ2QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="23,67,205,81" href="http://stores.ebay.com/SAVAGE-STEEL_Dangling-Navel-Rings_W0QQcolZ4QQdirZ1QQfsubZ8QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="22,90,199,110" href="http://stores.ebay.com/SAVAGE-STEEL_Basic-Navels_W0QQcolZ4QQdirZ1QQfsubZ9QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,112,200,130" href="http://stores.ebay.com/SAVAGE-STEEL_Captive-Hoops-Horseshoes_W0QQcolZ4QQdirZ1QQfsubZ13QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="25,133,198,153" href="http://stores.ebay.com/SAVAGE-STEEL_Surface-Industrial-Bars_W0QQcolZ4QQdirZ1QQfsubZ15QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="22,155,196,175" href="http://stores.ebay.com/SAVAGE-STEEL_Logo-Navel-Rings_W0QQcolZ4QQdirZ1QQfsubZ6QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,178,171,197" href="http://stores.ebay.com/SAVAGE-STEEL_Eyebrow-Jewelry_W0QQcolZ4QQdirZ1QQfsubZ14QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="25,201,166,220" href="http://stores.ebay.com/SAVAGE-STEEL_Titanium_W0QQcolZ4QQdirZ1QQfsubZ18QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,221,164,240" href="http://stores.ebay.com/SAVAGE-STEEL_Natural-Organic_W0QQcolZ4QQdirZ1QQfsubZ17QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="26,243,160,262" href="http://stores.ebay.com/SAVAGE-STEEL_Tongue-Barbells_W0QQcolZ4QQdirZ1QQfsubZ3QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="24,263,157,281" href="http://stores.ebay.com/SAVAGE-STEEL_Nipple-Rings-Shields_W0QQcolZ4QQdirZ1QQfsubZ10QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="25,285,150,300" href="http://stores.ebay.com/SAVAGE-STEEL_Heavy-Gauges_W0QQcolZ4QQdirZ1QQfsubZ5QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="26,306,149,321" nohref title="" />
    <area shape="rect" alt="" coords="26,305,150,323" href="http://stores.ebay.com/SAVAGE-STEEL_Glass_W0QQcolZ4QQdirZ1QQfsubZ4QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="26,325,138,344" href="http://stores.ebay.com/SAVAGE-STEEL_Labret-Studs_W0QQcolZ4QQdirZ1QQfsubZ11QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="28,345,107,363" href="http://stores.ebay.com/SAVAGE-STEEL_Silver-Pendants_W0QQcolZ4QQdirZ1QQfsubZ16QQftidZ2QQtZkm" title="" />
    <area shape="rect" alt="" coords="25,365,134,383" href="http://stores.ebay.com/SAVAGE-STEEL_Other_W0QQcolZ4QQdirZ1QQfsubZ1QQftidZ2QQtZkm" title="" />
    <area shape="default" nohref="nohref" alt="" />
    </map>
    </body>

    </html>

  4. #4
    Join Date
    Mar 2006
    Posts
    5
    That works on ebay and photo bucket but not myspace. On myspace the table borders come up and it's not matched up all that well on ebay, but it's much better. So, I see you put them up with tables, and it looks like I have much more to learn.

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