28173 sujets

CSS et mise en forme, CSS3

Cherche solution pour compatibilité pour mozilla et IE[Résolu]

Bonjour à tous,

Je vais essayer d'exposer le plus clairement possible mon soucis :

Je construis actuellement un site marchand et j'utilise un logiciel qui s'intègre à ma page avec un script. Vous connaissez peut être c'est izishopping. ce détail est important pour que vous compreniez la construction de ma page: une partie est donc externe.
Le plus simple est de voir les exemples:


J'ai testé deux pages différentes pour intégrer cette partie externe:

1RE ESSAI :
une page avec un calque centrale qui donne ceci :
http://www.corinne-quirici-photographe.com/boutique-produits.html

Le problème de cette page: j'ai beaucoup de vide en bas avant le pied de page car je suis obligée de prendre en compte la page la plus longue de ma partie externe sinon le pied de page passe dessus: il ne s'adapte pas à la taille du contenu.
Voici le code:
 
<!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='Page-Exit' content='progid:DXImageTransform.Microsoft.GradientWipe(Duration=1)'>

<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design-produits.css" />


<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenuderoulant'+i)) {document.getElementById('smenuderoulant'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}
MM_reloadPage(true);
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}



function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;iA++) x.src=x.oSrc;

}

//-->

</script>

<style type="text/css"> 


	

.calque_principal {
	position:absolute;
	left:50%;
	margin-left:-390px;
	top: 0;
 }


</style>

</head>



 <body>
<div id="header"> </div>

<div id="menuderoulant"> 
      <dl>
    <dt onmouseover="javascript:montre();"><a href="index.html" title="Retour à l'accueil">Accueil</a></dt>
    <font color="#d5f400"></font> <font color="#FFFFFF"></font> 
  </dl>
  <dl>
    <dt onmouseover="javascript:montre();"><a href="portfolio.html" title="Galerie photos">Portfolio</a></dt>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenuderoulant1');">Prestations photos</dt>
    <dd id="smenuderoulant1" onmouseover="javascript:montre('smenuderoulant1');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="portrait.html">Portrait</a></li>
        <li><a href="book.html">Book</a></li>
        <li><a href="mariage.html">Mariage</a></li>
        <li><a href="evenement-famillial.html">Evènement famillial</a></li>
        <li><a href="retauration-photo.html">Restauration & retouche photos</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenuderoulant2');">Professionnels</dt>
    <dd id="smenuderoulant2" onmouseover="javascript:montre('smenuderoulant2');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="entreprise-reportage.html">Reportage</a></li>
		<li><a href="illustration.html">Illustration</a></li>
		<li><a href="entreprise-reportage.html">Reproduction</a></li>
        <li><a href="entreprise-creation-pub.html">Création publicitaire/ pack shot</a></li>
        <li><a href="entreprise-catalogue.html">Catalogue impression</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenuderoulant3');">En ligne</dt>
    <dd id="smenuderoulant3" onmouseover="javascript:montre('smenuderoulant3');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="http://zooming.fr">Visionnez un reportage et achetez vos 
          photos</a></li>
        <li><a href="#">Tirage de vos photos</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenuderoulant4');">La boutique</dt>
    <dd id="smenuderoulant4" onmouseover="javascript:montre('smenuderoulant4');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="boutique.html">Albums photos</a></li>
        <li><a href="boutique.html">Cadres photos</a></li>
        <li><a href="boutique.html">Scrapbooking</a></li>
      </ul>
    </dd>
  </dl>
</div>

 
 
<div id="logo" style="position:absolute; left:50%; top:-8px; width:700; height:300px; z-index:1;"> 
  <p><img src="../test/images/LOGO.jpg" width="782" height="68" /></p>
    </div>
  
<div id="pied">
            
  <p align="center"> <a href="#" onclick="window.open('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no');">A 
    propos de Zooming</a>| <a href="#" onclick="window.open('cgv.html', '_blank', 'width=720,height=520,left=200,top=150,overflow: auto;');">Conditions 
    générales de vente</a>| <a href="#" onclick="window.open('http://www.webmasteroo.com/livre/?login=7010', '_blank', 'width=720,height=520,left=200,top=150,overflow: auto;');">Témoignages</a> 
    | <a href="#" onclick="window.open('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no');">Actualités</a>| 
    <a href="#" onclick="window.open('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no');">Nous 
    contacter</a> | 
  <p>
         
		<br>  <font size="1" face="Verdana, Arial, Helvetica, sans-serif">Design Copyright 
          Quirici &amp; Rostang Tous droits r&eacute;serv&eacute;s</font></p>
      </div>
  
