Bonsoir à tous,
Je pensais avoir finalisé ma mise en page... heuu en fait pas tout à fait
J'ai intégrer mon marqueur estat dans mon footer et là :
sur ff: pas de problème
sur ie: au chargement de la page, le footer s'allonge et quand le marqueur estat est chargé, le footer se repositionne au bon endroit.
Je ne vois pas trop pourquoi, si vous avez des pistes ?
Et je viens de remarqué que quand j'ouvre la pop up de l'image de la parure, j'ai encore 2 soucis sur ie:
- la pop up est en arrière plan du footer, ce qui coupe la fin de la pop up
- la page n'est plus assez longue, et la pop up dépasse du cadre de mon div#page
Voici ma page en ligne ici
Je vous remercie pour votre aide
voici mon xhtlm
et ma css
Modifié par pp51 (01 Nov 2006 - 18:41)
Je pensais avoir finalisé ma mise en page... heuu en fait pas tout à fait
J'ai intégrer mon marqueur estat dans mon footer et là :
sur ff: pas de problème
sur ie: au chargement de la page, le footer s'allonge et quand le marqueur estat est chargé, le footer se repositionne au bon endroit.
Je ne vois pas trop pourquoi, si vous avez des pistes ?
Et je viens de remarqué que quand j'ouvre la pop up de l'image de la parure, j'ai encore 2 soucis sur ie:
- la pop up est en arrière plan du footer, ce qui coupe la fin de la pop up
- la page n'est plus assez longue, et la pop up dépasse du cadre de mon div#page
Voici ma page en ligne ici
Je vous remercie pour votre aide
voici mon xhtlm
<body>
<div id="page">
<div id="header">
<h1 id="top"><a href="index.htm">Princesse d'un Jour - Bijoux mariage</a></h1>
<a title="Aller à l'accueil" href="index.htm"><img alt="Logo Princesse d'un Jour - Bijoux mariage" src="images/Logo.gif" id="logo" /></a>
<img src="images/h1.gif" width="305" height="63" alt="Bijoux mariage" id="titrehaut" />
<div id="langue">
<p>Langue :</p>
<ul>
<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="v2/index.htm">FR</a></li>
</ul>
</div>
</div>
<div id="haut">
<ul id="menuhaut">
<li><a id="menu1" title="Aller à l'accueil" href="index.htm">ACCUEIL</a></li>
<li><a id="active" 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">
<p class="titre-gauche">Le coin des mariées</p>
<p class="contenu-distributeur">Découvrez les photos des mariées qui ont choisi les bijoux <a href="les-mariess.htm">Princesse d'un Jour</a> ></p>
<p class="titre-gauche">Toutes nos couleurs</p>
<p class="contenu-presse">Service sur mesure<br /> Faconnez nos bijoux<br/> avec les <a href="presse.htm">couleurs de vos envies !</a> ></p>
<p class="titre-gauche">Bien choisir</p>
<p class="contenu-partenaires">Tous nos conseils<br /> pour bien choisir la parure adaptée à<br/> votre <a href="net-partenaires.htm">robe de mariée</a>></p>
</div>
<div id="centre">
<p id="breadcrumb">Vous êtes ici: <a href="index.htm">Accueil</a> > <a href="collections-page1.htm">Collection</a> > <a href="collections-page1.htm">Page 1</a> > <a href="colliers-camelia.htm">Parure Camélia</a></p>
<div id="parure">
<a href="zoom-parure-camelia.htm" id="a_parure"><img src="images/camelia-fp.jpg" width="180" height="225" alt="Bijoux mariage Camélia - Princesse d'un Jour" title="cliquer pour agrandir" /><span>Parure Camélia</span></a>
</div>
<p id="nav_modele"> Modèle <a href="colliers-estella.htm">Suivant</a> ></p>
<div id="descriptif">
<h2>Camélia</h2>
<h3><i>"Toute la finesse et la délicatesse de la fleur de Camélia"</i></h3>
<p><img src="images/puce-fp.gif" alt="" width="16" height="10" /><b> Composition</b><br/>Perles de rocaille à facettes et perles de verre nacrées<br/>Fermoirs et anneaux en argent massif 925</p>
<p><img src="images/puce-fp.gif" alt="" width="16" height="10" /><b> Parure composée de</b><br/>Collier - Bracelet - Pics à cheveux - Boucles d'oreilles</p>
<p><img src="images/puce-fp.gif" alt="" width="16" height="10" /><b> Coloris</b><br/>Crème (en photo) ou blanc<br/>Autres couleurs disponibles <a href="palette-couleurs.htm">sur mesure</a> >></p>
<p><img src="images/puce-fp.gif" alt="puce" width="16" height="10" /><b> Tarifs</b><br/>Contactez nos <a href="points-de-vente.htm">boutiques partenaires</a> >></p>
</div>
<div id="barre"></div>
<ul id="elements">
<li><a href="zoom-collier-camelia.htm" id="a_collier"><img src="images/camelia-fp-collier.jpg" width="90" height="90" alt="Bijoux mariage collier Camélia - Princesse d'un Jour" title="cliquer pour agrandir" /><span>Collier</span></a></li>
<li><a href="zoom-bracelet-camelia.htm" id="a_bracelet"><img src="images/camelia-fp-bracelet.jpg" width="90" height="90" alt="Bijoux mariage bracelet Camélia - Princesse d'un Jour" title="cliquer pour agrandir" /><span>Bracelet</span></a></li>
<li><a href="zoom-pics-camelia.htm" id="a_pics"><img src="images/camelia-fp-pic.jpg" width="90" height="90" alt="Bijoux mariage pics Camélia - Princesse d'un Jour" title="cliquer pour agrandir" /><span>Pics à cheveux</span></a></li>
</ul>
</div>
<div id="bas">
<div id="pied">
<p>Copyright © 2006 Princesse d'un Jour. Tous droits réservés. Princesse d'un Jour® est une marque déposée.</p>
<p>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>
<div id="marqueur">
<!-- eStat v3.2 -->
<script type="text/javascript">
<!--
var _UJS=0;
//-->
</script>
<script type="text/javascript" src="http://perso.estat.com/js/467067182934.js"></script>
<script type="text/javascript">
<!--
if(_UJS) _estat('467067182934','camelia','collections');
//-->
</script>
<noscript>
<div>
<a href="http://persos.estat.com"/><img src="http://perso.estat.com/m/00/467067182934?p=camelia&c=collections" alt="marqueur eStat'Perso" style="border:0px; color:#FFFFFF"/>
</div>
</noscript>
<!-- /eStat -->
</div>
</div>
</div>
</body>
</html>
et ma css
/*********************************
Général
*********************************/
*{
padding:0;
border:0;
margin:0;
}
body{
background:url(images/background2.gif) repeat-y center top;
font-family:Geneva, Arial, Tahoma, sans-serif;
font-size: 85%;
}
#page{
margin:10px auto;
width:743px;
background-color:#FFF;
border:1px solid #6C3089;
}
/*********************************
Header
*********************************/
#header{
position:relative;
height:67px;
}
h1#top {
position: absolute;
margin: 0px;
padding:0px;
text-indent: -5000px;
line-height: 1px;
font-size: 1px;
}
#logo {
padding-top:5px;
padding-left:5px;
}
#titrehaut {
margin-left:15px;
}
#langue{
position:absolute;
top:25px;
right:20px;
background-color:white;
}
#langue *{
float:left;
color:#666;
}
#langue h4{
margin-right: 3px;
font-size:0.8em;
font-weight:normal;
}
#langue p{
font-size:0.8em;
}
#langue ul{
list-style-type:none;
}
#langue li{
margin-right: 3px;
}
#langue a{
text-decoration:none;
font-size:0.8em;
}
#langue a:hover {
color:#6C3089;
text-decoration:underline;
}
#langue #english{
padding-right:3px;
border-right:1px solid #666;
}
#langue a:focus,#langue a:active{
text-decoration:underline;
color:#999;
}
/*********************************
Haut
*********************************/
#haut{
width:737px;
height:1.5em;
padding-left:6px;
margin-top:.3em;
line-height:1.5em;
background-color:#8E6784;
border-top:1px solid #6C3089;
border-bottom:1px solid #6C3089;
}
#menuhaut li{
float:left;
list-style-type:none;
background-color:#8E6784;
}
#menuhaut a{
display:block;
padding:0 8px;
color:#FFF;
font-size:0.7em;
letter-spacing:3px;
text-decoration:none;
text-align:center;
}
#menuhaut a#active{
background-color:white;
color:#6C3089;
}
/*********************************
Gauche
*********************************/
#gauche {
float:left;
clear:both;
width: 120px;
background-color:#E9E0E7;
margin-top:35px;
color:#666;
font-size:0.9em;
height:30em;
margin-left:5px;
padding-left:10px;
padding-right:10px;
}
#gauche a {
text-decoration:underline;
color:#666;
}
.titre-gauche {
padding-top:10px;
color:#6C3089;
font-weight:bold;
}
.contenu-distributeur {
margin-top:5px;
height:100px;
background:url(images/puce-gauche.gif) no-repeat center bottom;
padding-right:5px;
}
.contenu-presse {
margin-top:5px;
height:90px;
background:url(images/puce-gauche.gif) no-repeat center bottom;
}
.contenu-partenaires {
margin-top:5px;
height:80px;
}
/*********************************
Centre
*********************************/
#centre {
position:relative;
margin-left: 170px;
}
/*********************************
Fil d'Ariane
*********************************/
#breadcrumb{
margin-top:8px;
font-size:0.8em;
color:#666;
}
#breadcrumb a{
color:#666;
text-decoration:none;
}
#breadcrumb a:hover{
text-decoration:underline;
color:#6C3089;
}
#breadcrumb a:active,#breadcrumb a:focus{
text-decoration:underline;
color:#999;
}
#nav_modele {
position:absolute;
margin-left:400px;
margin-top:-5px;
font-size:0.8em;
color:#666;
}
#nav_modele a{
color:#6C3089;
text-decoration:none;
}
#nav_modele a:hover{
text-decoration:underline;
color:#6C3089;
}
#parure{
width:180px;
}
#a_parure{
margin-top:15px;
display:block;
text-decoration:none;
color:#666;
font-size:0.8em;
text-align:center;
}
#a_parure img {
display:block;
}
#barre {
margin-top:20px;
width:550px;
height:1em;
background-color: #FFFFFF;
border-bottom:1px solid #DDDDDD;
}
#descriptif {
position:absolute;
top:31px;
left:15em;
color:#666;
}
#descriptif a{
color:#666;
text-decoration:none;
}
#descriptif a:hover{
text-decoration:underline;
color:#6C3089;
}
h2{
color:#6C3089;
font-weight:bold;
font-size:1em;
}
h3{
padding-top:10px;
font-weight:normal;
font-size: 0.9em;
padding-bottom: 0px;
}
#descriptif p{
font-size:0.8em;
padding-top:10px;
}
/*********************************
Elements
*********************************/
#elements{
margin-top:25px;
list-style-type:none;
font-size:0.8em;
}
#elements li{
float:left;
text-align:center;
margin-right:30px;
}
#elements span{
display:block;
}
#elements a{
display:block;
text-decoration:none;
color:#666;
}
/*********************************
Pied
*********************************/
#global{
width:743px;
z-index:0;
}
#pied{
position:relative;
height:30px;
width:500px;
padding-bottom:5px;
margin-top: 16em;
color:#666;
font-size:0.7em;
padding-left:145px;
}
#pied p{
background-color:#FFF;
}
#pied a{
text-decoration:none;
color:#666;
}
#marqueur {
float:right;
width:100px;
margin-top:-20px;
text-align:right;
padding-right:2px;
bottom:0px;
}
/*********************************
Popups
*********************************/
#pop0,#pop1,#pop2 {
display:none;
position:absolute;
top:3.8em;
left:203px;
height:230px;
width:200px;
border:1px solid #6C3089;
background-color: white;
color:#666;
z-index:100;
}
#pop3{
display:none;
position:absolute;
top:2em;
left:203px;
height:454px;
width:300px;
border:1px solid #6C3089;
background-color: white;
color:#666;
z-index:100;
}
#pop0 h3,#pop1 h3,#pop2 h3,#pop3 h3{
padding-top:0;
text-align:center;
}
#pop0 p,#pop1 p,#pop2 p,#pop3 p{
background-color:#FFF;
text-align:center;
font-size:0.8em;
}
#pop0 img,#pop1 img,#pop2 img,#pop3 img{
display: block;
}
Modifié par pp51 (01 Nov 2006 - 18:41)
, me reste encccore à faire les pages pour les non JS ....