Partage
  • Partager sur Facebook
  • Partager sur Twitter

petit soucis avec les blocks

des background rebels

Sujet résolu
    30 novembre 2005 à 11:53:55

    Bonjour les zero,
    J'ai un petit soucis avec ma mise en page. Je vais vous montrer le problème de façon grossière. Voilà mes blocs.

    <div class="fond">
         <div class="menu"></div>
         <div class="contenu"></div>
    </div>

    Le block menu a un background spécifique. Le block contenu aussi.
    Le block fond englobe le tout et a lui aussi son background (différent du background body je précise).
    Mais voilà, quand je visualise mes navigateurs, mon bloc "fond" n'englobe en fait rien du tout. On voit une petite croute en haut de la page mais c'est tout. Hors j'aimerais que ce bloc englobe mes autres blocs moi.
    En espérant que quelqu'un ait compris,
    Salutation messieurs.
    • Partager sur Facebook
    • Partager sur Twitter
      30 novembre 2005 à 12:04:11

      Salut,

      Ce que tu peux faire pour voir la limite de chaque bloc (et ainsi déterminer dans un premier temps qui englobe qui), c'est de mettre des bordures.
      • Partager sur Facebook
      • Partager sur Twitter
        30 novembre 2005 à 12:06:28

        Salut. J'ai des background donc je vois la limite de chaque bloc. ;) Pour l'instant cela me donne ceci. (Rigolez pas le design est en pleine reconstruction)...
        • Partager sur Facebook
        • Partager sur Twitter
          30 novembre 2005 à 12:10:07

          Ok pour le lien, et ton problème il est où ? C'est pour ton menu ?
          • Partager sur Facebook
          • Partager sur Twitter
            30 novembre 2005 à 12:21:33

            C'est le menu et le corps qui remonte sur le header qui te gêne ? o_O
            Sinon il est vrai que la connexion n'est pas centrer dans ton bloc de connexion :euh:
            • Partager sur Facebook
            • Partager sur Twitter
              30 novembre 2005 à 13:09:17

              Rebonjour, désolé, parti manger :p
              Bon alors, le problème se situe sous le menu du haut. Vous voyez la petite zone bleu clair situé juste dessous? Et bien normalement cette zone doit descendre jusqu'au bas de la page. Hors la, elle s'arrête direct alors que, dans le code, je ferme mon bloc au bout de ma page.
              • Partager sur Facebook
              • Partager sur Twitter
                30 novembre 2005 à 13:18:35

                Ta zone bleu clair, c'est une image de fond ou juste de la couleur ? o_O
                • Partager sur Facebook
                • Partager sur Twitter
                  30 novembre 2005 à 13:26:38

                  Euh non Lysberg, quand même... C'est déjà PAS très beau, je vais pas me fatiguer à mettre des images de fond. Je mets juste des couleurs distincts pour bien voir les différents blocks....
                  Ok je vous simplifie le CSS sinon ceci risque d'être un peu long...
                  Le code html est de type:

                  <div id="interieur">
                     <div class="menu"></div>
                     <div class="presentationindex"></div>
                  </div>
                  Et voici le CSS qui va avec...

                  #interieur
                  {

                          width:829px;
                          margin:none;
                          padding:none;
                          padding-bottom:20px;
                          background-color:#6699CC;
                  }
                  .presentationindex
                  {       position:absolute;
                          padding:none;
                          margin-left:155px;
                          color:#333333;
                          padding-left:30px;
                          width:610px;
                          margin-top:10px;
                          margin-bottom:10px;
                          padding-bottom:10px;
                          border: 1px solid black;
                          background-color:white;}
                  .menu
                  {
                          position:absolute;
                          width:140px;
                          height:500px;
                          padding-right:00px;
                          padding-left:00px;
                          margin-top:10px;
                          margin-left:05px;       
                          background-color:#336699;
                          background-repeat:no-repeat;
                  }
                  • Partager sur Facebook
                  • Partager sur Twitter
                    30 novembre 2005 à 13:38:07

                    C'est à cause de tes position: absolute;

                    Ca signifie que tu "crée une nouvelle couche" donc qu'il ne font plus vraiment partie de ton div de base. Je cherche comment obtenir ce que tu veux.

                    J'ai trouvé, tiens :

                    Tes css :
                    #interieur {
                            width:829px;
                            margin:none;
                            padding:none;
                            padding-bottom:20px;
                            background-color:#6699CC;
                    }
                    .presentationindex {       
                            padding:none;
                            margin-left:155px;
                            color:#333333;
                            padding-left:30px;
                            width:610px;
                            margin-top:10px;
                            margin-bottom:10px;
                            padding-bottom:10px;
                            border: 1px solid black;
                            background-color:white;
                    }
                    .menu {
                            float: left;
                            width:140px;
                            height:500px;
                            padding-right:00px;
                            padding-left:00px;
                            margin-top:10px;
                            margin-left:05px;       
                            background-color:#336699;
                    }

                    et ton (x)html reste bien sûr le même :p
                    • Partager sur Facebook
                    • Partager sur Twitter
                      30 novembre 2005 à 13:42:23

                      enleve les position:absolute et mets des margin pour positionner des elements
                      • Partager sur Facebook
                      • Partager sur Twitter
                        30 novembre 2005 à 13:49:47

                        Effectivemet cela marche comme tu me dis. Merci :) Il y a vraiment des trucs que je ne comprends pas avec les blocs. Enfin bon bref.
                        Encore un détail. Regarde le margin-top placé sur le div "presentationindex". bonne présentation sous IE. Mais sur FF, il affiche le margin pour le bloc "interieur". :(
                        EDIT: laissez tomber, voilà qui est réglé. Merci beaucoup!! :) Il reste plus qu'à rendre tout ceci beau!!
                        • Partager sur Facebook
                        • Partager sur Twitter
                          30 novembre 2005 à 13:55:54

                          j'ai exactement le meme affichage sur les 2 navs
                          • Partager sur Facebook
                          • Partager sur Twitter

                          petit soucis avec les blocks

                          × 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