raitis Posted November 26, 2012 Share Posted November 26, 2012 dear forum, i have this html:http://quop.eu/quop/wp-content/public/ebay.html and the table starts where it says "product description": i tried to center the table with this:align="center" but it just centers the text. how to center the table? and how to align the text to the left side? sincerely,raitis p.s. here is the code: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>quop.eu EBAY</title><style type="text/css">@charset "UTF-8";* {margin:0px;padding:0px;font-family:'Arial';text-align:center;border-collapse: collapse;}a {text-decoration:none; border:none;}img {border:none;}t1 {align:center}.kl_info {vertical-align:top;}.kl_m {width:1px; vertical-align:top;}.kl_vorschau {padding:3px;}.kl_vorschau img {border:1px solid black; width:634px; height:631x;}.kl_vorschau a img {width:100px; height:100px;}.kl_vorschau a .kl_foto {display:none; position:absolute; left:125px; width:720px; height:720px; border:1px solid black; margin:0px; padding:0px;}.kl_vorschau a:hover .kl_foto {display:block;} .kl_body tr td p {font-weight: bold;text-align: center;font-size: 24px;}</style><script type="text/javascript"></script></head><body><table width="966" class="kl_body" align="center" BORDER=6 BORDERCOLOR=#00afef> <tr> <td height="162"><a href="http://www.quop.eu" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/quopEU.jpg" width="966" height="162" longdesc="http://quop.eu/quop/wp-content/uploads/quopEU.jpg"></a></td> </tr></table></br><table width="966" class="kl_body" align="center" BORDER=6 BORDERCOLOR=#00afef> <td height="860" class="kl_m"> <div class="kl_vorschau kl_height_1"> </br> <t1> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_11-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_11-720x720.jpg);background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_21-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_21-720x720.jpg);background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_31-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_31-720x720.jpg);background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_41-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_41-720x720.jpg);background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_51-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_51-720x720.jpg);background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_61-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_61-720x720.jpg);background-repeat:no-repeat;"></div> </a> <img src="http://quop.eu/quop/wp-content/public/quop_logo.png" alt="1"> </t1> </tr></table></div></br><table width="966" class="kl_body" align="center" BORDER=6 BORDERCOLOR=#00afef> <tr> <td height="400" valign="top"><p> </p> <p> Product description: </p></br><center> <table width="700" border="2" align="center"> <tr> <td width="120">Product ID:</td> <td>22222986</td> </tr> <tr> <td width="120">Product name:</td> <td>Fuel pump, Kraftstoffpumpe Mitsubishi Pajero III 3.2 DI-D shogun montero</td> </tr> <tr> <td width="120">Manufacturer:</td> <td>Mitsubishi</td> </tr> <tr> <td width="120">Part number:</td> <td>ME190711</td> </tr> <tr> <td width="120">Car:</td> <td>2004 Pajero, 3.2DID, 135.000Km, aut., 5 door, silver, leather, sport susp.</td> </tr> <tr> <td width="120">VIN:</td> <td>JMALYV78W43001154</td> </tr> <tr> <td width="120"> </td> <td> </td> </tr> </table> </center></br></td> </tr></table></br> </body></html> Link to comment Share on other sites More sharing options...
niche Posted November 26, 2012 Share Posted November 26, 2012 margin: 0 auto inside a container with height and width. Also, use float for positioning 1 Link to comment Share on other sites More sharing options...
raitis Posted November 27, 2012 Author Share Posted November 27, 2012 (edited) margin: 0 auto inside a container with height and width. Also, use float for positioning like this?<table width="966" class="kl_body" align="center" BORDER=6 BORDERCOLOR=#00afef margin=0 auto> <tr> <td height="300" valign="top" margin=0 position=floating> <p> Product description: </p></br> <table width="700" border="2" align="absolute"> Edited November 27, 2012 by raitis Link to comment Share on other sites More sharing options...
DarkxPunk Posted November 27, 2012 Share Posted November 27, 2012 I would recommend to stop using tables. I know I am not addressing the issue, but I say stop using them. Use divs. Link to comment Share on other sites More sharing options...
raitis Posted November 27, 2012 Author Share Posted November 27, 2012 I would recommend to stop using tables. I know I am not addressing the issue, but I say stop using them. Use divs. ok. this way? <div align="center"> <table width="700" border="2" align="absolute"> <tr> <td width="120">Product ID:</td> <td>22222986</td> </tr> <tr> <td width="120">Product name:</td> <td>Fuel pump, Kraftstoffpumpe Mitsubishi Pajero III 3.2 DI-D shogun montero</td> </tr> <tr> <td width="120">Manufacturer:</td> <td>Mitsubishi</td> </tr> <tr> <td width="120">Part number:</td> <td>ME190711</td> </tr> <tr> <td width="120">Car:</td> <td>2004 Pajero, 3.2DID, 135.000Km, aut., 5 door, silver, leather, sport susp.</td> </tr> <tr> <td width="120">VIN:</td> <td>JMALYV78W43001154</td> </tr> <tr> <td width="120"> </td> <td> </td> </tr> </table></div> Link to comment Share on other sites More sharing options...
opendesigns Posted November 27, 2012 Share Posted November 27, 2012 There is no problem using a table if, you know, it's an actual table, so the product description table is fine. But the rest of your content is also in tables which is not good. To be honest, I thought people stopped using them years ago! Based on your current code, the only thing you need to do to center this product description table is this: <table width="700" border="2" style="margin:0 auto;"> Give that a whirl, and spend a bit of time looking into actual HTML/CSS layouts. Tables are for tables, not layouts! Link to comment Share on other sites More sharing options...
raitis Posted November 27, 2012 Author Share Posted November 27, 2012 There is no problem using a table if, you know, it's an actual table, so the product description table is fine. But the rest of your content is also in tables which is not good. To be honest, I thought people stopped using them years ago! Based on your current code, the only thing you need to do to center this product description table is this: <table width="700" border="2" style="margin:0 auto;"> Give that a whirl, and spend a bit of time looking into actual HTML/CSS layouts. Tables are for tables, not layouts! thanks! it worked. now it looks like this:http://quop.eu/quop/wp-content/public/ebay.html but when i try to use it, where its supposed to be it looks like this (the image gallery splits up)any idea why? http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=170912092366#ht_2864wt_1156 Link to comment Share on other sites More sharing options...
DarkxPunk Posted November 29, 2012 Share Posted November 29, 2012 (edited) When I get a chance I will code it with divs and show you. <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>quop.eu EBAY</title> <style type="text/css"> * { margin: 0; border: 0; padding: 0; font-family: 'Arial'; text-align: center; } a {text-decoration:none;} #logo { background: url(http://quop.eu/quop/wp-content/uploads/quopEU.jpg) center center; display: block; width: 966px; height: 162px; } .kl_body { margin: 5px auto; padding: 10px; border: 6px solid #00afef; width: 966px; } #showCase { width: 672px; margin: 0 auto; } .kl_body #showCase img { border:1px solid black; width:634px; height:631x; margin: 0 5px; } .kl_body #showCase a img { width:100px; height:100px; float: left; margin: 10px 5px; } .kl_body #showCase a .kl_foto { display:none; position:absolute; left:125px; width:720px; height:720px; border:1px solid black; } .kl_body #showCase a:hover .kl_foto {display:block;} h1 { font-size: 24px; } #table { width: 700px; margin: 50px auto; border: 1px solid black; overflow: hidden; } #table * { text-align: left; } .row { border-bottom: 1px solid black; width: 700px; } .row #last { border: 0; } .col { width: 115px; border-right: 1px solid black; margin: 0 5px; } .col,.row { float: left; } </style></head><body><div style="height: 162px;" class="kl_body"> <a id="logo" href="http://www.quop.eu" target="_blank"></a></div><div class="kl_body"> <div id="showCase"> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_11-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_11-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_21-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_21-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_31-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_31-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_41-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_41-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_51-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_51-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_61-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_61-720x720.jpg);background-repeat:no-repeat;"></div> </a> </div> <img src="http://quop.eu/quop/wp-content/public/quop_logo.png" alt="1"></div><div class="kl_body"> <h1 style="text-align: left;">Product description:</h1> <div id="table"> <div class="row"> <div class="col">Product ID:</div> 22222986 </div> <div class="row"> <div class="col">Product name:</div> Fuel pump, Kraftstoffpumpe Mitsubishi Pajero III 3.2 DI-D shogun montero </div> <div class="row"> <div class="col">Manufacturer:</div> Mitsubishi </div> <div class="row"> <div class="col">Part number:</div> ME190711 </div> <div class="row"> <div class="col">Car:</div> 2004 Pajero, 3.2DID, 135.000Km, aut., 5 door, silver, leather, sport susp. </div> <div class="row" id="last"> <div class="col">VIN:</div> JMALYV78W43001154 </div> </div></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div></body></html> Edited November 30, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
raitis Posted November 30, 2012 Author Share Posted November 30, 2012 When I get a chance I will code it with divs and show you.<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>quop.eu EBAY</title> <style type="text/css"> * { margin: 0; border: 0; padding: 0; font-family: 'Arial'; text-align: center; } a {text-decoration:none;} #logo { background: url(http://quop.eu/quop/wp-content/uploads/quopEU.jpg) center center; display: block; width: 966px; height: 162px; } .kl_body { margin: 5px auto; padding: 10px; border: 6px solid #00afef; width: 966px; } #showCase { width: 672px; margin: 0 auto; } .kl_body #showCase img { border:1px solid black; width:634px; height:631x; margin: 0 5px; } .kl_body #showCase a img { width:100px; height:100px; float: left; margin: 10px 5px; } .kl_body #showCase a .kl_foto { display:none; position:absolute; left:125px; width:720px; height:720px; border:1px solid black; } .kl_body #showCase a:hover .kl_foto {display:block;} h1 { font-size: 24px; } #table { width: 700px; margin: 50px auto; border: 1px solid black; overflow: hidden; } #table * { text-align: left; } .row { border-bottom: 1px solid black; width: 700px; } .row #last { border: 0; } .col { width: 115px; border-right: 1px solid black; margin: 0 5px; } .col,.row { float: left; } </style></head><body><div style="height: 162px;" class="kl_body"> <a id="logo" href="http://www.quop.eu" target="_blank"></a></div><div class="kl_body"> <div id="showCase"> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_11-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_11-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_21-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_21-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_31-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_31-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_41-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_41-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_51-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_51-720x720.jpg); background-repeat:no-repeat;"></div> </a> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"> <img src="http://quop.eu/quop/wp-content/uploads/images/22222986_61-150x150.jpg" alt="1"> <div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_61-720x720.jpg);background-repeat:no-repeat;"></div> </a> </div> <img src="http://quop.eu/quop/wp-content/public/quop_logo.png" alt="1"></div> <div class="kl_body"> <h1 style="text-align: left;">Product description:</h1> <div id="table"> <div class="row"> <div class="col">Product ID:</div> 22222986 </div> <div class="row"> <div class="col">Product name:</div> Fuel pump, Kraftstoffpumpe Mitsubishi Pajero III 3.2 DI-D shogun montero </div> <div class="row"> <div class="col">Manufacturer:</div> Mitsubishi </div> <div class="row"> <div class="col">Part number:</div> ME190711 </div> <div class="row"> <div class="col">Car:</div> 2004 Pajero, 3.2DID, 135.000Km, aut., 5 door, silver, leather, sport susp. </div> <div class="row" id="last"> <div class="col">VIN:</div> JMALYV78W43001154 </div> </div></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div></body></html> thanks a lot!this looks great, but the images shift to the left.http://quop.eu/quop/wp-content/public/ebay.html but here is something wrong.should i make a css file and add all style to it and remove the styles from the html file?http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=170912092366#ht_2632wt_1156 Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 1, 2012 Share Posted December 1, 2012 Honestly I have never worked with eBay so I am not sure how it handles the CSS... It should not shift everything if you copy and paste everything I put, as you tested on your first link... Link to comment Share on other sites More sharing options...
dsonesuk Posted December 1, 2012 Share Posted December 1, 2012 Probably the best option would be to use an unordered list element, similar to how it is used for menus. <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>quop.eu EBAY</title> <style type="text/css"> * { margin: 0; border: 0; padding: 0; font-family: 'Arial'; text-align: center; } a {text-decoration:none;} #logo { background: url(http://quop.eu/quop/wp-content/uploads/quopEU.jpg) center center; display: block; width: 966px; height: 162px; } .kl_body { margin: 5px auto; padding: 10px; border: 6px solid #00afef; width: 966px; } #showCase { width: 672px; margin: 0 auto; position:relative; /*added by dsonesuk*/ } .kl_body #showCase img { border:1px solid black; width:634px; height:631px; margin: 0 5px; } .kl_body #showCase a img { width:100px; height:100px; float: left; margin: 10px 5px; } .kl_body #showCase a .kl_foto { display:none; position:absolute; left:125px; width:720px; height:720px; border:1px solid black; } .kl_body #showCase a:hover .kl_foto {display:block;} h1 { font-size: 24px; } #table { width: 700px; margin: 50px auto; border: 1px solid black; overflow: hidden; } #table * { text-align: left; } .row { border-bottom: 1px solid black; width: 700px; } .row #last { border: 0; } .col { width: 115px; border-right: 1px solid black; margin: 0 5px; } .col,.row { float: left; } #showCase ul, #showCase li {list-style-type:none; padding:0; margin:0; text-indent:0;}#showCase ul ul { left: 13px; position: absolute; top: 122px; visibility: hidden;} #showCase ul li:hover ul { visibility:visible;} </style></head><body><div style="height: 162px;" class="kl_body"> <a id="logo" href="http://www.quop.eu" target="_blank"></a></div><div class="kl_body"> <div id="showCase"> <ul> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_11-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_11-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_21-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_21-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_31-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_31-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_41-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_41-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_51-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_51-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_61-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_61-720x720.jpg" /> </li> </ul> </li> </ul> </div> <div> <img src="http://quop.eu/quop/wp-content/public/quop_logo.png" alt="1"> </div> </div> <div class="kl_body"> <h1 style="text-align: left;">Product description:</h1> <div id="table"> <div class="row"> <div class="col">Product ID:</div> 22222986 </div> <div class="row"> <div class="col">Product name:</div> Fuel pump, Kraftstoffpumpe Mitsubishi Pajero III 3.2 DI-D shogun montero </div> <div class="row"> <div class="col">Manufacturer:</div> Mitsubishi </div> <div class="row"> <div class="col">Part number:</div> ME190711 </div> <div class="row"> <div class="col">Car:</div> 2004 Pajero, 3.2DID, 135.000Km, aut., 5 door, silver, leather, sport susp. </div> <div class="row" id="last"> <div class="col">VIN:</div> JMALYV78W43001154 </div> </div></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div></body></html> Link to comment Share on other sites More sharing options...
raitis Posted December 3, 2012 Author Share Posted December 3, 2012 Probably the best option would be to use an unordered list element, similar to how it is used for menus. <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>quop.eu EBAY</title> <style type="text/css"> * { margin: 0; border: 0; padding: 0; font-family: 'Arial'; text-align: center; } a {text-decoration:none;} #logo { background: url(http://quop.eu/quop/wp-content/uploads/quopEU.jpg) center center; display: block; width: 966px; height: 162px; } .kl_body { margin: 5px auto; padding: 10px; border: 6px solid #00afef; width: 966px; } #showCase { width: 672px; margin: 0 auto; position:relative; /*added by dsonesuk*/ } .kl_body #showCase img { border:1px solid black; width:634px; height:631px; margin: 0 5px; } .kl_body #showCase a img { width:100px; height:100px; float: left; margin: 10px 5px; } .kl_body #showCase a .kl_foto { display:none; position:absolute; left:125px; width:720px; height:720px; border:1px solid black; } .kl_body #showCase a:hover .kl_foto {display:block;} h1 { font-size: 24px; } #table { width: 700px; margin: 50px auto; border: 1px solid black; overflow: hidden; } #table * { text-align: left; } .row { border-bottom: 1px solid black; width: 700px; } .row #last { border: 0; } .col { width: 115px; border-right: 1px solid black; margin: 0 5px; } .col,.row { float: left; } #showCase ul, #showCase li {list-style-type:none; padding:0; margin:0; text-indent:0;}#showCase ul ul { left: 13px; position: absolute; top: 122px; visibility: hidden;} #showCase ul li:hover ul { visibility:visible;} </style></head><body><div style="height: 162px;" class="kl_body"> <a id="logo" href="http://www.quop.eu" target="_blank"></a></div><div class="kl_body"> <div id="showCase"> <ul> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_11-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_11-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_21-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_21-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_31-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_31-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_41-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_41-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_51-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_51-720x720.jpg" /> </li> </ul> </li> <li> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_61-150x150.jpg" alt="1"></a> <ul> <li> <img class="kl_foto" src="http://quop.eu/quop/wp-content/uploads/images/22222986_61-720x720.jpg" /> </li> </ul> </li> </ul> </div> <div> <img src="http://quop.eu/quop/wp-content/public/quop_logo.png" alt="1"> </div> </div> <div class="kl_body"> <h1 style="text-align: left;">Product description:</h1> <div id="table"> <div class="row"> <div class="col">Product ID:</div> 22222986 </div> <div class="row"> <div class="col">Product name:</div> Fuel pump, Kraftstoffpumpe Mitsubishi Pajero III 3.2 DI-D shogun montero </div> <div class="row"> <div class="col">Manufacturer:</div> Mitsubishi </div> <div class="row"> <div class="col">Part number:</div> ME190711 </div> <div class="row"> <div class="col">Car:</div> 2004 Pajero, 3.2DID, 135.000Km, aut., 5 door, silver, leather, sport susp. </div> <div class="row" id="last"> <div class="col">VIN:</div> JMALYV78W43001154 </div> </div></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div><div class="kl_body"><h1>Title</h1><p>Filler Text</p></div></body></html> thanks, i used your code, but this is how it looks:http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=170912092366#ht_7578wt_1156 Link to comment Share on other sites More sharing options...
raitis Posted December 3, 2012 Author Share Posted December 3, 2012 Honestly I have never worked with eBay so I am not sure how it handles the CSS... It should not shift everything if you copy and paste everything I put, as you tested on your first link... i tried to add a separate css file, but this is how it looks (attachment) Link to comment Share on other sites More sharing options...
dsonesuk Posted December 3, 2012 Share Posted December 3, 2012 (edited) Your css styling is not being picked up even when it is shows when you go to edit source, this usually happen when you save in notepad, and do not select Encoding Type UTF-8, but save it as default ANSI instead, which will cause browser not to read the file correctly. Edited December 3, 2012 by dsonesuk 1 Link to comment Share on other sites More sharing options...
raitis Posted December 3, 2012 Author Share Posted December 3, 2012 Your css styling is not being picked up even when it is shows when you go to edit source, this usually happen when you save in notepad, and do not select Encoding Type UTF-8, but save it as default ANSI instead, which will cause browser not to read the file correctly. what is the solution?i use mac osx and not windows/notepad.i copied the code, pasted it into dreamweaver and took it to paste into ebay (html). what am i doing wrong? Link to comment Share on other sites More sharing options...
raitis Posted December 3, 2012 Author Share Posted December 3, 2012 what is the solution?i use mac osx and not windows/notepad.i copied the code, pasted it into dreamweaver and took it to paste into ebay (html). what am i doing wrong? i used now firefox instead of safari.now it works! :)thank you very very very much! Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 3, 2012 Share Posted December 3, 2012 So is everything working? Are you using dsonesuk or mine? Link to comment Share on other sites More sharing options...
raitis Posted December 4, 2012 Author Share Posted December 4, 2012 So is everything working? Are you using dsonesuk or mine? yes, everything is working now. thanks!i used both, but i think now i used dsonesuk's code. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now