</div>

<div class="calque_principal">
 
   
   
  <div id="centre" style="position:absolute; left:-33px; top:133px; width:800px; height:800px;"> 
    <div id="navigation" style="position:absolute; width:140px; height:680px; z-index:1; left: 31px; top: 22px;"> 
      <img src="images/telephone.gif"> 
      <div id="menu"> 
    <div class="element_menu"> 
      <h3><strong>ALBUMS PHOTOS</font></strong></h3>
      <ul>
        <li>
              <div align="left"><font color="#666666"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7841&npage=index.asp">FANTAISIE</a></font> 
              </div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7925&npage=index.asp">CLASSIQUE 
                </a></div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7926&npage=index.asp">NATURE 
                </a></div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7843&npage=index.asp">MARIAGE 
                </a></div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7842&npage=index.asp">ENFANT</a></div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7927&npage=index.asp">SCRAPBOOKING 
                </a></div>
        </li>
      </ul>
    </div>
    <div class="element_menu"> 
      <h3><strong>CADRES PHOTOS</strong></h3>
      <ul>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7844&npage=index.asp"> 
                CADRES PHOTOS </a></div>
        </li>
              <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=820681337&num_categorie=7845&npage=index.asp">CADRES SUR 
                MESURE </a></div>
        </li>
      </ul>
    </div>
	<div class="services"> 
      
          <ul>
            <li> 
              <div></div>
            </li>
          </ul>
    </div>
        <table width="140" border="0" cellpadding="1" cellspacing="0" bordercolor="#99CC33" style="background-image: ; border: 1px solid #99CC33;">
          <tbody>
        <tr> 
          <td width="123" height="3"></td>
        </tr>
        <tr> 
          <td valign="top" align="center" style="color: #FFFFFF; font-weight: bold; font-size: 10px;"><font color="#666666">Paiement 
            S&eacute;curis&eacute;</font></td>
        </tr>
        <tr> 
          <td height="3"></td>
        </tr>
        <tr> 
           <td valign="top" align="center" class="cat"><p><a href="/php/main_new_api.php?EXEC=3&ID_SESSION=GZWU2756&ID_CATEGORY=26" title="Paiement S&eacute;curis&eacute;"><img src="../STUDIO%20PHOTO%20ZOOMING/images/cartes_cred.gif" border="0" alt="Paiement S&eacute;curis&eacute;" width="52" height="38" style="padding: 2px; background-color: ; border: 0px solid #c2cf65;" /></a></p></td>
        </tr>
        <tr> 
          <td height="2"></td>
        </tr>
      </tbody>
    </table>
	
  </div>
	</div>
    <div id="contenu" style="position:absolute; width:625px; height:100%; z-index:2; left: 185px; top: -15px;"> 
      <img src="images/TRANSPARENT.gif" width="28" height="72"> 
      <script>
var LargeurBoutique="100%";
var HauteurBoutique="100%";
var IziShoppingParam="num_boutique=2452&num_langue=14755";
</script>
<script src="http://www.izishopping.com/boutiquev2/module_client.js" language="JavaScript" type="text/javascript"></script>
<a href="http://www.izishopping.com/boutiquev2/index.asp?num_boutique=2452&num_langue=14755">
<img src="http://www.izishopping.com/boutiquev2/images/vide.gif" width="5" height="5" border="0">
</a>

      <p>&nbsp;</p>
  </div>
</div>
  
  
</div>


</body>
</html>


le css identique aux deux versions:

/* CSS Document */



body

{ 


   width: 900px;

   margin: auto; /* Pour centrer notre page */

   margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */

   margin-bottom: 20px;    /* Idem pour le bas du navigateur */

   font-family: verdana,arial, helvetica, sans-serif;

   overflow : auto; /* hidden evite une barre horizontale */
   
    font-family: Verdana;
	
  color: #666666; /* gris  */
  
  font-size: 11px;
  
  background : url(images/FOND.jpg);
 } 
  
 
 
	
 /* menu deroulant */



