Jump to content
raitis

cant center table!

Recommended Posts

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>

Share this post


Link to post
Share on other sites

margin: 0 auto inside a container with height and width. Also, use float for positioning

  • Like 1

Share this post


Link to post
Share on other sites
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 by raitis

Share this post


Link to post
Share on other sites

I would recommend to stop using tables. I know I am not addressing the issue, but I say stop using them. Use divs.

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites

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! :)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 by DarkxPunk

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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)

post-110883-0-04417800-1354519166_thumb.jpg

Share this post


Link to post
Share on other sites

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 by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...