Hi Guys, I have a PSD file i made up and i wanted to turn it into a layout for my Ebay listings.. so i found a few tutorials on the net and was able to slice my image up and create a HTML page with my design on... problem is now, when i put it into Ebay it looks HORRIBLE!!! and the reason is because it is using the style tag in the DIV tag's - "top:*px;" which is causing my layout to stick to the top of the screen... unfortunatly EVERY image has this tag and i dont know any equivilant CSS option to keep the layout as it is and still keep it compatable with Ebay.. Here is the page.. <div id="Table_01" style="position:absolute;left:150px;top:0px;width:700px;height:862px;"> <div id="Untitled-1-01" style="position:absolute;left:0px;top:0px;width:700px;height:21px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_01.gif" width="700" height="21" alt=""> </div> <div id="Untitled-1-02" style="position:absolute;left:0px;top:21px;width:19px;height:841px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_02.gif" width="19" height="841" alt=""> </div> <div id="Untitled-1-03" style="position:absolute;left:19px;top:21px;width:659px;height:13px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_03.gif" width="659" height="13" alt=""> </div> <div id="Untitled-1-04" style="position:absolute;left:678px;top:21px;width:22px;height:841px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_04.gif" width="22" height="841" alt=""> </div> <div id="Untitled-1-05" style="position:absolute;left:19px;top:34px;width:12px;height:186px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_05.gif" width="12" height="186" alt=""> </div> <div id="Untitled-1-06" style="position:absolute;left:31px;top:34px;width:634px;height:174px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_06.gif" width="634" height="174" alt=""> </div> <div id="Untitled-1-07" style="position:absolute;left:665px;top:34px;width:13px;height:186px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_07.gif" width="13" height="186" alt=""> </div> <div id="Untitled-1-08" style="position:absolute;left:31px;top:208px;width:634px;height:12px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_08.gif" width="634" height="12" alt=""> </div> <div id="Untitled-1-09" style="position:absolute;left:19px;top:220px;width:659px;height:15px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_09.gif" width="659" height="15" alt=""> </div> <div id="Untitled-1-10" style="position:absolute;left:19px;top:235px;width:659px;height:9px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_10.gif" width="659" height="9" alt=""> </div> <div id="Untitled-1-11" style="position:absolute;left:19px;top:244px;width:16px;height:318px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_11.gif" width="16" height="318" alt=""> </div> <!-- START --------------------------------------------------------------------------------------------------- --> <div id="Table_02" style="background: #abb5bb url('http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_12.gif');position:absolute;left:35px;top:244px;width:630px;height:306px;"> <div id="Content" style="padding: 16px;color: #042F59;font: normal 12pt "Trebuchet MS", Arial, Geneva, Lucida, Arial, Helvetica, Sans-serif;"> <!-- Write Discription Here - Start--> <p align="center">YOGA - Blue Line Dynamic Microphone</p> <p align="left">DM-800 Series</p> <ul> <li>Frequency - 100Hz~16KHz</li> <li>Pick-up Pattern - Cardioid</li> <li>Sensitivity - -70dB±3dB</li> <li>Impedance - 500 ohms</li> <li>Housing - Plastic/Die-cast Alloy</li> <li>Connector - 3-pin XLR</li> </ul> <!-- Write Discription Here - End--> </div> </div> <!-- FINISH --------------------------------------------------------------------------------------------------- --> <div id="Untitled-1-13" style="position:absolute;left:665px;top:244px;width:13px;height:318px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_13.gif" width="13" height="318" alt=""> </div> <div id="Untitled-1-14" style="position:absolute;left:35px;top:550px;width:630px;height:12px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_14.gif" width="630" height="12" alt=""> </div> <div id="Untitled-1-15" style="position:absolute;left:19px;top:562px;width:659px;height:30px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_15.gif" width="659" height="30" alt=""> </div> <div id="Untitled-1-16" style="position:absolute;left:19px;top:592px;width:12px;height:270px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_16.gif" width="12" height="270" alt=""> </div> <div id="Untitled-1-17" style="position:absolute;left:31px;top:592px;width:305px;height:11px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_17.gif" width="305" height="11" alt=""> </div> <div id="Untitled-1-18" style="position:absolute;left:336px;top:592px;width:25px;height:270px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_18.gif" width="25" height="270" alt=""> </div> <div id="Untitled-1-19" style="position:absolute;left:361px;top:592px;width:304px;height:11px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_19.gif" width="304" height="11" alt=""> </div> <div id="Untitled-1-20" style="position:absolute;left:665px;top:592px;width:13px;height:270px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_20.gif" width="13" height="270" alt=""> </div> <div id="Untitled-1-21" style="position:absolute;left:31px;top:603px;width:12px;height:217px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_21.gif" width="12" height="217" alt=""> </div> <!-- START --------------------------------------------------------------------------------------------------- --> <div id="Untitled-1-22" style="position:absolute;left:43px;top:603px;width:279px;height:204px;"> <!-- First Image Here --> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay%20Pics/Mic1.jpg" width="279" height="204" alt=""> <!-- First Image Here --> </div> <!-- FINISH --------------------------------------------------------------------------------------------------- --> <div id="Untitled-1-23" style="position:absolute;left:322px;top:603px;width:14px;height:217px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_23.gif" width="14" height="217" alt=""> </div> <div id="Untitled-1-24" style="position:absolute;left:361px;top:603px;width:13px;height:217px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_24.gif" width="13" height="217" alt=""> </div> <!-- START --------------------------------------------------------------------------------------------------- --> <div id="Untitled-1-25" style="position:absolute;left:374px;top:603px;width:279px;height:204px;"> <!-- Second Image Here --> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay%20Pics/Mic2.jpg" width="279" height="204" alt=""> <!-- Second Image Here --> </div> <!-- FINISH --------------------------------------------------------------------------------------------------- --> <div id="Untitled-1-26" style="position:absolute;left:653px;top:603px;width:12px;height:217px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_26.gif" width="12" height="217" alt=""> </div> <div id="Untitled-1-27" style="position:absolute;left:43px;top:807px;width:279px;height:13px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_27.gif" width="279" height="13" alt=""> </div> <div id="Untitled-1-28" style="position:absolute;left:374px;top:807px;width:279px;height:13px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_28.gif" width="279" height="13" alt=""> </div> <div id="Untitled-1-29" style="position:absolute;left:31px;top:820px;width:305px;height:42px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_29.gif" width="305" height="42" alt=""> </div> <div id="Untitled-1-30" style="position:absolute;left:361px;top:820px;width:304px;height:42px;"> <img src="http://i124.photobucket.com/albums/p27/MobiTec-Ebay/Ebay-Layout/Untitled-1_30.gif" width="304" height="42" alt=""> </div> </div> <!-- End ImageReady Slices --> Code (markup): Could anyone have ago at making it compatable and Valid CSS for Ebay Please as i'm at the point now where i dont have the time left to learn full HTML/CSS or have the patiance (tired laugh!) ps, i'm not saying i'm not willing to do anymore.. but if someone can give me a huge hand or maybe some really big tips or fast work-arounds that would be great... ) Cheers MobiTec
Hi, thanks for replying... here it is below, having to do it as a zip because of file size limit on site, PSD @ 693kb
Well, I really don't know what to tell you, other than you basically have four main DIV containers to work with, the last two being roughly half the size of the others, so I'd float the third one. As for the rounded corners, there are a few ways to go about it, but what's really going to screw things up is the background image of the first one. Are these DIV containers of a fixed width or are they fluid?