Bonjour à tous =)

C'est la première fois que je poste ici, vous m'avez l'air d'être un forum très sympa et accueillant, j'ai souvent été déçue par la froideur de certains ailleurs, en espérant que ce ne soit pas le cas ici =)

Je suis vraiment débutante, alors je m'excuse par avance.
Voici mon problème, je travaille avec le système des div, et j'ai beaucoup de mal à les positionner.
En fait, c'est juste la partie du haut qui bug, comme vous pourrez le voir sur les images, le centre et le bas vont très bien =)

Je vous ai fait un petit schéma pour vous montrer ce à quoi je voudrais que ça ressemble au final :
http://www.kinouche.com/schema.jpg

Et une capture d'écran de ce à quoi cela ressemble actuellement ( je travaille mon site en local )
http://www.kinouche.com/capture_pb_haut.jpg

Et voici respectivement, une partie de ma css et ma page accueil.htm qui ne sont pas très ordonnés, mais je fais ce que je peux avec mes maigres connaissances :

body
{
    background-color:#000000;
        font-size: 12px;
        color: #FFFFFF;
        font-family: arial; 
        text-indent: 15px;
        list-style-type: circle;
        margin: 0 ; 
        padding: 0 ; 
}

#i
{
      color: #3d3a3a;
}

#hautgauche 
{
        height:150px;
        width:150px;
        float: left;
        left:5px; 
        width: 48%; 
        height: 48%; 
}

#hautdroit
{
        height:150px;
        width:150px;
        float: right;
        left:145px; 
        width: 48%; 
        height: 48%; 
}

#boutontouthaut 
{
        margin-top: 10px;
        text-align: center;
}

#haut 
{
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
}



#conteneur
{
        width:1026px;
        margin: 0 auto ;
        padding: 10px 0px;
        text-align: center;
}

#boutonhaut 
{
        margin-top: 20px;
        text-align: center;
}

#boutonhaut a {
        margin: 0px 5px;
}

#boutonhaut a img{
        border: none;
}

#gauche {
        height:297px;
        width:221px;
        margin-top: 10px;
        margin-left:0px;
        background-image:url(gauche.jpg);
        float: left;
}

#droit {
        height:300px;
        width:222px;
        margin-top: 10px;
        background-image:url(droite.jpg);
        float: right;
}
#centre {

        height: 295px;
        width: 577px;
        margin-top: 10px;
        overflow: auto;
        background-image:url(contenu.jpg);
}

#boutonbas {
        height: 71px;
        margin-top: 10px;
        text-align: center;
}

#boutonbas a {
        margin: 0px 5px;
}

#boutonbas a img{
        border: none;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<html>
            <head>
            <title>Kinouche * Accueil</title>
      <META NAME="description" CONTENT="Marque déposée de bijoux fantaisies en édition limitée">
      <META NAME="keywords" CONTENT="bijoux,perles,edition limitée,pierres,fait main,boutique,fr,magasin,kinouche,fantaisies,achat bijoux,bijou,swarovski,bague,bracelet,collier,bijou de sac,boucles d'oreilles,kinouche.com,estelle comtet,verre,resine,ceramique,metal,mille et une perles,macon,mâcon,71">
      <link rel="stylesheet" type="text/css" href="design3.css">
      <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
   <body>
      <div id="conteneur">
         <div id="hautgauche">
            <tr>
               <td>
                  <table border="0" width="10%" cellspacing="0" cellpadding="0">

                     <tr>
                        <td width="10%" height="4" class="infoBoxHeading">
                           <img src="sidentifier.png" border="0" alt="Identification" title=" Identification " width="150" height="33">
                        </td>
                     </tr>
                  </table>
                  <table border="0" width="10%" cellspacing="0" cellpadding="0" line-height="0" class="infoBox">
                     <tr>
                        <td>
                           <table border="0" width="10%" cellspacing="0" cellpadding="0" line-height="0" class="infoBoxContent">
                              <tr>
                                 <td align="center" class="boxText">
                                    <form name="login" action="login.php?action=process" method="post">
                                       <table border="0" cellpadding="0" cellspacing="0" class="smallText" >
                                          <tr>
                                             <td width="10%" height="6" class="smallText">
                                                <p align="center">Email</p>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td width="10%" height="3" class="smallText">
                                                <p align="center">
                                                   <input maxLength="96" name="email_address"size="18">
                                                </p>
                                             </td>
                                          </tr>
                                          <tr><br>
                                             <td width="10%" height="3" class="smallText">
                                                <p align="center">Mot de Passe</p>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td width="10%" height="6">
                                                <p align="center">
                                                   
                                                      <font size="1" class="smallText">
                                                         <input type="password" maxLength="40" value name="password" size="10">
                                                      </font>
                                                   
                                                </p>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td width="10%" height="1" class="smallText">
                                                 <p align="center">
                                                   <br>
                                                      <INPUT type="image" src="ok.png"  name="Submit" alt="cliquer" >
                                                   <br><br>
                                                      <a class="smallText" href="http://www.kinouche.com/password_forgotten.php">Mot de Passe ?</a>
                                                </p>
                                             </td>
                                          </tr>
                                       </table>
                                    </form>
                                 </td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
         </div>