body {



}

dl, dt, dd, ul, li {



margin: 0;

padding: 0;

list-style-type: none;

}

#menuderoulant {
	position:absolute;
	z-index:100;
	width: 813px;
	font-family: verdana,arial,helvetica,sans-sherif;
	margin-bottom: 1px;
	margin-left: -400px;
	left: 50%;
	top: 70px;
	height: 115px;
	

}

#menuderoulant dl {

float: left;

width: 12em; /* grandeur de la case menu */



}

#menuderoulant dt {

cursor: pointer; 

text-align: center; /* texte centré */

font-weight: bold; /* police en gras */

background: #212a2a; /* couleur menu */

border: 1px solid gray;  /* contour des menus */

margin: 1px; /* marge entre les menus */
 
color: white;  /* couleur des menus */



}

#menuderoulant dd {

display: none;

border: 1px solid gray;  /* contour des sous menus */


}

#menuderoulant li {

text-align: center;

background:  #2e3735;  /* gris foncé */

font-weight: bold; /* bold = police en gras */

color: white; 


}

#menuderoulant li a, #menuderoulant dt a {



text-decoration: none;

display: block;

height: 100%;

border: 0 none;

color: white; /* couleur des liens */

}

#menuderoulant li a:hover, #menuderoulant dt a:hover {

background: #d5f400; /* vert */

color: black;


}

/* fin menu deroulant */

/* Le menu */

#menu
{

   float: left;
   width: 140px;
   font-family:  verdana,  helvetica, sans-serif;

   font-size:3;
       color : black;
   
   
}

.element_menu
{
   background-color: #ffffff;
    
   border: 1px solid #d5f400; /* vert */
   
   margin-bottom: 10px;
   
   padding: 3px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}


/* Quelques effets sur les menus */


.element_menu h3
{   
   color: #4586df; /*bleu */
   background-color: ;
   font-family: VERDANA, Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image:  url(images/arrow.gif);
   padding: 1px;
   padding-left: 20px;
   margin: 1px;
   margin-bottom: 5px;
   
}

.element_menu a
{
   color: #666666;
}

.element_menu a:hover
{
   background-color:#d5f400; /*vert*/
   color: #4586df; /*bleu */
   display: block;
   
}

   

a:active /* Quand le visiteur clique sur le lien */
{
   background-color: #4586df; /*bleu */
   
}
a:hover /* Quand le visiteur pointe sur le lien */
{
   
    color: #4586df; /*bleu */
    text-decoration: none;
	background-color: #d5f400; /*vert */
}
a /* liens  */
{
color:#4586df; /*bleu */
background-color:transparent;
text-decoration:none; /*surligné=underline*/
}



.conteneur { 

margin-top: -130px;
margin-left: -420px; /* DEPLACE VERS LA GAUCHE */
position:absolute;
left: 50%; 
top: 50%;
width: 900px;
height: 100%;
text-align : left;}



.droite {float : left ; width : 620px ; height :100%; ; margin-left : 30px; margin-top:100px; }
.gauche {float : left;}


p {margin : 0 ; padding : 0 50px 0 0; font-family:verdana, sans-serif;
font-size:4;}
h1 {margin : 0 0 5px 0  ; padding : 0; font-size : 19px}
h2 {margin : 10px 0 5px 0 ; padding : 0; font-size : 19px}

.expo {float : right; margin-right : 40px; border: 0}
.expo2 {float : right; margin-right : 0; border: 0}

div.hr {float : left;
  height: 5px;
  background: ;
  margin : 5px 0 15px 0  ;
  padding : 0;   
  width : 530px; 
}



HTML, BODY {
  margin: 0px;
  padding: 0px;
  border: none;
  width: 100%;
  height: 100%;
  
}


#header
{
width: 100%;
height: 90px;
background-color: #4d4d4d;
background:  url(images/a1.gif) repeat-x;
color: #ffffff;
}
	

	

#logo
{
	position:absolute;
	margin-left: -420px;
	left: 50%;
	top: 65px;
	height: 136px;
	
}	


