Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Design]Gros decalage des bordure

Le texte ne veut pas rentrer.

Soravengeur
    17 juin 2006 à 12:35:29

    Bonjour tout le monde,
    J'ai un gros problème dont je passe 3 jours a essayé de comprendre et a résoudre mais je n'y arrive pas donc je fais appelle à vous.

    Le problème vient du menu, voici une image le montrant bien :
    Problème

    Comme vous pouvez le voir, le texte du menu (site et accueil) ne veut pas se placé en haut, entre les bordure.

    Voici mes codes :

    <!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Bienvenue sur mon site !</title>
           <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
               <link rel="stylesheet" media="screen" type="text/css" title="Parchemin" href="cssdefault.css" />
       </head>
       <body>
            <div id="banniere">
            </div>
           
            <div id="hautfond"></div>
            <div id="coinhautdroite"></div>
            <div id="coinhautgauche"></div>
            <div id="gauchefond"></div>
            <div id="droitefond"></div>
            <div id="basfond"></div>
            <div id="coinbasgauche"></div>
            <div id="coinbasdroite"></div>

    <-- Tout ces div sont pour le fond de la page.--!>

            <div id="menu">
                    <div class="element_menu">

                    <div class="hautmenu">
                    <div class="hautgauchemenu">
                    <div class="hautdroitemenu"></div></div>
                    </div>
                           
                           
                    <div class="gauchemenu">
                    <div class="droitemenu"></div>
                    </div>
    <-- Ces div sont pour les bordures du menu--!>
                           
                            <h2>Site</h2>
                    <ul>
                            <li><a href="accueil.html"> Accueil</a></li>
                    </ul>         
                            <div class="basgauchemenu"><div class="basmenu"><div class="basdroitemenu"></div></div></div>
                           
                           
                    </div>
                           

              
            <div id="corps">
              
               <p>Site en <strong>construction</strong></p>
              
            </div>
           
            <div id="pied_de_page">
                    <p>Copyright : Soravengeur <br/>Désign créé par Soravengeur</p> 
            </div>
           
       </body>
    </html>



    body
    {
       width: 760px;
       margin: auto;
       margin-top: 20px;
       margin-bottom: 20px;   
       background: url("images/centrefond.png") repeat;
    }

    /* L'en-tête */

    #banniere
    {
       width: 760px;
       height: 100px;
       margin: auto;
       text-align: center;
       margin-bottom: 20px;

    }

    /* Le fond de la page avec coin et bordure*/
    #hautfond
    {
            background: url("images/hautfond.png") repeat-x;
            width: 99%;
            height: 102px;
            position: absolute;
            top: 0px;
            left: 0px;
    }
    #coinhautgauche
    {
            background: url("images/hautgauchefond.png") no-repeat;
            width: 108px;
            height: 103px;
            position: absolute;
            top: 0px;
            left: 0px;
    }
    #coinhautdroite
    {
            background: url("images/hautdroitefond.png") no-repeat;
            width: 108px;
            height: 103px;
            position: absolute;
            top: 0px;
            left: 90.90%;
    }
    #droitefond
    {
            background: url("images/droitefond.png") repeat-y;
            width: 116px;
            height: 125%;
            position: absolute;
            top: 103px;
            right: -10px;
    }
    #gauchefond
    {
            background: url("images/gauchefond.png") repeat-y;
            width: 116px;
            height: 125%;
            position: absolute;
            top: 103px;
            left: 0px;
    }
    #coinbasdroite
    {
            background: url("images/basdroitefond.png") no-repeat;
            width: 108px;
            height: 97px;
            position: absolute;
            bottom: -53.6%;
            left: 90.2%;
    }
    #coinbasgauche
    {
            background: url("images/basgauchefond.png") no-repeat;
            width: 125px;
            height: 99px;
            position: absolute;
            bottom: -53.6%;
            left: 0px;
    }
    #basfond
    {
            background: url("images/basfond.png") repeat-x;
            width: 99%;
            height: 102px;
            position: absolute;
            bottom: -55%;
            left: 0px;
            margin: 0px;
    }

    /* Le menu */

    #menu
    {
       float: left;
       margin-top: 20px;
       margin-right : 5px;
       position: absolute;
       left: 20px;
    }

    .element_menu
    {
       background: url("images/parchment_bg.jpg");
       width: 120%;
       margin-bottom: 20px;
       margin-right: 0px;
    }


    /* Quelques effets sur les menus */


    .element_menu h2
    {   
       color: black;
       font-family: Papyrus, Arial, "Arial Black", "Times New Roman", Times, serif;
       text-align: center;
    }

    .element_menu ul
    {
       list-style-type: none;
       padding: 5px;
       padding-left: 8px;
       margin: 0px;
       margin-bottom: 5px;
       text-align: center;
       font-family: Papyrus, Arial, "Times New Roman", Times, serif;
    }

    .element_menu a
    {
       color: black;
    }

    .element_menu a:hover
    {
       color: black;
    }
    .element_menu li:hover
    {
            background: url("images/bouton.png") no-repeat center;
    }


    #corps
    {
       margin-bottom: 20px;
       padding: 5px;
       width: 632px;
       height: 470px;
       overflow: auto;
       background: url("images/interieur.png") no-repeat;
       border: 2px solid black;
       margin: auto;
       font-family: Papyrus, Arial, "Times New Roman", Times, serif;
    }

    #corps h1
    {
       color: black;
       text-align: center;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }
    #corps p
    {
            font-family: Papyrus, Arial, "Times New Roman", Times, serif;
            text-indent: 20px;
    }
    #corps h2
    {
       height: 30px;

       background-image: url("images/titre.png");
       background-repeat: no-repeat;
       
       padding-left: 30px;
       color: black;
       text-align: left;
    }
    #corps ol
    {
            list-style-type: upper-roman;
            font-family: Papyrus, Arial, "Times New Roman", Times, serif;
    }
    #corps a:visited
    {
            color: black;
    }
    #corps a
    {
            color: black;
    }
    .bordure
    {
            border: solid 2px black;
            padding: 20px;
    }
    table
    {
            border-collapse: collapse;
            margin: 5px;
    }
    img
    {
            margin-right: 15px;
    }
    .lettre
    {
            list-style-type: lower-alpha;
    }

    #pied_de_page
    {
       padding: 5px;
       margin: 5px;
       margin: auto;
       text-align: center;
       width: 760px;
       color: black;
       background: url("images/parchment_bg.jpg");
       border: 2px solid black;
       position: absolute;
       bottom: -52%;
    }
    .imagealign
    {
            position: relative;
            top: 0%;
            left: 100%;
    }
    .hautmenu
    {
            background: url("Images/haut.png") repeat-x;
            width: 123px;
            height: 27px;
            position: relative;
            top: 0px;
            left: 0px;
    }
    .hautgauchemenu
    {
            background: url("Images/coinhautgauche.png") no-repeat;
            width: 29px;
            height: 27px;
            position: relative;
            top: 0px;
            left: 0px;
    }
    .hautdroitemenu
    {
            background: url("Images/coinhautdroite.png") no-repeat;
            width: 29px;
            height: 27px;
            position: relative;
            top: 0px;
            right: -120px;
    }
    .basgauchemenu
    {
            background: url("Images/coinbasgauche.png") no-repeat;
            width: 29px;
            height: 27px;
            position: relative;
            bottom: 0px;
            left: 0px;

    }
    .basdroitemenu
    {
            background: url("Images/coinbasdroite.png") no-repeat;
            width: 29px;
            height: 27px;
            position: relative;
            right: -92px;
            bottom: 0px;
    }

    .droitemenu
    {
            background: url("Images/droite.png") repeat-y;
            width: 28px;
            height: 120px;
            position: relative;
            top: 0px;
            right: -120px;
    }
    .gauchemenu
    {
            background: url("Images/cotegauche.png") repeat-y;
            width: 28px;
            height: 120px;
            position: relative;
            top: 0px;
            left: 0%;
    }
    .basmenu
    {
            background: url("Images/bas.png") repeat-x;
            width: 113px;
            height: 27px;
            position: relative;
            bottom: 0px;
            left: 28px;
    }


    Voila, aidez moi :(
    • Partager sur Facebook
    • Partager sur Twitter
    nicmac
    • HTML / CSS
      17 juin 2006 à 23:49:45

      Salutations!
      Ton code est plutôt long et disons qu'inspecter tout ca en détails prendrait du temps, par ailleurs, je peux te proposer une alternative.

      Tu pourrais faire quelque chose de tout simple comme ca:

      <div id="menu">
         <div id="menu_header"><img src="gfx/bordure_haut.png" /></div>
         <div id="menu_content">
            <h2>Site</h2>
            <ul>
               <li><a href="accueil.html">Accueil</a></li>
            </ul>
         </div>
         <div id="menu_footer"><img src="gfx/bordure_bas.png" /></div>
      </div>


      Dans ton CSS tu ajustes la taille de chaque <div> pour que ca marche bien, et pour tes bordures de droite et gauche tu fais quelque chose dans ce style:

      #menu_content
      {
      background-image: url("gfx/bordures.png");
      background-repeat: repeat-y;
      }


      Le désavantage de ce que je te montre, c'est que tout est fixe, et que c'est pas extensible en largeur (contrairement à ta version, j'imagine), mais c'est aussi beaucoup plus simple et un menu avec une largeur fixe, je préfère.

      Bonne chance ^^
      • Partager sur Facebook
      • Partager sur Twitter
      Soravengeur
        18 juin 2006 à 13:47:21

        Le code a l'air si long car il y a à chaque fois les 4 coins qui sont différents + gauche, droite, haut et bas.
        J'ai réussi à trouver une alternative qui je pense est ce que tu propose.
        Je crée un <div class="interieur"> que je dois placer et où ça situera le texte.
        Et ça marche.

        Sinon merci, j'ai pris en compte ce que tu m'as dit ;)
        • Partager sur Facebook
        • Partager sur Twitter

        [Design]Gros decalage des bordure

        × 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