Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] Problème de design

Espacement bien géré sous IE et pas sous FF

Sujet résolu
Dordi48
  • HTML / CSS
    9 décembre 2006 à 14:56:13

    Bonjour,
    J'ai un soucis d'espacement d'images entre les différentes partie de mon design.
    J'utilise des "<div>" et incruste mes images via le code CSS.

    Sous FF j'obtiens des espaces dans le design: Image utilisateur
    Alors que sous IE non: Image utilisateur

    La partie centrale est extensible, je ne défini donc pas de "height" dans mon code CSS.

    Étonnamment, si je définis une bordure autour de ma partie centrale, FF ne fait plus d'espace o_O ?Image utilisateur

    Voici le code xhtml:


    <body>
        <div class="header">
            <!-- Insertion de l'image top.png via la page de style-->
            <div class="sponsor">
            </div>

            <div class="compteur">
            </div>     
        </div>     
        <div class="body">
            <!-- Insertion de l'image middle.png via la page de style.
             Cette partie doit être extensible en fonction des informations dans le main-->
            <div class="leftmenu">
            </div>

            <div class="main">
                    <p>
                    test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
                    test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
                    test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
                    test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
                    </p>
            </div>
         </div>
         <div class="footer">
            <!-- Insertion de l'image bottom.png via la page de style-->
         </div>
    </body>


    Voici le code CSS:

    body
    {
            width: 998px;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            background-image: url("test/fond.png");
            background-repeat: repeat;
    }
    .header /*Entête de l'image de fond*/
    {
            width: 995px;/*L'entête a une taille fixe*/
            height: 240px;
            margin: 0px;
            background-image: url("test/top.png");
            background-repeat: no-repeat;

    }
    .body /*Milieu de l'image de fond -Extensible-*/
    {
            width: 995px;/*Le corps grandi en fonction des infos à afficher dans le block "main"*/
            margin: 0px;
            background-image: url("test/middle.png");
            background-repeat: repeat-y;
            /*border: solid blue 2px;*/
    }
    .footer /*Pied de l'image de fond*/
    {
            width: 995px;/*L'entête a une taille fixe*/
            height: 89px;
            margin: 0px;
            background-image: url("test/bottom.png");
            background-repeat: no-repeat;
    }
    .leftmenu /*Block englobant tout le menu de gauche -Extensible-*/
    {
            float: left;
            width: 150px;
            height: 380px;
            margin: 0px;
            margin-left: 10px;
    }

    .main /*Block information principal*/
    {
            margin: 0px;
            margin-left: 190px;
            width: 740px;
    }


    Mes images sont au format 8bits .png. Elles n'ont ni bords blancs ni bords transparents.
    J'ai essayé toutes sortes de margin, position absolue-relative...
    Lorsque je défini un "height" pour la partie centrale, elle n'est alors plus extensible.
    Je n'ai pas trouvé de solution dans le forum.

    Merci

    Dordi

    • Partager sur Facebook
    • Partager sur Twitter
    Candygirl
      9 décembre 2006 à 15:13:17

      Hello,

      ça ressemble fort à un problème de fusion de marge, d'après ton code, la marge du p qui fusionne avec son conteneur et donc s'applique au main d'où l'espace. Essaie de rajouter

      p {margin:0;}


      dans ton css pour voir si c'est bien le problème.
      • Partager sur Facebook
      • Partager sur Twitter
      Dordi48
      • HTML / CSS
        9 décembre 2006 à 15:35:11

        C'est magique !! :D

        Merci

        Petite info, si avant le <p></p> on met un titre (Ex:<h2></h2>) il faut faire la même chose dans le CSS mais pour le h2.

        Dordi
        • Partager sur Facebook
        • Partager sur Twitter

        [CSS] Problème de design

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown