Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mise en page CSS

Dur dur pour debuter !

    18 juillet 2006 à 15:18:15

    Bonjour, je suis debutant en css, et cela fait un bon moment que je galére pour faire la mise en page de mon site. je voudrais obtenir ceci ( des images parlant plus que des mots...): Image utilisateur
    Je ne cherche pas forcement a ce que l'on me donne un code tout fait, je voudrai comprendre comment cela fonctionne. (je ne sais pas quels type de blocs utiliser a quel moment par exemple (div/span/class/etc...), et je m'embrouille dans le positionnement des blocs)

    Merci pour vos réponses :)
    • Partager sur Facebook
    • Partager sur Twitter
      18 juillet 2006 à 16:12:53

      bon déja pour centrer ta page, tu utilise ça :
      body
      {
      margin: auto;
      }

      apres tu utilises un div avec un id pour chaque "bloc" comme ceci : (si tu es plus expérimenté, tu peux aussi utiliser des tableau à la place des divs)

      Image utilisateur

      et là tu fais ton css comme ça :
      body
      {
      margin: auto;
      }
      #banniere
      {

      background-image: url("banniere.png"); /*l'image de ta bannière*/
      background-repeat: no-repeat;/*l'image ne se répète pas*/
      width: Xpx; /* X étant la longueur de ta bannière en pixels*/
      height: Ypx; /* Y étant la largeur de ta bannière en pixels */
      }
      #logo
      {

      float: left; /* logo flotte à gauche */
      width: /* tape la taille de ton logo en pixels*/ px;
      }
      #news
      {

      /* ce que tu veux */
      }
      #news_1
      {

      /* pareil */
      }
      #news_2
      {

      float: right; /* flottant à droite */
      }
      #news_3
      {

      float: right; /*flottant à droite */
      }

      voila c'est le code de base y'a pas de couleur, y'a rien c'est juste pour te guider ;)
      • Partager sur Facebook
      • Partager sur Twitter
        18 juillet 2006 à 16:50:28

        Merci pour ta réponse, je commence a comprendre un peu mieux le fonctionnement :)

        Par contre, je n'arrive toujours pas a centrer ma page, les margin: auto ne fonctionne pas on dirait :/

        Aurais tu une idée d'ou cela peu venir ?
        • Partager sur Facebook
        • Partager sur Twitter
          18 juillet 2006 à 20:34:28

          peut-etre de ton navigateur. qu'est-ce que tu utilises ?
          Sinon met ça
          body
          {
          text-align: center;
          }

          à la place de
          body
          {
          margin: auto;
          }

          ça devrait marcher ;)
          • Partager sur Facebook
          • Partager sur Twitter
            18 juillet 2006 à 20:39:03

            Citation : craac

            Merci pour ta réponse, je commence a comprendre un peu mieux le fonctionnement :)

            Par contre, je n'arrive toujours pas a centrer ma page, les margin: auto ne fonctionne pas on dirait :/

            Aurais tu une idée d'ou cela peu venir ?



            Il faut y ajouter la taille :

            body
            {
            width: X%;
            margin: auto;
            }


            Je deconseille fortement le text-align: center; pour ça, ce n'est pas fait pour.
            • Partager sur Facebook
            • Partager sur Twitter
              18 juillet 2006 à 20:41:42

              Citation : M@teo21

              N'oubliez pas, je le dis et je le répète, que le margin:auto ne peut fonctionner que si vous avez indiqué une largeur précise pour votre block !


              Répétons-le une fois de plus ;)
              Secret (cliquez pour afficher)
              body
              {
              width: 700px (ou 70%)
              margin: auto;
              }


              <edit> grilled xD c'était le temps d'aller chercher la citation.. </edit>
              • Partager sur Facebook
              • Partager sur Twitter
                18 juillet 2006 à 20:47:50

                ah bah ouai j'avais oublié ça.
                Je suis un zér0 !!
                • Partager sur Facebook
                • Partager sur Twitter
                  20 juillet 2006 à 14:15:55

                  Merci encore à tous pour votre aide, aprés quelques traficatage de code, voici le resultat : Site de la MJC de L'Union (devant partir en vacances demain, je n'ai pas mis les 2 boites d'en bas a droite)

                  Bien sur, ce n'est pas parfait, surtout au niveau du code qui je pense doit pas etre top. Le rendu me convient (c'est le principal) sauf pour une chose : dans Internet Explorer (pas de pb avec Firefox), lorsque l'on change la taille de la fenetre, la banniére s'aligne en bas du logo, laissant ainsi un grand vide tout blanc (bouhh c'est pas beau !!), y'a t'il un moyen d'eviter cela ?

                  Si jamais vous voyez des defauts, dites-le aussi, cela m'aidera ;)
                  • Partager sur Facebook
                  • Partager sur Twitter
                    22 juillet 2006 à 15:05:15

                    les flottans ne fonctionnent pas sur IE...
                    C'est vraiment un logiciel à bannir
                    • Partager sur Facebook
                    • Partager sur Twitter
                      22 juillet 2006 à 18:17:37

                      Oui IE a vraiment du retârd..
                      Et moi-même n'arrive pas à comprendre pourquoi certaines personnes naviguent encore avec. :(
                      • Partager sur Facebook
                      • Partager sur Twitter
                      "J'voulais faire, de grandes études j'ai les attitudes..." Meugiwarano, né en 3015 dans un monde lointain de la terre... www.maitre-gims.fr

                      Mise en page 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