Bonjour,
Je suis en train de mettre en forme une boutique e-bay sur internet, et de nouveaux bugs apparaissent à chaque fois que j'en résous certains...
Ci-dessous le lien vers la page test:
http://cgi.ebay.fr/Ski-adulte-test-not-for-sale-ne-achetertest-/140411109752?cmd=ViewItem&pt=FR_JG_Sports_Hiver_Skis&hash=item20b1278178
L'insert est sur le bas de l'annonce.
Mon code html :
Le CSS :
Pas facile de résoudre les problèmes puisque je ne peux pas faire la mise en ligne moi-même.
Tout fonctionne dans la page seule, et insérée dans l'annonce ebay des bugs apparaissent:
- positionnement "float" pour le menu à gauche dans firefox
- positionnement "float" dans IE 7.0 au rafraichissement de la page (au début pas de souci)
- problème de centrage des éléments dans le tableau du haut.
Si quelqu'un peut m'aider...
Merci d'avance de vos réponses!
Modifié par jul073 (10 Jul 2010 - 11:00)
Je suis en train de mettre en forme une boutique e-bay sur internet, et de nouveaux bugs apparaissent à chaque fois que j'en résous certains...
Ci-dessous le lien vers la page test:
http://cgi.ebay.fr/Ski-adulte-test-not-for-sale-ne-achetertest-/140411109752?cmd=ViewItem&pt=FR_JG_Sports_Hiver_Skis&hash=item20b1278178
L'insert est sur le bas de l'annonce.
Mon code html :
[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Top n'Sport</title>
<!-- ligne à inclure pour la mise en forme -->
<link rel="stylesheet" media="screen" type="text/css"; title="style" href="http://www.topnsport.com/docs/mep1.css" />
</head>
<body>
<!-- annonce à inclure sur page ebay -->
<div id="annonce-">
<!-- ci-dessous bandeau haut - ne pas modifier -->
<div id="en-tete">
<img src="http://www..com/pics/bandeau.jpg" />
<table>
<tr>
<td style="border:solid 1px #FF0000;border-radius:10px;-moz-border-radius:12px;-webkit-border-radius:12px;width:200px;text-align:center;">
<a href="#payment" target="_self"><img src="http://www.topnsport.com/pics/pictos/payment.jpg" align="middle" alt="types de paiement acceptés" height="55px"> </a></td>
<td style="border:solid 1px #FF0000;border-radius:10px;-moz-border-radius:12px;-webkit-border-radius:12px;width:200px;text-align:center;">
<a href="#shipping" target="_self"><img src="http://www.topnsport.com/pics/pictos/shipping.png" align="middle" alt="expédition" height="65px"> </a></td>
<td style="border:solid 1px #FF0000;border-radius:10px;-moz-border-radius:12px;-webkit-border-radius:12px;width:200px;text-align:center;">
<a href="#guaranty" target="_self"><img src="http://www.topnsport.com/pics/pictos/guaranty.jpg" align="middle" alt="garantie" height="70px"> </a></td>
<td style="border:solid 1px #FF0000;border-radius:10px;-moz-border-radius:12px;-webkit-border-radius:12px;width:200px;text-align:center;">
<a href="http://www.topnsport.com/" target="_blank"><img src="http://www.topnsport.com/pics/pictos/logo.png" align="middle" alt="topnsport"> </a></td>
</tr>
<tr>
<td> Chèques, virements bancaires <br />et CB acceptés</td>
<td> Envoi sous 24/48h <br /> International shipping</td>
<td> Pourquoi acheter chez nous ? <br /> Why buy with us ?</td>
<td> Boutique Top n’ Sport</td>
</tr>
</table>
<img src="http://www..com/pics/sep_01.png" />
<p id="obl"> Votre achat implique l'acceptation de nos <a href="#conditions"> conditions de vente </a> </p>
</div>
<!-- ci-dessous menu à gauche - services -->
<div id="menu">
<div id="services">
<div id="header">
<img src="http://www..com/pics/pratique.png" alt="les plus pratiques" width="178px" height="80px"/> </div>
<p class="francais"> <a href="http://.com/docs/service.html" target="_blank"> Comment choisir <br /> ses chaussures </a> </p>
<p class="anglais"> <a href="http://.com/docs/service-en.html" target="_blank">How to choose <br /> your ski boots </a></p>
<p class="francais"> <a href="http://.com/docs/service.html" target="_blank"> Comment choisir <br /> ses skis adultes </a> </p>
<p class="anglais"> <a href="http://.com/docs/service-en.html" target="_blank"> How to choose <br /> adult skis </a> </p>
<p class="francais"> <a href="http://.com/docs/service.html" target="_blank"> Comment choisir <br /> ses skis junior </a> </p>
<p class="anglais"> <a href="http://.com/docs/service-en.html" target="_blank"> How to choose <br /> junior skis </a> </p>
<p class="francais"> <a href="http://.com/docs/service.html" target="_blank"> Comment régler <br /> ses fixations </a> </p>
<p class="anglais"> <a href="http://.com/docs/service-en.html" target="_blank"> How to adjust <br /> your bindings </a> </p>
<p class="francais"> <a href="http://.com/docs/service.html" target="_blank"> Tableau de correspondance <br /> Mondo Point/ taille </a> </p>
<p class="anglais"> <a href="http://.com/docs/service-en.html" target="_blank"> Mondo Point <br /> Conversion Chart </a> </p>
</div>
<div id="services02">
<div id="menu-condition">
<p class="francais"> <a href="http://.com/docs/condition.html" target="_blank">
le GUIDE <br /> "état du matériel"
</a> </p>
<p class="anglais"> <a href="http://.com/docs/condition-en.html" target="_blank">
gear condition guide
</a> </p>
</div>
<div id="menu-guaranty">
<p class="francais"> <a href="http://.com/docs/enterprise.html" target="_blank">
GARANTIE <br /> 100% satisfait
</a> </p>
<p class="anglais"> <a href="http://.com/docs/enterprise-en.html" target="_blank">
your satisfaction <br /> guaranteed
</a></p>
</div>
<div id="menu-terms-sale">
<p class="francais"> <a href="http://.com/docs/service.html" target="_blank">
conditions <br /> de vente
</a> </p>
<p class="anglais"> <a href="http://.com/docs/service-en.html" target="_blank">
terms <br /> of sale
</a></p>
</div>
<div id="menu-payment">
<p class="francais"> <a href="http://.com/docs/payment.html" target="_blank">
paiement
</a> </p>
<p class="anglais"> <a href="http://.com/docs/payment-en.html" target="_blank">
payment
</a></p>
</div>
<div id="menu-shipping">
<p class="francais"> <a href="http://.com/docs/shipping.html" target="_blank">
expédition
</a> </p>
<p class="anglais"> <a href="http://.com/docs/shipping-en.html" target="_blank">
shipping
</a></p>
</div>
<!-- ci-dessous liens vers page bonnes affaires - best deals -->
<div id="menu-deals">
<p class="francais"> <a href="http://stores.shop.ebay.fr/TOP-and-SPORT__W0QQ_armrsZ1QQ_fsubZ1218390011" target="_blank">
BONNES AFFAIRES
</a> </p>
<p class="anglais"> <a href="http://stores.shop.ebay.fr/TOP-and-SPORT__W0QQ_armrsZ1QQ_fsubZ1218390011" target="_blank">
GREAT DEALS!
</a></p>
</div>
</div>
</div>
<!-- ci-dessous annonce - partie à modifier selon les pages -->
<div id="annonce">
<div id="objet">
<!-- nom de l'objet -->
<h1> ROSSIGNOL BANDIT B3 - 184 cm </h1>
<div id="characteristics">
<!-- pictogrammes caractéristiques -->
<p id="pictos">
<img src="http://www..com/pics/pictos/ski-type/freeride.png" alt="type de ski"/>
<img src="http://www..com/pics/pictos/ski-niveau/advanced-expert.png" alt="niveau de ski"/> </p>
</div>
<p id="photo"> <a href="http://www..com/pics/ski92/92584.jpg" target="_blank">
<!-- lien vers l'objet -->
<img src="http://www..com/pics/ski92/92584.jpg" alt="objet en vente" width="500px" align="middle"/>
<span><img src="http://www.topnsport.com/pics/ski92/92584.jpg" border="1" width="1000px"></span>
</a></p>
<p id="legende"> Survoler la photo pour zoomer, cliquer pour encore plus de détails. </p>
</div>
<p id="general"> Tous les skis proposés ici ont été contrôlés. La semelle a été refaite, les carres sont affûtées. <br />
La sérigraphie a des rayures d'usage, rarement un petit éclat sur le dessus (alors visible sur photo). <br />
Exceptionnellement, la semelle peut présenter quelques rayures minimes sans influence sur les performances. <br />
Les traces / tâches parfois visibles sur les photos des semelles sont normalement un effet du fartage.</p>
<!-- description -->
<div id="description">
<p> <img src="http://www..com/pics/pictos/description.png" alt="description de l'objet"/> </p>
<p> <strong> FIXATIONS/ BINDINGS : </strong> Adaptables toutes pointures AXIUM 300 DIN 3.5-11 (110kg) </p>
<p> <strong> LIGNE DE COTE/ SC : </strong> 120-83-110 R19m </p>
<p> <strong> ÉTAT/ CONDITION : </strong> <a href="http://www.topnsport.com/docs/condition.html" target="_blank" title="plus d'infos"> (détails) </a>Bon .</p>
<p> <strong> GARANTIE/ GUARANTEE : </strong> Satisfaction 100% ou retour sous 10 jours accepté</p>
<p> <strong> QUESTION ? </strong> Contactez-nous (avant d'enchérir) et nous ferons de notre mieux pour vous apporter une réponse au plus vite.</p>
</div>
<!-- offres spéciales -->
<div id="offre">
<p> <img src="http://www..com/pics/pictos/offre.png" alt="offre top and cool" /> </p>
<p class="offre"> <img src="http://www..com/pics/offre/offre-01.png" alt="offre top and cool" /> </p>
</div>
<!-- paiement -->
<div id="payment">
<p> <img src="http://www..com/pics/pictos/paiement.png" alt="paiement" /> </p>
<p> Modes de paiement acceptés : carte bancaire avec Paypal, chèque bancaire (France), virement bancaire </p>
<p class="anglais"> International buyers : Please use Paypal or bank wire transfer (euros only) </p>
</div>
<!-- expédition -->
<div id="shipping">
<p> <img src="http://www..com/pics/pictos/envoi.png" alt="expédition" /> </p>
<p> Votre achat est expédié par Colissimo recommandé dans les 24-48h suivant la réception du paiement validé. Un email de notification d'envoi vous est adressé via ebay. </p>
<p class="anglais">We typically ship within 2 business days after payment has cleared. You receieve a notice from eBay informing you that your items have been shipped </p>
<p class="offre"> <img src="http://www..com/pics/offre/offre-02.png" alt="offre top and cool" /> </p>
<p id="shipping-costs"> <img src="http://www..com/pics/shipping-costs.png" alt="international shipping costs" /> </p>
</div>
<!-- garantie -->
<div id="guaranty">
<p> <img src="http://www..com/pics/pictos/garantie.png" alt="garantie satisfaction" /> </p>
<p> Nous offrons une garantie 100% satisfait ou remboursé; nous ne vous proposons pas d'avoir ou d'échange, sauf si vous le souhaitez. <br />
Vous disposez de 10 jours suivant la réception pour retourner votre objet sans avoir à en fournir de motif, après nous en avoir informé par email. Les frais d'envoi sont à votre charge, sauf en cas d'erreur de notre part (par exemple erreur de taille ou de modèle). <br />
L'état des articles d'occasion est une affaire de perception subjective, vous pouvez juger "excellent" un article présenté comme "bon" - ou l'inverse! <br />
Nous faisons de notre mieux pour décrire les objets et nous acceptons les retours sans question; nous ne prenons pas en charge les frais de transport en cas de désaccord sur l'état de l'objet.
<p class="anglais"> We offer a 10 days money back guarantee. Return shipping is at your expense. <br />
If we make a mistake (i.e. wrong size) we will pay for shipping back to us. <br />
When you buy pre-owned items, condition is a matter of perception, what we may think is "good condition", you may think "excellent condition", or just the opposite. <br />
We do our best to describe items accurately, but will not pay for returns based on a disagreement of condition. </p>
</div>
<!-- CGV -->
<div id="conditions">
<p> <img src="http://www..com/pics/pictos/conditions.png" alt="conditions de vente" /> </p>
</div>
<table>
<tr>
<td>
<p> <strong> Question? </strong> <br />
Nous faisons de notre mieux pour décrire exactement l'objet, n'hésitez pas à poser toute question avant d'enchérir, nous vous répondrons au plus vite. Le fait d'enchérir ou d'acheter implique l'acceptation de nos conditions de vente. </p>
<p> <strong> Garantie satisfaction / Retours : </strong> <br />
Tous nos articles de marque sont garantis authentiques et neufs. Retours / échanges acceptés, voir nos conditions de vente. Les objets d'occasion ne sont pas repris. </p>
<p> <strong> Frais d'envoi et envois groupés : </strong> <br />
les frais d'envoi comprennent l'ensemble des frais d'emballage et d'expédition et ne sont pas négociables; une réduction sur les frais d'envoi est appliquée à partir du 2e objet. Assurance en option au choix de l'acheteur. Nous ne sommes pas responsables des dommages pendant le transport ou des pertes!
<p> <strong> Paiement : </strong> <br />
Paypal, chèque bancaire (France métropolitaine) à l'ordre de Top N Cool SARL, virement bancaire, . Le règlement doit nous parvenir sous 7 jours, à défaut remise en vente de l'objet. Nous sommes un vendeur sérieux et nous voulons des acheteurs sérieux! Les acheteurs / enchérisseurs qui ne paient pas leur achat gaspillent le temps et l'énergie des autres, dans ces cas nous ferons une déclaration de litige à eBay et laisserons une évaluation négative. Les prix sont TVA 19,6% incluse. </p>
<p> <strong> Expédition rapide et soignée </strong> par Distinguo/Colissimo dans les 48 heures suivant la réception du paiement (numéro de suivi disponible), assurance en option sur simple demande. Les frais de livraison indiqués sont pour la France métropolitaine. Nous livrons aussi les DOM/TOM. </td>
<td class="anglais">
<p> <strong> Any question? </strong> <br />
Please ask before bidding, we will do our best to answer asap. If you bid you accept our conditions. </p>
<p> <strong> Your satisfation guaranteed : </strong> <br />
All our brand products are genuine and 100% new. If the item is found not to be in the described condition, then the purchased item will be replaced or refunded if requested within 7 days. Please remember that all eBay sales are considered final. </p>
<p> <strong> Combined Shipping for Multiple Auctions </strong> <br />
If you win multiple auctions , you may qualify for a combined shipping discount. In order to qualify for a combined shipping discount, you must pay for all qualifying items at the same time.
<p> <strong> Payment : </strong> <br />
Paypal prefered, bank wire transfer (UE only) accepted. Payment must be received within 7 days or the item will be re-listed. We are a serious Auctioneer and we want serious bidders! Winning bidders that do not pay waste everyone's time and effort, therefore we will leave negative feedback to alert other Auctioneers of your actions. Prices include 19,6% VAT. </p>
<p> <strong> Shipping and handling </strong> <br />
All products will be shipped via priority mail / parcel with recipient's signature unless otherwise noted in the product description. No local pickup. </td>
</tr>
</table>
<p> <a href="#en-tete"> <img src="http://www.topnsport.com/pics/pictos/top.png" alt="retour haut de page" /> </a> </p>
</div>
<div id="pied">
<p> <img src="http://www..com/pics/sep_01.png" /> </p>
<p id="conclu"> merci blabla à modifier <p>
<p class="sign"> <a href="http://www..com/" target="_blank"><img src="http://www..com/pics/pictos/logo.png" alt="topnsport"> </a> </p>
<p id="ju" class="sign"> création graphique et développement <a href="http://www..com/" target="_blank"> </a>
- <a href="mailto:@gmail.com"> @gmail.com </a> </p>
</div>
</div>
<!-- fin de l'annonce -->
</body>
</html>
Le CSS :
@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------------------------------------- général*/
#annonce-
{
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#330099;
border:1px solid #330099;
width:800px;
display:block;
}
a img
{
border:none;
}
#annonce a
{
text-decoration:none;
color:#0033FF;
}
.francais a
{
text-decoration:none;
color:#330099;
}
.anglais a
{
text-decoration:none;
color:#993399;
}
.anglais
{
color:#993399;
}
/*--------------------------------------------------------------------------------------- bandeau haut*/
#en-tete
{
text-align:center;
color:#CC3300;
}
#bandeau
{
z-index:100;
}
#obl
{
text-align:center;
margin-top:-23px;
color:#EEEEEE;
}
#obl a
{
color:#EEEEEE;
}
/*--------------------------------------------------------------------------------------- annonce*/
#annonce
{
margin-left:200px;
padding-right:10px;
}
#objet
{
background-color:#CCCCCC;
}
#pictos
{
text-align:center;
}
#photo
{
text-align:center;
z-index:1000;
}
#photo span
{
display:none;
z-index:2000;
}
#photo:hover
{
border:0;
} /* bug IE6 */
#photo:hover span
{
display:block;
position:relative;
left:-200px;
z-index:100000;
overflow:visible;
}
#legende
{
font-size:9px;
text-align:center;
margin-top:-9px;
padding-bottom:25px;
}
h1
{
font-size:26px;
text-align:center;
font-weight:bold;
padding:10px;
}
#general
{
font-weight:bold;
font-size:9px;
text-align:center;
}
.offre, #shipping-costs
{
text-align:center;
}
/*--------------------------------------------------------------------------------------- menu*/
#menu
{
float:left;
margin-left:11px;
margin-top:5px;
text-align:center;
width:180px;
display:inline;
}
#services02 p
{
margin:2px;
padding:1px;
}
#services
{
border:1px solid #FF0000;
-moz-border-radius:12px;
-webkit-border-radius:12px;
}
#services02
{
font-size:12px;
font-weight:bold;
}
#menu-condition, #menu-guaranty, #menu-payment, #menu-shipping, #menu-terms-sale, #menu-deals
{
border:solid 1px #FF0000;
margin-bottom:2px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
margin-top:2px;
background-image:url(http://www.topnsport.com/pics/bg.png);
background-repeat:repeat;
}
#menu-deals
{
padding-top:3px;
padding-bottom:3px;
}
#services .anglais
{
margin-top:-8px;
padding:0px;
}
/*--------------------------------------------------------------------------------------- pied de page*/
#conclu
{
margin-top:-33px;
text-align:center;
color:#EEEEEE;
z-index:1100;
}
.sign
{
padding:12px;
}
#ju
{
margin-top:-35px;
text-align:right;
}
#ju a
{
text-decoration:none;
color:#FF3300;
}
Pas facile de résoudre les problèmes puisque je ne peux pas faire la mise en ligne moi-même.
Tout fonctionne dans la page seule, et insérée dans l'annonce ebay des bugs apparaissent:
- positionnement "float" pour le menu à gauche dans firefox
- positionnement "float" dans IE 7.0 au rafraichissement de la page (au début pas de souci)
- problème de centrage des éléments dans le tableau du haut.
Si quelqu'un peut m'aider...
Merci d'avance de vos réponses!
Modifié par jul073 (10 Jul 2010 - 11:00)