Aller au contenu

Problème alignement div

Justine71

Par Justine71
dans (X)HTML et CSS

 Partager

Sujets conseillés

Justine71

Justine71

Posté
Posté

Bonjour à tous =)

Je reviens avec toujours mon éternel problème : l'alignement

J'ai beaucoup de mal à faire en sorte que mes div soit toutes bien rangées à leur place, et c'est pas faute d'essayer ^^

En fait, c'est juste la partie du haut qui bug, comme vous pourrez le voir sur les images, le centre et le bas va 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, ma css et ma page accueil.htm :

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 très bonne journée à vous !

Justine71

Justine71

Posté
  • Auteur
Posté

Personne pour me venir en aide ? =)

Pourtant je vous avais fait un très très beau dessin, lol =p

Merci d'avance, bonne journée à tous !

Remi

Remi

Posté
Posté

Le problème est que, pour être un peu direct, le code est... comme dire... une horreur euh... n'incite pas à se plonger dedans. :P

Je suis pourtant loin d'être un puriste et je ne suis pas le dernier à utiliser un petit tableau pour positionner un menu (ça donne des boutons à certains) mais bon, quand on commence à imbriquer un tableau dans un autre, c'est pas bon signe du tout...

Et là, c'est 3 ou 4 tableaux qui sont imbriqués et il y a tellement de tableaux que certaines balises <tr> et <td> se sont échappées, sortes d'électrons libres... l'appel du grand large sans doute.

Bon, là il faudrait mieux tout effacer et recommencer avec une optique différente. Plutôt que de chercher à bâtir un édifice en imbriquant des éléments entre eux, je te conseillerais de concevoir chaque pavé comme un élément séparé et ensuite de le positionner par css. Mine de rien, cela change tout. Dans un premier temps, il faut chercher à avoir ses pavés mis l'un après l'autre sans mise en page, et de faire le positionnement exact en dernier.

Dudu

Dudu

Posté
Posté

Salut Justine

Ce que dit Rémi est frappé au coin du bon sens.

Pour faire une comparaison, tu as un problème avec la décoration intérieure de ta maison, mais ta maison n'a pas de fondations stables. Il faut revoir les priorités: d'abord construire des fondations stables (un code HTML correct), ensuite des murs solides (comme dit Rémi: "concevoir chaque pavé comme un élément séparé et ensuite de le positionner par css. [...] il faut chercher à avoir ses pavés mis l'un après l'autre sans mise en page"), et enfin faire la déco intérieure (tout bien ranger à sa place, tout positionner correctement en CSS, etc.)

Ton code HTML comporte beaucoup d'erreurs:

  • La collision récurrente entre des éléments HTML et XHTML (dès les 2 premières lignes)
  • La présence d'un Doctype Transitional, qui ne garantit pas un bon affichage dans tous les navigateurs, ce n'est pas une erreur à proprement parler mais il vaut mieux utiliser un doctype strict.
  • 2 balises HTML ?!?
  • des tableaux imbriqués dans des tableaux imbriqués dans des tableaux imbriqués dans des divs, jusqu'à en avoir le tournis.
  • des balises fermantes manquantes, des balises ouvrantes manquantes
  • des balises obsolètes et/ou hautement déconseillées (<center>, <font>)
  • des attributs incorrects et/ou incorrectements écrits (à la ligne 54, l'attribut value ne comporte aucune valeur par exemple)
  • des pixels transparents pour caler la mise en page (très années 90. Et fortement déconseillé, aussi)
  • etc.

Aide-toi du Validateur w3c pour corriger ces erreurs, tu galèreras nettement moins sur des problèmes de mise en page par la suite.

Bon courage :)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...