<div id="hautdroit">
 <tr>
            <td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" height="14" class="infoBoxHeading"><a href="http://www.kinouche.com/shopping_cart.php"><img src="monpanier.png" border="0" alt="Panier" title=" Panier " width="180" height="62"></a></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBox">
  <tr>
    <td><table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents2">
  <tr>
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  </tr>
  <tr>
    <td class="boxText">vide</td>
  </tr>
  <tr>
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  </tr>
</table>
</td>
  </tr>
</table>
            </td>
          </tr>
          

       </div>   


<div id="boutontouthaut">
<a href="http://www.kinouche.com/presentations.htm"><img src="panier_haut.jpg" align="right"></a><a href="http://www.kinouche.com/login.php"><img src="moncompte_haut.jpg" align="right"></a></div>
           <object id="haut" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
 width="643" height="87" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="banhome.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <embed src="banhome.swf" quality="high" bgcolor="#000000" width="673" height="117" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
         </object>

            <div id="boutonhaut">
            <a href="http://www.kinouche.com/presentations.htm"><img src="boutonpres2.jpg"></a>
            <a href="http://www.kinouche.com/collections.htm"><img src="boutoncollec2.jpg"></a>
            <a href="http://www.kinouche.com/commander.htm"><img src="boutoncomma2.jpg"></a>
            <a href="http://www.kinouche.com/news.htm"><img src="boutonnews2.jpg"></a>
         </div>
         <div id="droit">
         </div>
         <div id="gauche">
         </div>
         <div id="centre">
            <center>
                        <br>
                        <embed src="accueil2.swf" quality="high" bgcolor="#000000" width="540" height="255" name="news" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
            </center>
         </div>
         <div id="boutonbas">
            <a href="http://www.kinouche.com/contact.php"><img src="boutoncontact2.jpg"></a>
            <a href="http://www.i-services.net/membres/livredor/livredor.php?uid=140987&sid=86424" target="_blank"><img src="boutonlivre2.jpg"></a>
            <a href="http://www.kinouche.com/pointsvente.htm"><img src="boutonpoints2.jpg"></a>
         </div>
      </div>
      <br><br>
            <center>
            <a href="http://www.kinouche.com/accueil.htm"> Accueil </a>
            <font color="#000000"> | </font>
            <a href="http://www.kinouche.com/liens.htm"> Liens </a>
            <font color="#000000"> | </font>
            <a href="http://www.kinouche.com/contact.php"> Contact </a>
            <font color="#000000"> | </font>
            <a href="http://www.kinouche.com/conditions.htm"> Conditions de vente </a>
            <br><img src="barre2.jpg">
            <br>© Kinouche 2009 - 2010 - Tous droits réservés
         </center>
            <script type="text/javascript">
                                               var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                                               document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                                   </script>
         <script type="text/javascript">
                                               try {
                                                           var pageTracker = _gat._getTracker("UA-10753340-1");
                                                           pageTracker._trackPageview();
                                               }
                                                catch(err) {}
         </script>
   </body>
</html>
 


Merci d'avance de vos réponse, et bonne fin de journée à vous !
Hello,

Bon pas évident là comme çà... D'après ce que je peux voir tu essayes de partir d'une intégration existante pour venir y ajouter 3 éléments : une identification à gauche, un panier à droite, et 2 boutons au dessus de la bannière en flash.

