Bonjour,
J'essaye d'adapter le tuto ici: http://css.alsacreations.com/Tutoriels-JavaScript/Faire-apparaitre-des-popups-sans-nouvelle-fenetre
sur mon site... à l'adresse suivante: http://www.princessedunjour.com
Et j'ai bon nombre de problèmes
1/ quand on arrive sur la page, tout s'affiche y compris la popup et quand la page a terminé de se charger, la pop disparait
=> comment faire pour que la pop ne s'affiche pas lors du téléchargement de la page ?
2/ quand on clique sur le petit visuel du collier (celui le plus en bas de page), le pop s'affiche bien mais:
- je n'arrive pas à le positionner où je le souhaite
- je n'arrive pas à lui donner une taille précise (le lien "fermer la boite en cliquant dessus prend toute la largeur de la page, alors qu'il devrait faire 200px de long...)
- sur ff, le fait de cliquer sur le petit visuel du collier décale la page entière de qq pixels sur la gauche.
Voici mon XHTML
et ma CSS
Le .JS est exactement le même que celui du tuto...
Si vous avez des idées ?
Merci à tous
Modifié par pp51 (03 May 2007 - 14:00)
J'essaye d'adapter le tuto ici: http://css.alsacreations.com/Tutoriels-JavaScript/Faire-apparaitre-des-popups-sans-nouvelle-fenetre
sur mon site... à l'adresse suivante: http://www.princessedunjour.com
Et j'ai bon nombre de problèmes
1/ quand on arrive sur la page, tout s'affiche y compris la popup et quand la page a terminé de se charger, la pop disparait
=> comment faire pour que la pop ne s'affiche pas lors du téléchargement de la page ?
2/ quand on clique sur le petit visuel du collier (celui le plus en bas de page), le pop s'affiche bien mais:
- je n'arrive pas à le positionner où je le souhaite
- je n'arrive pas à lui donner une taille précise (le lien "fermer la boite en cliquant dessus prend toute la largeur de la page, alors qu'il devrait faire 200px de long...)
- sur ff, le fait de cliquer sur le petit visuel du collier décale la page entière de qq pixels sur la gauche.
Voici mon XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="fiche-produit.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<script type="text/javascript" src="popup.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="page">
<div id="header">
<a href="index.htm" id="Logo"> <img src="images/Logo.gif" alt="Logo Princesse d'un Jour" width="274" height="58" title="Aller à l'accueil"/></a>
<h1><img src="images/h1.gif" alt="Bijoux et accessoires pour le mariage"/></h1>
<p id="langue">Langue</p>
<ul id="menu_langue">
<li><a id="english" title="English version" href="http://www.english.princessedunjour.com">EN</a></li>
<li><a id="français" title="version française" href="index.htm">FR</a></li>
</ul>
</div>
<div id="haut">
<ul id="menuhaut">
<li><a id="menu1" title="Aller à l'accueil" href="index.htm">ACCUEIL</a></li>
<li><a id="menu2" title="Nos collections de bijoux pour le mariage" href="collections-page1.htm">COLLECTIONS</a></li>
<li><a id="menu3" title="Trouver un point de vente" href="points-de-vente.htm">POINTS DE VENTE</a></li>
<li><a id="menu4" title="Nos secrets de fabrication" href="atelier-de-creation.htm">ATELIER DE CREATION</a></li>
<li><a id="menu5" title="Tout savoir sur Princesse d'un Jour" href="a-propos.htm">A PROPOS</a></li>
<li><a id="menu6" title="Contacter la créatrice" href="contact.htm">CONTACT</a></li>
</ul>
</div>
<div id="gauche">
<ul id="menugauche">
<li><a id="menua" title="Découvrir toute la collection" href="collections-page1.htm">TOUTE LA COLLECTION</a></li>
<li><a id="menub" title="Les modèles en perles de rocaille" href="perles-de-rocaille.htm">PERLES DE ROCAILLE</a></li>
<li><a id="menuc" title="Les modèles en perles nacrées" href="perles-nacrees.htm">PERLES NACREES</a></li>
<li><a id="menud" title="Les modèles en cristal Swarovski" href="cristal-swarovski.htm">CRISTAL SWAROVSKI</a></li>
<li><a id="menue" title="Les modèles en fleurs de soie" href="fleurs-de-soie.htm">FLEURS DE SOIE</a></li>
<li><a id="menuf" title="Les modèles en guipure brodée" href="guipure-brodee.htm">GUIPURE BRODEE</a></li>
</ul>
</div>
<div id="centre">
<div id="zone_haut">
<p class="breadcrumb">Vous êtes ici: <a href="index.htm">Accueil</a> |<a id="coll" href="collections-page1.htm">Collection</a> |<a id="page1" href="collections-page1.htm">Page 1</a> |<a id="modele" href="parure-camelia.htm">Parure Camélia</a></p>
<div id="acces_pages">
<a href="parure-estella.htm">Modèle suivant</a> >
</div>
<div id="produit1"><a href="#"><img src="images/camelia-fp.jpg" alt="La Parure Camélia" width="180" height="225" /><span>Agrandir</span></a></div>
<div id="descriptif">
<h2>Camélia</h2>
<h3>"Toute la finesse et la délicatesse de la fleur de Camélia"</h3>
<p id="composition">- Composition: Perles de rocaille à facettes et perles de verre nacrées. Fermoirs et anneaux en argent massif 925</p>
<p id="coloris">- Coloris: crème</p>
<p id="autres_coloris">- Coloris également disponibles: blanc ou autres coloris sur mesure</p>
<p id="tarifs">- Tarifs: contactez nos boutiques partenaires>> </p>
<p id="compo">- Parure composée de: Collier | Bracelet | Pics à cheveux | Boucles d'oreilles</p>
</div>
<div id="element1"><a href="#pop1" class="pop"><img src="images/camelia-fp-collier2.jpg" alt="Collier Camélia" width="90" height="90" title="cliquer pour agrandir" /><span>Collier</span></a></div>
<div id="acces_pagesbas">
<a href="parure-estella.htm">Modèle suivant</a> >
</div>
</div>
</div>
<div id="pied">
<p id="mentions">Copyright © 2006 Princesse d'un Jour. Tous droits réservés. Princesse d'un Jour® est une marque déposée.</p>
<p id="partenaires">Sites partenaires : <a href="http://www.noces-provencales.com">Organisation de mariage en provence</a> avec Noces-Provencales.com | <a href="http://www.notremariage.net/decouvrir.htm">NotreMariage.net</a></p>
</div>
<!-- Les boîtes popup sont placées tout en bas du document -->
</div>
<div id="pop1">
<img src="images/camelia-fp.jpg" alt="La Parure Camélia" width="180" height="225" />
<div class="fermer">fermer la boite en cliquant dessus</div>
</div>
</body>
</html>
et ma CSS
*{margin:0;padding:0;}
body{background:url(images/background2.gif) repeat-y center top;font:11px/16px Geneva, Arial, Tahoma, sans-serif;margin:0;padding:0;}
img{border-style:none;border-width:0;}
#page{text-align:left;width:743px;background-color:#FFF;border:1px solid #6C3089;margin:5px auto;}
#header{height:67px;}
h1{display:inline;margin-left:15px;}
p#langue{position:absolute;display:inline;color:#666;padding-top:28px;padding-left:40px;}
#menu_langue{position:absolute;display:inline;list-style-type:none;width:40px;padding-top:30px;padding-left:80px;}
#menu_langue li{float:left;}
#menu_langue a{float:left;text-align:center;line-height:12px;color:#666;text-decoration:none;}
#menu_langue a:hover{color:#6C3089;text-decoration:underline;}
#english{width:20px;border-right:1px solid #666;}
#français{padding-left:3px;width:15px;}
#menu_langue a:focus,#menu_langue a:active{text-decoration:underline;color:#999;}
#haut{float:left;width:743px;border-top:1px solid #6C3089;border-bottom:1px solid #6C3089;margin:2px 0 0;}
ul#menuhaut{clear:both;width:100%;letter-spacing:3px;list-style-type:none;font-size:9px;text-align:center;}
#menuhaut li{float:left;}
#menuhaut a{display:block;color:#FFF;text-decoration:none;text-align:center;line-height:20px;}
#menu1{width:90px;background-color:#8E6784;color:#000;}
a#menu2{color:#6C3089;}
#menu2{width:122px;background:#FFF;}
#menu3{width:160px;background:#8E6784;}
#menu4{width:190px;background:#8E6784;}
#menu5{width:90px;background:#8E6784;}
#menu6{width:91px;background:#8E6784;}
#gauche{float:left;width:150px;list-style-type:none;text-decoration:none;line-height:35px;padding-left:5px;margin-top:25px;color:#6C3089;}
#menugauche a{text-decoration:none;color:#666;}
ul#menugauche{list-style-type:none; letter-spacing: 0.5px;font-size:10px;}
li#menugauche{float:left; margin-left:10px;padding-left:0px;}
a#menua{color:#6C3089;font-weight:900;}
#centre{float:left;height:400px;padding-top:5px;width:588px;color:#666;}
#zone_haut{position:relative;}
p.breadcrumb{position:relative;top:5px;font-size:11px;color:#666;width:150px;display:inline;}
p.breadcrumb a{color:#666;text-decoration:none;}
p.breadcrumb a:hover{text-decoration:underline;color:#6C3089;}
a#coll{padding-left: 3px;}
a#page1{padding-left: 3px;}
a#modele{padding-left: 3px;}
a#produit:hover{text-decoration:none;color:#666;}
#acces_pages{position:absolute;top:10px;right:35px;line-height:20px;}
#pages{list-style-type:none;width:100%;line-height:20px;}
#pages li{float:right;}
#pages a{float:left;text-align:center;line-height:12px;width:10px;color:#666;text-decoration:none;}
#pages a:hover{text-decoration:underline; color:#6C3089;}
a.lastpage{letter-spacing:-1px;padding-left:3px;}
#pages a.selected{font-weight:700;color:#6C3089;text-decoration:none;}
#pages a.selected:hover{text-decoration:none;}
a.firstpage{letter-spacing:-1px;padding-right:4px;}
#pages a:focus,#pages a:active,p.breadcrumb a:focus,p.breadcrumb a:active{text-decoration:underline;color:#999;}
#produit1{position:relative;display:block;top:15px;width:120px;text-decoration:none;}
#element1{position:absolute; top:290px;left:0px;}
#element2{position:absolute; top:290px;left:150px;}
#element3{position:absolute; top:290px;left:300px;}
#element4{position:absolute; top:290px;left:450px;}
#element5{position:absolute; top:290px;left:600px;}
#descriptif{position:absolute;top:31px;left:200px;}
h2{color:#6C3089;font-weight:bold; font-size: 14px;}
h3{padding-top:10px;font-weight:bold; font-size: 13px;}
p#composition{padding-top:10px;}
p#coloris{padding-top:5px;}
p#autres_coloris{padding-top:5px;}
p#tarifs{padding-top:5px;}
p#compo{padding-top:5px;}
#produit1 a,#element1 a,#element2 a,#element3 a,#element4 a,#element5 a{text-decoration:none;color:#666;display:table-cell;text-align:center;display:inline-block;}
#produit1 img,#element1 img,#element2 img,#element3 img,#element4 img, #element5 img{display:block;border-style:none;border-width:0;}
#acces_pagesbas{position:absolute;top:400px;right:35px;line-height:20px;}
#pagesbas{list-style-type:none;width:100%;line-height:20px;}
#pagesbas li{float:right;}
#pagesbas a{float:left;text-align:center;line-height:12px;width:10px;color:#666;text-decoration:none;}
#pagesbas a:hover{text-decoration:underline; color:#6C3089;}
#pagesbas a.selected{font-weight:700;color:#6C3089;text-decoration:none;}
#pagesbas a.selected:hover{text-decoration:none;}
#pied{clear:both;height:30px;text-align:center;padding-bottom:5px;}
#pied a{text-decoration:none;color:#666;}
partenaires a{color:#666;}
p#mentions,p#partenaires{color:#666;font-size:9px;}
#pop {
display: none;
position: absolute;
width: 300px;
background: #f5f5dc;
z-index: 500;
cursor: pointer;
font-size: 80%;
}
.fermer {
margin: 0.5em 0 0 0;
border-top: 1px solid black;
color: black;
text-align: center;
}
Le .JS est exactement le même que celui du tuto...
Si vous avez des idées ?
Merci à tous
Modifié par pp51 (03 May 2007 - 14:00)
je te laisse découvrir ça ...