#pied
{
	 position:fixed;
	 width:100%;
	 height:43px; 
	 background:  url(images/a2.gif) repeat-x;
	 text-align: center;
	 bottom: 0px;

}



2eme ESSAI:

la partie est intégrée dans un div appellé conteneur qui fonctionne qu'avec du css.C'est plus propre mais voilà là je me retrouve avec des liens qui ne fonctionnent pas par interférence avec mon menu. Ce problème n'est que sur mozilla sur IE ça fonctionne parfaitement.Mais vu que ce sont les deux navigateurs les plus utilisés faudrait que ça fonctionne sur les deux tant qu'à faire Smiley langue Essayer de cliquer sur produits ou panier en haut Smiley decu ça marche pas sur moziila. Pour que ça fonctionne il faudrait descendre le contenu vachement bas et c'est très laid ! Exclure tous les clients potentiels utilisant mozilla ne me parait pas une bonne idée!

Voici donc ce que ça donne:
http://www.corinne-quirici-photographe.com/test.html

voici le code:le css est identique (voir au dessus)

<!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='Page-Exit' content='progid:DXImageTransform.Microsoft.GradientWipe(Duration=1)'>

<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design-produits.css" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenuderoulant'+i)) {document.getElementById('smenuderoulant'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}
MM_reloadPage(true);
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}



function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;iA++) x.src=x.oSrc;

}

//-->

</script>


</head>



 <body>
<!-- barre grise -->
<div id="header"> </div>

<div id="menuderoulant"> 
  <dl>
    <dt onmouseover="javascript:montre();"><a href="index.html" title="Retour à l'accueil">Accueil</a></dt>
    <font color="#d5f400"></font> <font color="#FFFFFF"></font> 
  </dl>
  <dl>
    <dt onmouseover="javascript:montre();"><a href="portfolio.html" title="Galerie photos">Portfolio</a></dt>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenuderoulant1');">Prestations photos</dt>
    <dd id="smenuderoulant1" onmouseover="javascript:montre('smenuderoulant1');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="portrait.html">Portrait</a></li>
        <li><a href="book.html">Book</a></li>
        <li><a href="mariage.html">Mariage</a></li>
        <li><a href="evenement-famillial.html">Evènement famillial</a></li>
        <li><a href="retauration-photo.html">Restauration & retouche photos</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenuderoulant2');">Professionnels</dt>
    <dd id="smenuderoulant2" onmouseover="javascript:montre('smenuderoulant2');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="entreprise-reportage.html">Reportage</a></li>
        <li><a href="entreprise-reportage.html">Illustration</a></li>
        <li><a href="entreprise-reportage.html">Reproduction</a></li>
        <li><a href="entreprise-creation-pub.html">Publicité/Pack shot</a></li>
        <li><a href="entreprise-catalogue.html">Catalogue impression</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenuderoulant3');">En ligne</dt>
    <dd id="smenuderoulant3" onmouseover="javascript:montre('smenuderoulant3');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="http://zooming.fr">Visionnez un reportage et achetez vos 
          photos</a></li>
        <li><a href="#" class="class2" onclick="window.open('tirage.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no');">Tirage 
          de vos photos</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenuderoulant4');">La boutique</dt>
    <dd id="smenuderoulant4" onmouseover="javascript:montre('smenuderoulant4');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="boutique.html">Albums photos</a></li>
        <li><a href="boutique.html">Cadres photos</a></li>
        <li><a href="boutique.html">Scrapbooking</a></li>
      </ul>
    </dd>
  </dl>
