Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme de postionnement de blocs

Sujet résolu
    14 juillet 2006 à 11:03:25

    Bonjour,
    J'ai fait comme dans le TP de mateo pour positionner mes blocs. Tout se passe bien dans Firefox, mais dans IE les cadres ne se mettent pas a coté...

    voici mon code :

    Citation : code

    body {
    position: static;
    width: 780px;
    margin: 50px 50px;
    padding: 0px;
    background-image: url(images/ecran.jpg);
    background-repeat: no-repeat;
    color: #FFFFFF;
    font-family: Garamond, Verdana, sans-serif;
    font-weight: bold;
    text-align: left;
    background-color: #000000;
    }

    #menu {
    position: static;
    float: left;
    width: 180px;
    margin: 0px;
    padding: 8px;
    border: 2px solid white;
    text-decoration: underline;
    }

    #corps {

    width: 600px;
    /* float: right;*/
    margin: 0px;
    margin-left: 210px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    /* margin-bottom: 20px; Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    padding: 8px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
    color: #FFFFFF;/* Couleur du text */
    border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
    }



    Pouvez vous m'aider s'il vous plait? Voici le site http://vodkadisiaque.free.fr/fetes.php que vous pouvez tester sur les deux navigateur.
    Merci!
    • Partager sur Facebook
    • Partager sur Twitter
      14 juillet 2006 à 11:44:55

      Edit: Enlève le float: right de ton corps

      Si tu pouvais mettre ton code en code CSS pour qu'on voit la coloration syntaxique STP.
      • Partager sur Facebook
      • Partager sur Twitter
        14 juillet 2006 à 11:57:31

        Voilà le code en CSS :

        body {
        position: static;
        width: 780px;
        margin: 50px 50px;
        padding: 0px;
        background-image: url(images/ecran.jpg);
        background-repeat: no-repeat;
        color: #FFFFFF;
        font-family: Garamond, Verdana, sans-serif;
        font-weight: bold;
        text-align: left;
        background-color: #000000;
        }

        #menu {
        position: static;
        float: left;
        width: 180px;
        margin: 0px;
        padding: 8px;
        border: 2px solid white;
        text-decoration: underline;
        }

        #corps {
        width: 600px;
        margin: 0px;
        margin-left: 210px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
        padding: 8px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
        color: #FFFFFF;/* Couleur du text */
        border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
        }


        merci!
        • Partager sur Facebook
        • Partager sur Twitter
          15 juillet 2006 à 17:10:14

          Ton body fait 780px et tu veux y rentrer côte à côte un menu de600px + un corps de 180 px. Malheureusement pour toi, tu as mis des borders, du padding et des marges.
          IE ne calculant pas la grandeur des boîtes de la même manière que les autres browsers, il ne trouve pas assez de place pour ton corps. Si tu augmentes le width du body, cela devrait résoudre ton problème.
          Je vérifie chez moi.
          C'est bien ça. Je te l'ai un peu modifié. Tu dois également rajouter une balise de fermeture </b> dans l'html. Je me demande pourquoi tu utilises du JS pour faire ton menu.

          body {
          width: auto;
          margin: 0 5em;
          padding: 0;
          background-image: url(image/ecran.jpg);
          background-repeat: no-repeat;
          color: #FFFFFF;
          font-family: Garamond, Verdana, sans-serif;
          font-weight: bold;
          background-color: #000000;
          font-size: 1em;
          text-align: center;
          }

          #menu {
          float: left;
          margin-top: 5em;
          border: 2px solid white;
          text-decoration: underline;
          padding: .2em;

          }

          #corps {
          width: 75%;
          margin-top: 5em;
          float: right;
          margin-bottom: 1em;
          padding: 2em;
          color: #FFFFFF;
          border: 2px solid white;
          }
          • Partager sur Facebook
          • Partager sur Twitter
            15 juillet 2006 à 20:41:11

            Merci!
            Et j'ai utilisé du javascript pour le menu, car je l'avais trouvé sur internet a l'époque où j'ai commencé le site. :p

            Il faudrait mieux que je le change?
            • Partager sur Facebook
            • Partager sur Twitter
              15 juillet 2006 à 20:45:55

              C'est à toi de voir, mais si ton utilisateur l'a désactivé ...
              • Partager sur Facebook
              • Partager sur Twitter
                15 juillet 2006 à 21:03:39

                Et je pourrais faire le même genre de menu en PHP?
                Si oui, pourriez-vous me donner le code s'il vous plaît? :D
                • Partager sur Facebook
                • Partager sur Twitter
                  15 juillet 2006 à 22:25:41

                  Tu as de superbes réalisations en css.
                  Vas sur les tutos et aussi sur listamatic
                  • Partager sur Facebook
                  • Partager sur Twitter
                    16 juillet 2006 à 1:29:11

                    Merci, je vais regarder ca plus en detail, car je ne sais pas si ils s'ouvre automatiquement au passage de la souris.

                    Ou peut etre qu'un " :hover" permet de faire cela?
                    • Partager sur Facebook
                    • Partager sur Twitter

                    probleme de postionnement de blocs

                    × 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