Plusieurs problèmes... Les blocs sont positionnés de façon bizarroïde, un coup en float, un coup non, ils débordent, se chevauchent, il y a des tableaux avec des largeurs relatives, des blocs avec des largeurs fixes, des propriétés utilisés en 1990, certaines se contredisent, bref il y a du boulot...

Pour commencer, tu es parties sur une largeur total de ton conteneur de 1026px. Je sais bien que la tendance veut que tout le monde possède un écran large mais j'ai toujours une pensé pour les personnes qui ne peuvent dépasser les 1024x768, et ils sont très nombreux. Parts plutôt sur une largeur total de 980px au maximum. Évidemment cela remet un peu en cause ton schéma puisqu'il te reste que très peu de place à gauche et à droite.

Après ce n'est pas évident, je m'y perd un peu dans le code. En repartant du site initial j'aurai procédé différemment, en plaçant l'animation flash (object) dans un nouveau bloc.

En bidouillant 2 minutes avec Firebug :


<div style="height:150px">
    <div style="float:left">
        Gauche
    </div> 
    <object>/*...*/</object>
    <div style="float:right">
        Droite
    </div>
</div>


Bon çà reste pas très propre niveau positionnement (float Smiley cligne ) mais si çà peut déjà te mettre sur une piste...
Modifié par magentix (18 Mar 2010 - 18:53)
Bonjour,
Merci beaucoup magentix pour ta précieuse réponse !
J'ai beaucoup travaillé sur mon code, en utilisant un validateur et dreamweaver j'ai pu voir que c'était bourré d'erreurs, j'en ai donc corrigé quelques unes, car je n'ai pas tout compris, mais mon code est maintenant plus propre.
J'ai essayé la nouvelle disposition que tu m'a donné, cela n'a pas marché mais m'a mis sur une piste, j'ai modifié comme j'ai pu, le résultat n'est pas encore au rendez vous, mais il y a du progrès, grâce à toi !

Voici mon nouveau code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

            <head>
            <title>Kinouche * Accueil</title>
      <META NAME="description" CONTENT="Marque déposée de bijoux fantaisies en édition limitée">
      <META NAME="keywords" CONTENT="bijoux,perles,edition limitée,pierres,fait main,boutique,fr,magasin,kinouche,fantaisies,achat bijoux,bijou,swarovski,bague,bracelet,collier,bijou de sac,boucles d'oreilles,kinouche.com,estelle comtet,verre,resine,ceramique,metal,mille et une perles,macon,mâcon,71">
      <link rel="stylesheet" type="text/css" href="design3.css">
      <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
   <body>
      <div id="conteneur">


<div style="height:150px">
<div style="float:left">

               
                  <table border="0" width="10%" cellspacing="0" cellpadding="0"></table>

                     
                        <td width="10%" height="4" class="infoBoxHeading">
                           <img src="sidentifier.png" border="0" alt="Identification" title=" Identification " width="150" height="33">
                        </td>
                     
                 
                  <table border="0" width="10%" cellspacing="0" cellpadding="0" line-height="0" class="infoBox">
                     </table>
                           <table border="0" width="10%" cellspacing="0" cellpadding="0" line-height="0" class="infoBoxContent">

                              
                                 <td align="center" class="boxText"></td></table>
                                    <form name="login" action="login.php?action=process" method="post">
                                       <table border="0" cellpadding="0" cellspacing="0" class="smallText" >
                                          
                                             <td width="10%" height="6" class="smallText">
                                                <p align="center">Email</p>
                                             </td>
                                          </table>
                                          
                                             <td width="10%" height="3" class="smallText">
                                                <p align="center">
                                                   <input maxLength="96" name="email_address"size="18">
                                                </p>
                                             </td>
                                          
                                          <br>
                                             <td width="10%" height="3" class="smallText">
                                                <p align="center">Mot de Passe</p>
                                             </td>
                                          
                                             <td width="10%" height="6">
                                                <p align="center">
                                                   
                                                      <font size="1" class="smallText">
                                                         <input type="password" maxLength="40" value name="password" size="10">
                                                      </font>
                                                   
                                                </p>
                                             </td>
                                          
                                          
                                             <td width="10%" height="1" class="smallText">
                                                 <p align="center">
                                                   <br>
                                                      <INPUT type="image" src="ok.png"  name="Submit" alt="cliquer" >
                                                   <br><br>
                                                      <a class="smallText" href="http://www.kinouche.com/password_forgotten.php">Mot de Passe ?</a>
                                                </p>
                                             </td>
                                         
                                       
                                    </form>
               </div> 