</div>

 
 
 
<div id="logo" style="position:absolute; left:50%; top:0px; width:700; height:300px; z-index:1;"> 
  <p><img src="images/LOGO.jpg" width="879" height="89" /></p>
    </div>  


  <div class="conteneur"> 
  
  <div class="gauche">
  
  <div id="menu"> 
  <div class="element_menu"> 
   <img src="images/telephone.gif"> 
    </div>
    <div class="element_menu"> 
      <h3><strong>ALBUMS PHOTOS</font></strong></h3>
      <ul>
        <li>
              <div align="left"><font color="#666666"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7841&npage=index.asp">FANTAISIE</a></font> 
              </div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7925&npage=index.asp">CLASSIQUE 
                </a></div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7926&npage=index.asp">NATURE 
                </a></div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7843&npage=index.asp">MARIAGE 
                </a></div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7842&npage=index.asp">ENFANT</a></div>
        </li>
        <li>
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7927&npage=index.asp">SCRAPBOOKING 
                </a></div>
        </li>
      </ul>
    </div>
    <div class="element_menu"> 
      <h3><strong>CADRES PHOTOS</strong></h3>    <ul>
            <li> 
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=987240131&num_categorie=7844&npage=index.asp">CADRES 
                PHOTOS</a></div>
            </li>
            <li> 
              <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=820681337&num_categorie=7845&npage=index.asp">CADRES 
                SUR MESURE </a></div>
            </li>
          </ul>
		    </div>
			<div class="element_menu"> 
        <li> <div align="left"><a href="http://www.corinne-quirici-photographe.com/boutique-produits.html?num_boutique=2452&num_langue=14755&sessionid=820681337&num_categorie=7845&npage=index.asp">CADRES 
                 </a></div>
        </li>
    </div>
		  <table width="140" border="0" cellpadding="1" cellspacing="0" bordercolor="#99CC33" style="background-image: ; border: 1px solid #d5f400;">
          <tbody>
            <tr> 
              <td width="123" height="213" align="center" valign="top" class="cat"> 
                <div align="center"> 
                  <div align="center"> 
                    <table width="130" border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr> 
                          <td width="50" height="18" align="center" valign="top"> 
                          </td>
                          <td width="80" valign="middle"><a href="#" onclick="window.open ('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no'); return(false)" title="Livraison" class="plusdedetail"></a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div align="center"></div>
                </div>
                <div align="center"> 
                  <table width="130" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr> 
                        <td width="50" height="37" align="center" valign="top"> 
                          <a href="#" onclick="window.open ('/php/main_new_api.php?EXEC=3&ID_SESSION=GZWU2756&ID_CATEGORY=1007&POPUP=YES','popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=540,height=250'); return(false)" title="Foire Aux Questions" class="plusdedetail"><img src="/STUDIO%20PHOTO%20ZOOMING/images/infos.gif" border="0" alt="Foire Aux Questions" width="32" height="32" /></a></td>
                        <td width="80" valign="middle"><a href="#" onclick="window.open ('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no'); return(false)" title="Livraison" class="plusdedetail"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Commander</font></a> 
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div align="center"><img src="http://www.r7g.com/6496/m/ligne_separ.gif" alt="" border="0" width="90" height="16" /></div>
                <div align="center"> </div>
                <div align="center"></div>
                <div align="center"> 
                  <table width="130" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr> 
                        <td width="50" height="30" align="center" valign="top"> 
                          <a href="#" onclick="window.open ('/php/main_new_api.php?EXEC=3&ID_SESSION=GZWU2756&ID_CATEGORY=1007&POPUP=YES','popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=540,height=320'); return(false)" title="Livraison" class="plusdedetail"><img src="/STUDIO%20PHOTO%20ZOOMING/images/6496_1006_1158151194.gif" border="0" alt="Livraison" width="35" height="30" /></a></td>
                        <td width="80" valign="middle"><a href="#" onclick="window.open ('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no'); return(false)" title="Livraison" class="plusdedetail"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Livraison</font></a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div align="center"><img src="http://www.r7g.com/6496/m/ligne_separ.gif" alt="" border="0" width="90" height="16" /></div>
                <!-- IMPRESSION -->
                <table width="130" border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr> 
                      <td width="54" height="40" align="center" valign="top"> 
                        <a href="#" onclick="window.open ('/php/main_new_api.php?EXEC=3&ID_SESSION=GZWU2756&ID_CATEGORY=1007&POPUP=YES','popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=540,height=320'); return(false)" title="Livraison" class="plusdedetail"><img src="/STUDIO%20PHOTO%20ZOOMING/images/cartes_cred.gif" border="0" alt="Livraison" width="47" height="40" /></a></td>
                      <td width="76" valign="middle"><a href="#" onclick="window.open ('/php/main_new_api.php?EXEC=3&ID_SESSION=GZWU2756&ID_CATEGORY=1006&POPUP=YES','popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=540,height=250'); return(false)" title="Livraison" class="plusdedetail"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Paiement 
                        s&eacute;curis&eacute; </font></a></td>
                    </tr>
                  </tbody>
                </table>
                <div align="center"> </div>
                <div align="center"></div>
                <div align="center"> 
                  <div style="padding-top: 5px;"></div>
                </div></td>
            </tr>
          </tbody>
        </table>
    </div>
	
  </div>
  <div class="droite"> 
  
    <div id="contenu" style="position:absolute; width:625px; height:100%;  left: 185px; top: -15px;"> 
      <img src="images/TRANSPARENT.gif" width="28" height="72"> 
      <script>
