28220 sujets

CSS et mise en forme, CSS3

[Résolu]Positionnement CSS (mise en page sans tableaux)

Bonjour,

j'ai suivi le tuto de la mise en page sans tableaux d'un site web, disponible sur ce site. Bon, d'accord, il y a encore des tableaux, mais je n'ai pas vraiment su comment faire autrement.

Explication de la mise en page :

Il y a un tableau de 9 cellule, toutes les cellules qui sont au bord (8) contiennent le cadre du site. La cellule du milieu contient des div mettant en page le design du site grâce à du positionnement CSS.

Mais je rencontre un problème concernant la partie du contenu et la partie de menu (côte à côte) comme vous pouvez le voir sur l'image. J'ai mis une bordure aux 2 blocks concernés pour que vous puissiez mieux vous rendre compte.

Comme vous pouvez le voir, le block de droite (menu) n'est pas à sa place. D'ailleurs il est en partie en dehors du tableau qui contient le cadre (le cadre est la bordure blanche autour du design du site).

Je suppose que vous devinez où devrait se trouver le block du menu (sur la droite, pile poil à côté du block contenu).

Je ne sais pas où est mon erreur. Pouvez-vous m'aider ?

je suppose que le tableau mettant en page le cadre pose problème, mais j'ai trouvé que c'était le plus simple (pour moi donc), ne sachant pas faire autrement sans tout compliquer, pas forcément le plus malin, je vous l'accorde Smiley confused .

http://img171.imageshack.us/img171/3723/sanstitre1qh0.th.png

Code de la page :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">
 <head>
  <title>Fripix</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 
  <table summary="cadre du site">
   <tr> <!-- Ligne 1 contient : b1.png, b2.png, b3.png -->
    <td class="b1"></td>
    <td class="b2"></td>
    <td class="b3"></td>
   </tr>
   <tr> <!-- Ligne 2 contient : b4.png background, blocs design CSS, b5.png -->
    <td class="b4"></td>
    <td class="designCSS">
    
     <div class="head1"></div>
     <div class="head2"></div>
     <div class="contenu"></div>
     <div class="menu"></div>
     <div class="bottom"></div>
    
    </td>
    <td class="b5"></td>
   </tr>
   <tr> <!-- Ligne 3 contient : b6.png, b7.png, b8.png -->
    <td class="b6"></td>
    <td class="b7"></td>
    <td class="b8"></td>
   </tr>
  </table>
  
 </body>
</html>


Fichier CSS (partie qui nous intéresse) :

.head1 {
 background-image: url(img/design/h1.png);
 background-repeat: no-repeat;
 width: 770px;
 height: 93px;
}
.head2 {
 background-image: url(img/design/h2.png);
 background-repeat: no-repeat;
 width: 770px;
 height: 27px;
}

.contenu {
 margin-right: 205px;
 width: 565px;
 height: 200px;
 border: 1px solid black;
}

.menu {
 position: absolute;
 left: 565px;
 background-image: url(img/design/menu.png);
 background-repeat: repeat-y;
 width: 205px;
 height: 200px;
 border: 1px solid black;
}

.bottom {
 background-image: url(img/design/bottom.png);
 background-repeat: no-repeat;
 width: 770px;
 height: 25px;
}


Merci Smiley biggrin
Modifié par Graphix (07 Aug 2006 - 22:12)
<modération>
Les compteurs ayant été remis à zéro et les messages superflus supprimés, ce sujet peut reprendre dans la cordialité à partir de la question initiale.
</modération>

<edit>J'ai dû zapper un nombre insuffisant de messages la première fois. C'est réparé. La discussion porte sur la question technique, et uniquement sur ce sujet. Merci</>
Modifié par Laurent Denis (07 Aug 2006 - 19:18)
Je remplacerai toutes les balises dans le code html de manière à obtenir quelque chose de général qui ressemble à cela :
<div id="cadre du site">

   <div> <!-- Ligne 1 contient : b1.png, b2.png, b3.png -->

    <div class="b1"></div>

    <div class="b2"></div>

    <div class="b3"></div>

   </div>

   <div> <!-- Ligne 2 contient : b4.png background, blocs design CSS, b5.png -->

    <div class="b4"></div>

    <div class="designCSS">

    

     <div class="head1">z1</div>

     <div class="head2">z2</div>

     <div class="contenu">z3</div>

     <div class="menu">z4</div>

     <div class="bottom">z5...</div>

    

    </div>

    <div class="b5"></div>

   </div>

   <div> <!-- Ligne 3 contient : b6.png, b7.png, b8.png -->

    <div class="b6"></div>

    <div class="b7"></div>

    <div class="b8"></div>

   </div>

  </div>

et dans la feuille de style qui correspond, les propriétés inhérentes.
Après avoir remplacé toutes les balises,par des "div" ; le problème pourra être résolu grâce à la feuille de style et aux valeurs allouées aux attributs
Cela ne veut pas forcément dire que cela coulera de source et que tu obtiendras le positionnement exact que tu cherches.
A ta place , je procèderai par étape de manière à avoir quelque chose de plus rationnnel.

Par exemple je poursuivrai en remplaçant
Si cela peut te mettre sur la bonne voie. 
<div class="b8">
par quelque chose comme 
<div id=class_b8">

Modifié par ivision18000 (07 Aug 2006 - 20:30)
Ok, je comprends pour virer les tableaux, sauf qu'il me reste un soucis. Les classes b4 et b5 contiennent les bords gauche et droite du cadre du site. Donc qui s'adapte en hauteur selon le contenu.

Comment le faire avec une mise en page sans tableaux, uniquement en CSS? Mon principale soucis au niveau du cadre est là, raison pour laquelle j'ai gardé un tableau pour le faire Smiley confused

Sinon je vais essayer tout cela afin de régler mon problème au niveau du contenu et du menu, en espérant y arriver.

En tout cas merci pou cela. Smiley smile

EDIT : j'y pense, je vais me retrouver avec 4 blocs sur la même ligne, b4, b5, contenu et menu. Donc j'en reviens à mon problème de positionnement, il sera le menu Smiley confus
Modifié par Graphix (07 Aug 2006 - 20:30)
Rien n'y fait, le soucis est toujours le même, le bloc du menu ne se place pas là où il devrait, je n'arrive pas à trouver comment régler le problème malheureusement. Mon design est probablement trop compliqué pour pouvoir correctement utiliser le positionnement en CSS. Comme je tiens à le garder, je vais essayer de "bidouiller" pour que tout fonctionne.

Merci pour l'aide Smiley smile
Sujet clos
Aller à