Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probleme design

désolé je sais pas exprimer mon problème en un titre ^^

Sujet résolu
legende
    15 avril 2006 à 14:26:20

    Hello,

    Voilà en fait j'suis en train de coder le design d'un site. Et comme vous vous en doutez j'ai un problème :p. J'ai essayé de faire un bord arrondi sans table et j'y suis arrivé (la page ici).

    Seulement vous voyez le bord gauche, il ne se répete pas comme le div d'à côté, je suis obligé de lui donné une valeur en pixel, et je ne peux pas prédire la longeur des news que je vais y mettre.

    Voila les bouts de codes (qui vous sont le plus utile):


        <div>
            <div class="corner"><img src="corn.gif" alt="" /></div>
            <div class="top"></div><br />
            <div class="left"></div>
            <div class="texte">   
            <object type="application/x-shockwave-flash" data="bienvenue.swf" class="bienvenue">
            <param name="movie" value="bienvenue.swf" />
            </object> <br /><br />Bla <br />Bla <br />Bla <br />Bla <br />Bla</div>
        </div>



    .top
    {
    width: 81.5%;
    height: 16px;
    margin-top: 4px;
    float: left;
    background: url('top.gif') repeat;
    }

    .corner
    {
    margin-top: 1px;
    width: 17px;
    height: 16px;
    float: left;
    }

    .left
    {
    width:  17px;
    height: 446px;
    float: left;
    background: url('left.gif') repeat;
    }

    .texte
    {
    width: 81.5%;
    float: left;
    background-color: #bb9d5d;
    }

    .bienvenue
    {
    width: 360px;
    height: 400px;
    }


    Aidez moi s'il vous plait :).

    Personne ..?
    • Partager sur Facebook
    • Partager sur Twitter
    legende
      16 avril 2006 à 14:38:36

      Up :(
      Personne pour me donner un début de piste ?
      • Partager sur Facebook
      • Partager sur Twitter
      legende
        17 avril 2006 à 14:00:19

        Allez dernier up et je laisse tomber.
        • Partager sur Facebook
        • Partager sur Twitter
        legende
          18 avril 2006 à 11:44:36

          Allez quoi ...

          Pourtant ca a l'air pas très difficile ce que je demande...
          • Partager sur Facebook
          • Partager sur Twitter
          legende
            19 avril 2006 à 10:26:30

            Please!
            Por favor!
            • Partager sur Facebook
            • Partager sur Twitter
            Hawks
              19 avril 2006 à 10:32:08

              Regarde sur le site alsacreation, ils ont une méthode pour faire les tableaux arrondis (à base de :before et :after)
              • Partager sur Facebook
              • Partager sur Twitter
              jp949
                19 avril 2006 à 10:35:13

                il faut que tu coupes ton image en 2 parties une avec le bord arrond 20px X 20px que tu palces en haut a gauche et une de 10px X 1px qui se repete sur la hauteur.
                comme ca tu fixe pas une hauteur a ton div news tu le laisse en auto il s'agrandira avec le contenu
                • Partager sur Facebook
                • Partager sur Twitter
                DeaX
                  19 avril 2006 à 11:04:07

                  voila j'ai trouvé !

                  alors le xHTML :

                      <div>
                          <div class="corner"></div>
                          <div class="top"></div>
                          <div class="texte">
                                          <div class="left">
                                                  <object type="application/x-shockwave-flash" data="bienvenue.swf" class="bienvenue">
                                          <param name="movie" value="bienvenue.swf" />
                                                  <br />Bla <br />Bla <br />Bla <br />Bla <br />Bla
                                          </div>
                                  </div>
                      </div>


                  Et le CSS :

                  .top
                  {
                          width: 81.5%;
                          height: 16px;
                          margin-top: 4px;
                          float: left;
                          background: url('top.gif') repeat;
                  }

                  .corner
                  {
                          margin-top: 4px;
                          width: 17px;
                          height: 16px;
                          background: url('corn.gif') no-repeat;
                          float: left;
                  }

                  .texte
                  {
                          width: 81.5%;
                          float: left;   
                          background-color: #bb9d5d;
                  }

                  .left
                  {
                          background: url('left.gif') repeat-y left;
                          width: 17px;
                          padding-left:17px;
                  }

                  .bienvenue
                  {
                          width: 360px;
                          height: 400px;
                  }


                  Voila !
                  • Partager sur Facebook
                  • Partager sur Twitter
                  legende
                    19 avril 2006 à 13:16:05

                    Ca marche !!

                    Je te remercie infiniment !!

                    *check*
                    • Partager sur Facebook
                    • Partager sur Twitter
                    DeaX

                    Probleme 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