var LargeurBoutique="100%";
var HauteurBoutique="100%";
var IziShoppingParam="num_boutique=2452&num_langue=14755";
</script>
<script src="http://www.izishopping.com/boutiquev2/module_client.js" language="JavaScript" type="text/javascript"></script>
<a href="http://www.izishopping.com/boutiquev2/index.asp?num_boutique=2452&num_langue=14755">
<img src="http://www.izishopping.com/boutiquev2/images/vide.gif" width="5" height="5" border="0">
</a>

      <p>&nbsp;</p>
  </div>
  </div>
 
</div>


  
    <div id="pied">
            
  <p align="center"> <a href="#" onclick="window.open('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no');">A 
    propos de Zooming</a>| <a href="#" onclick="window.open('cgv.html', '_blank', 'width=720,height=520,left=200,top=150,overflow: auto;');">Conditions 
    générales de vente</a>| <a href="#" onclick="window.open('http://www.webmasteroo.com/livre/?login=7010', '_blank', 'width=720,height=520,left=200,top=150,overflow: auto;');">Témoignages</a> 
    | <a href="#" onclick="window.open('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no');">Actualités</a>| 
    <a href="#" onclick="window.open('photo1.html', '_blank', 'width=500,height=500,left=200,top=150,scrollbars=no');">Nous 
    contacter</a> | 
  <p>
         
		<br>  <font size="1" face="Verdana, Arial, Helvetica, sans-serif">Design Copyright 
          Quirici &amp; Rostang Tous droits r&eacute;serv&eacute;s</font></p>
      </div>
  

</body>
</html>


Moi je préfère la deuxième version c'est plus propre avec ce pied de page fixe et pas tout le vide mais ça m'ennuie beaucoup que les liens fonctionne pas sur mozilla alors qu'avec ma première version ça fonctionne mais c'est le problème du pied de page qui me gêne (pour pas dire d'autres mots plus vulgaires mais plus proche de mes sentiments Smiley fache )

J'espère que c'est assez clair. Peut être que la solution est très simple mais là je me suis mélangé les pinceaux depuis plusieurs jours et j'ai besoin d'aide ! Smiley ohwell

N'hésitez pas à me dire si y'a des boulettes dans le code je suis la pro des bouts de codes qui servent à rien! Sur le CSS c'est pas pareil je m'en sert pour d'autres pages du site ce qui explique des # ou . inexistants sur ces deux pages.

Merci d'avance pour votre aide!
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par zooming (02 Jan 2007 - 15:15)
Bonjour,

C'est ton bloc #logo qui passe sur tes liens les rendant donc non cliquables...
d'ailleurs ce bloc est stylé 2 fois je crois, une fois dans la feuille de style et une autre dans le code ?? Regarde par là peut être ?
Merci Ghost !

Chapeau bas! c'était bien ça ! Smiley biggrin

En fait j'avais mis une hauteur de 300 px ce qui est énorme et du coup ça envahissait tout le haut de ma page. Je viens de lui redonner une hauteur plus petite qui correspnd à la taille du logo et là ça fonctionne parfaitement!

Je suis très contente, je vais pouvoir avancer. Merci beaucoup ! C'est bien une erreur d'étourdie ça! tout moi Smiley langue
Re,

Oui, c'est un peu le souk ton code Smiley smile
Tu te compliques bien la vie avec tous ces positionnements en absolute !!
Mais tant que ça marche ...
Administrateur
Hello,

Puisqu'il s'agit bel et bien d'un problème de mise en page (CSS) et non de HTML ni de sémantique, je déplace le sujet dans le salon "Mise en page" Smiley cligne
Sujet clos
Aller à