www.webdeveloper.com
+ Reply to Thread
Results 1 to 4 of 4
  1. 03-08-2006 06:45 AM #1
    reptedjess
    reptedjess is offline Registered User
    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>
    Reply With Quote Reply With Quote
  2. 03-08-2006 10:17 AM #2
    KDLA's Avatar
    KDLA
    KDLA is offline Registered User
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,166
    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)
    Reply With Quote Reply With Quote
  3. 03-08-2006 12:12 PM #3
    tiffgrooves
    tiffgrooves is offline Registered User
    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>
    Reply With Quote Reply With Quote
  4. 03-08-2006 02:33 PM #4
    reptedjess
    reptedjess is offline Registered User
    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.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

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

Forum Rules

 HTML5 Development Center



Recent Articles