<div style="float:right">

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  
    <td width="100%" height="14" class="infoBoxHeading"><a href="http://www.kinouche.com/shopping_cart.php"><img src="monpanier.png" border="0" alt="Panier" title=" Panier " width="180" height="62"></a></td>
  
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBox"></table>
  
    <td><table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents2"></table></td>
  
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  
    <td class="boxText">vide</td>
  
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>


</div>
                
         </div>    


<div id="boutontouthaut">
<a href="http://www.kinouche.com/presentations.htm"><img src="panier_haut.jpg" align="right"></a><a href="http://www.kinouche.com/login.php"><img src="moncompte_haut.jpg" align="right"></a></div>

<object><class id="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="643" height="87" align="middle">
            <param name="allowScriptAccess" value="sameDomain">
            <param name="movie" value="banhome.swf">
            <param name="quality" value="high">
            <param name="bgcolor" value="#000000">
            <embed src="banhome.swf" quality="high" bgcolor="#000000" width="673" height="117" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
         </object>    
 
            <div id="boutonhaut">
            <a href="http://www.kinouche.com/presentations.htm"><img src="boutonpres2.jpg"></a>
            <a href="http://www.kinouche.com/collections.htm"><img src="boutoncollec2.jpg"></a>
            <a href="http://www.kinouche.com/commander.htm"><img src="boutoncomma2.jpg"></a>
            <a href="http://www.kinouche.com/news.htm"><img src="boutonnews2.jpg"></a>
         </div>
         <div id="droit">
         </div>
         <div id="gauche">
         </div>
         <div id="centre">
            <center>
                        <br>
                        <embed src="accueil2.swf" quality="high" bgcolor="#000000" width="540" height="255" name="news" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
            </center>
         </div>
         <div id="boutonbas">
            <a href="http://www.kinouche.com/contact.php"><img src="boutoncontact2.jpg"></a>
            <a href="http://www.i-services.net/membres/livredor/livredor.php?uid=140987&sid=86424" target="_blank"><img src="boutonlivre2.jpg"></a>
            <a href="http://www.kinouche.com/pointsvente.htm"><img src="boutonpoints2.jpg"></a>
         </div>
      </div>
      <br><br>
            <center>
            <a href="http://www.kinouche.com/accueil.htm"> Accueil </a>
            <font color="#000000"> | </font>
            <a href="http://www.kinouche.com/liens.htm"> Liens </a>
            <font color="#000000"> | </font>
            <a href="http://www.kinouche.com/contact.php"> Contact </a>
            <font color="#000000"> | </font>
            <a href="http://www.kinouche.com/conditions.htm"> Conditions de vente </a>
            <br><img src="barre2.jpg">
            <br>© Kinouche 2009 - 2010 - Tous droits réservés
         </center>
            <script type="text/javascript">
                                               var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                                               document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                                   </script>
         <script type="text/javascript">
                                               try {
                                                           var pageTracker = _gat._getTracker("UA-10753340-1");
                                                           pageTracker._trackPageview();
                                               }
                                                catch(err) {}
         </script>
   </body>
</html>
 


Et une capture de la situation actuelle :
http://www.kinouche.com/capt_accueil_4.jpg

Si quelqu'un a une idée pour me venir en aide ?? =)

Merci encore, et bon lundi à tous Smiley smile
Bonjour,

Si je peux me permettre une remarque: en général, quand on débute et qu'on veut apprendre HTML et CSS en visant un bon niveau de compétence (celui nécessaire pour intervenir sur des sites commerciaux), on n'attaque pas bille en tête par la modification d'un site commercial existant ou l'intégration d'une maquette graphique. On se forme grâce à des livres, articles et tutoriels, et surtout des exercices sans enjeux autres que l'apprentissage.

Mon conseil serait donc de prendre deux semaines pour apprendre les rudiments de HTML (j'ai vu du code complètement illogique comme des <table> et <tr> transformés en <div> sans autre forme de procès), de CSS, du positionnement CSS, etc., le tout à travers des lectures et exercices. Et ensuite on reparle de ton problème. Smiley smile

S'il s'agit d'un besoin urgent, la solution est de faire appel à un professionnel déjà formé.

Bonne continuation.