Partage
  • Partager sur Facebook
  • Partager sur Twitter

aide avec le css

css

    28 avril 2006 à 15:38:07

    bonjour
    Alors j'ai suivi les cours de css mais j'ai des probleme le menu lui il est bien mais sinon tout ce qu'est la banniére le corp le pied de page tout sa ce resume en 2 rectangle un qui fais la largeur de la page la haut et le pid de page c'est case comme un case de menu voila donc c'est assez ennuyeux car je suis bloqué je sais pu comment faire :( et je peux pas rédiger car je sais pas ou est le corp a savoir si il y en a un voila mon code css:body
    {
    width: 760px;
    margin: auto; /* Pour centrer notre page */
    margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
    margin-bottom: 20px;/* Idem pour le bas du navigateur */
    background-color: rgb(227,143,17); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
    }

    /* L'en-tête */

    #en_tete
    {
    width: 800px;
    height: 800px;
    background-image: url("images/banniere.png");
    background-repeat: no-repeat;
    margin-bottom: 10px;
    }

    /* Le menu */

    #menu
    {
    float: left;
    width: 170px;
    }

    .element_menu
    {
    background-color: #FFFFFF;
    background-image: url("images/motif.png");


    border: 4px solid blue;

    margin-bottom: 20px;
    }


    /* Quelques effets sur les menus */


    .element_menu h3 /* Tous les titres de menus */
    {
    color: #FF0000;
    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    text-align: center;
    }

    .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
    {
    list-style-image: url("puce.gif"); /* On change l'apparence des puces */
    padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
    padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
    margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
    margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
    }

    .element_menu a /* Tous les liens se trouvant dans un menu */
    {
    color: #FF0000;
    }

    .element_menu a:hover /* Quand on pointe sur un lien du menu */
    {
    background-color: #B3B3B3;
    color: black;
    }

    /* Le corps de la page */

    #corps
    {
    margin-left: 20px; /* 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: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
    color: #B3B3B3;
    background-color: #FFFFFF; /* Une couleur de fond pour le corps */
    background-image: url(".jpg");
    background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
    border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
    padding: 10px;
    }

    /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

    #pied_de_page
    {
    padding: 10px;
    text-align: center;
    color: #FF0000;
    background-color: #626262;
    background-image: url(".jpg");
    background-repeat: 45;
    border: 2px solid black;
    }

    a
    {
    text-decoration: none; /* Les liens ne seront plus soulignés */
    color: red; /* Les liens seront en rouge au lieu de bleu */
    font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
    }
    a:hover /* Quand le visiteur pointe sur le lien */
    {
    text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
    color: green; /* Le lien sera écrit en vert quand on pointera dessus */
    }

    h1
    {
    text-align: center;
    font-family: "Arial Black", Arial, "Times New Roman", serif;
    text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous Internet Explorer) */
    }
    .souligne
    {
    text-decoration: underline;
    }
    .barre
    {
    text-decoration: line-through;
    }
    .ligne_dessus
    {
    text-decoration: overline;


    • Partager sur Facebook
    • Partager sur Twitter
      28 avril 2006 à 17:58:35

      Salut,

      Peux-tu mettre ton code entre les balises <code type="css"></code> et réexpliquer correctement ton problème car j'ai rien compris.
      • Partager sur Facebook
      • Partager sur Twitter
        28 avril 2006 à 18:22:43

        merci j'ai un copain qui ma dit que c'était préferable de mettre le css sur une page a part et de mettre un code un code ensuite pour que sa l'insére. mais mon probleme je crois que c'est le manu car quand je l'enleve ya le corp et le pied de page mais bon pas la bznniére ni le menu forcément il doit y'avoir un probleme dans le code css mais je ne sais ou.


        merci
        • Partager sur Facebook
        • Partager sur Twitter
          28 avril 2006 à 18:28:08

          Hello !

          Réexplique ton problème calmement, avec des virgules et tout et tout, et là, on comprendra ! ^^
          • Partager sur Facebook
          • Partager sur Twitter
            28 avril 2006 à 18:37:10

            D'accord, donc alors j'ai suivi les cours de css, donc j'ai fais une page de css avec l'aide du cours mais le résultat obtenue est pas vraimeznt le résultat souhaiter, je crois que le probleme viens du menu, car quand j'enleve le code du menu, le corp et le pied de page apparaisse, je sais pas d'ou viens leprobleme sûrement un probleme de code, que je n'arrive pas a identifier pour la feuille de style css reportez vous a ma premiére intervention.Pour répondre a strucky j'ai bien mis mon code entre <code type="css"></code> sa a changer bien changer mais pas spécialement du bon sens, voila j'espere que j'ai était asser claire.

            Merci
            • Partager sur Facebook
            • Partager sur Twitter
              28 avril 2006 à 18:48:36

              Re !

              Alors, tu es sûr que ton corps et ton pieds de page ne sont pas décalés vers le bas de la page plutôt ? Lorsque tu insères ton menu ? :o

              Pour ce qui est de la réponse de Strucky, il te demandait de placer ton code CSS entre les balises <code type="css"></code> sur CE topic, pas dans ton code ! C'est pour que ton code soit plus lisible pour nous ! :p Pour qu'on t'aide quoi !

              Allez, je vais être gentil, je vais le faire ! :ange:


              body
              {
              width: 760px;
              margin: auto; /* Pour centrer notre page */
              margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
              margin-bottom: 20px;/* Idem pour le bas du navigateur */
              background-color: rgb(227,143,17); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
              }

              /* L'en-tête */

              #en_tete
              {

              width: 800px;
              height: 800px;
              background-image: url("images/banniere.png");
              background-repeat: no-repeat;
              margin-bottom: 10px;
              }

              /* Le menu */

              #menu
              {

              float: left;
              width: 170px;
              }

              .element_menu
              {
              background-color: #FFFFFF;
              background-image: url("images/motif.png");


              border: 4px solid blue;

              margin-bottom: 20px;
              }


              /* Quelques effets sur les menus */


              .element_menu h3 /* Tous les titres de menus */
              {
              color: #FF0000;
              font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
              text-align: center;
              }

              .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
              {
              list-style-image: url("puce.gif"); /* On change l'apparence des puces */
              padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
              padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
              margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
              margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
              }

              .element_menu a /* Tous les liens se trouvant dans un menu */
              {
              color: #FF0000;
              }

              .element_menu a:hover /* Quand on pointe sur un lien du menu */
              {
              background-color: #B3B3B3;
              color: black;
              }

              /* Le corps de la page */

              #corps
              {

              margin-left: 20px; /* 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: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
              color: #B3B3B3;
              background-color: #FFFFFF; /* Une couleur de fond pour le corps */
              background-image: url(".jpg");
              background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
              border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
              padding: 10px;
              }

              /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

              #pied_de_page
              {

              padding: 10px;
              text-align: center;
              color: #FF0000;
              background-color: #626262;
              background-image: url(".jpg");
              background-repeat: 45;
              border: 2px solid black;
              }

              a
              {
              text-decoration: none; /* Les liens ne seront plus soulignés */
              color: red; /* Les liens seront en rouge au lieu de bleu */
              font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
              }
              a:hover /* Quand le visiteur pointe sur le lien */
              {
              text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
              color: green; /* Le lien sera écrit en vert quand on pointera dessus */
              }

              h1
              {
              text-align: center;
              font-family: "Arial Black", Arial, "Times New Roman", serif;
              text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous Internet Explorer) */
              }
              .souligne
              {
              text-decoration: underline;
              }
              .barre
              {
              text-decoration: line-through;
              }
              .ligne_dessus
              {
              text-decoration: overline;
              }



              EDIT :
              Je viens de lire ton code CSS (Ok, j'avoue, je l'avais pas encore lu entier ! :D )
              Ton problème vient sûrement du margin-left que tu appliques au corps !
              Regarde...

              Ton menu fait 170 pixels de large vale ?
              Bon...
              Tu appliques une marge à gauche à ton corps de 20 pixels avec le margin-left appliqué au corps pour, je cite : "pousser le corps, afin qu'il ne passe plus sous le menu" !
              Tu vois pas le problème venir ? :)
              Il faudrait que tu appliques une marge a gauche sur ton corps supérieure à la largeur de ton menu pour le "pousser" à droite du menu ! Essaie donc ! ;)

              Du genre :


              #corps
              {

              margin-left: 175px;
              }
              • Partager sur Facebook
              • Partager sur Twitter
                28 avril 2006 à 19:11:27

                merci j'ai vu merci beaucoup mais sinon ma page est beaucoup trop grance sans doute un mauvais réglage je vais regarder sa car le menu ne s'affiche pas et la banniére non plus bon je vous tiens au courant sinon derniére chose je peux pas écrire devant des liens je dois mettre sa dans le corp comment on fait.

                Et encore merci
                • Partager sur Facebook
                • Partager sur Twitter

                aide avec le css

                × 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