Partage
  • Partager sur Facebook
  • Partager sur Twitter

Design extensible.

Problème de menus.

Scanari85
    17 septembre 2006 à 19:08:54

    Bonjour,

    J'ai créé un site, et j'ai décidé de le rendre extensible ety de rajouter un menu à gauche comme celui de droite.

    J'arrête pas de me prendre la tête avec ce fichu design, j'ai beau essayé plusieurs trucs rien ne marche. :colere2: Alors je fais appel à vous. :)

    Voici un screen du design fixe :

    http://img131.imageshack.us/img131/7741/fixe1jp7.jpg

    Et le voici en extensible :

    http://img318.imageshack.us/img318/8366/extensible1ph5.jpg

    Je ne comprend pas pourquoi les menus sont comme ça, voici mon css :

    body
    {
    background:#fff;
    color:#000;
    font-size:11px;
    font-family:verdana;
    margin-left:5%;
    margin-right:5%;
    background:url(images/px.gif);
    }

    #global
    {
    background:#fff;
    width:auto;
    margin:auto;
    border:1px solid #000;
    border-top:none;
    border-bottom:none;
    position:relative;
    }

    #banniere
    {
    background:url(images/banniere.jpg) no-repeat;
    height:120px;
    }

    #banniere a
    {
    text-decoration:none;
    color:#000;
    font-size:16px;
    font-weight:bold;
    position:absolute;
    left:10px;
    top:83px;
    font-family:arial;
    }

    #banniere a:hover
    {
    color:#907763;
    }

    .header
    {
    text-align:center;
    background:url(images/header.jpg) repeat-x;
    border-bottom:1px solid #000;
    border-top:1px solid #000;
    height:17px;
    line-height:17px;
    padding-right:5px;
    padding-left:5px;
    }

    .header a
    {
    text-decoration:none;
    color:#000;
    }

    .header a:hover
    {
    color:#907763;
    text-decoration:underline;
    }
    #menu1
    {
    border-right:1px solid #000;
    border-left:none;
    width:15%;
    background-color:#fff8f2;
    float:left;
    padding-bottom:0px;
    margin-bottom:0px;
    }

    #menu1 h1
    {
    margin:0px;
    margin-bottom:5px;
    margin-top:5px;
    font-size:13px;
    text-align:center;
    height:18px;
    line-height:18px;
    background:#e7e2de;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    }

    #menu1 a
    {
    padding-left:3px;
    position:relative;
    display:block;
    text-decoration:none;
    color:#000;
    height:15px;
    line-height:15px;
    background:#fff8f2;
    border:1px solid #fff8f2;
    width:0px;
    margin:auto;
    }
    #menu2
    {
    border-left:1px solid #000;
    border-right:none;
    width:15%;
    background-color:#fff8f2;
    float:right;
    padding-bottom:0px;
    margin-bottom:0px;
    }

    #menu2 h1
    {
    margin:0px;
    margin-bottom:5px;
    margin-top:5px;
    font-size:13px;
    text-align:center;
    height:18px;
    line-height:18px;
    background:#e7e2de;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    }

    #menu2 a
    {
    padding-left:3px;
    position:relative;
    display:block;
    text-decoration:none;
    color:#000;
    height:15px;
    line-height:15px;
    background:#fff8f2;
    border:1px solid #fff8f2;
    width:0px;
    margin:auto;
    }

    #centre
    {
    margin-left:none;
    margin-right:none;
    width:60%;
    border-right:1px solid #000;
    border-left:1px solid #000;
    padding-bottom:5px;
    margin-top:5px;
    }

    #centre h1
    {
    font-weight:normal;
    margin-top:10px;
    margin-bottom:10px;
    border-bottom: 1px solid #e3dbd4;
    font-size: 20px;
    font-family: Trebuchet MS;
    color: #631;
    }

    #centre h2
    {
    margin-top:5px;
    margin-bottom:5px;
    font-size:12px;
    background:#efeae6;
    border:1px solid #fff;
    border:1px solid #d3c6bc;
    padding:2px;
    }

    #centre h3
    {
    margin-top:5px;
    margin-bottom:5px;
    font-size:11px;
    background:#efeae6;
    padding:1px;
    }

    #centre a
    {
    text-decoration:none;
    color:#7c7769;
    }

    #centre a:hover
    {
    color:#907763;
    text-decoration:underline;
    }

    #footer
    {
    clear:both;
    position:center;
    }


    Et mon code xhtml :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
            <head>
                    <title>Bocundji-Ca, le site non-officiel</title>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                    <link href="design.css" rel="stylesheet" type="text/css" />
            </head>
    <body>
            <div id="global">
                   
                    <div class="header">
                            <span style="float:right">
                                    <a href="http://www.scanari85.rf.lv/accueil.php">Accueil</a> |
                                    <a href="http://www.scanari85.rf.lv/forum/">Forum</a> |
                                    <a href="http://www.scanari85.rf.lv/contacts.php">Contacts</a> |
                                    <a href="http://www.scanari85.rf.lv/partenariat.php">Partenariat</a> |
                                    <a href="http://www.scanari85.rf.lv/remerciements.php">Remerciements</a>
                            </span>
                    </div>
                   
                    <div id="banniere">
                    </div>
                   
                    <div class="header">Bonjour et bienvenue sur le site non-officiel de Bocundji Ca, joueur du FC Nantes !</div>
                   
                    <div id="menu1">
                    <h1>Bocundji Ca</h1>
                            <a href="http://www.scanari85.rf.lv/portrait.php">Son portrait</a>
                            <a href="http://www.scanari85.rf.lv/parcours.php">Son parcours</a>
                            <a href="http://www.scanari85.rf.lv/photos.php">Galerie photos</a>
                            <a href="http://www.scanari85.rf.lv/presse.php">Revues de presse</a></div>
                    <div id="menu2">
                    <h1>Bocundji Ca</h1>
                            <a href="http://www.scanari85.rf.lv/portrait.php">Son portrait</a>
                            <a href="http://www.scanari85.rf.lv/parcours.php">Son parcours</a>
                            <a href="http://www.scanari85.rf.lv/photos.php">Galerie photos</a>
                            <a href="http://www.scanari85.rf.lv/presse.php">Revues de presse</a></div>
                   
                    <div id="centre">Aucune revues de presse n'est disponible pour le moment, pour toutes revues que vous pouvez nous faire parvenir, merci de vous adressez à Scanari85 par messages privés.<br />
    Merci pour votre aide.<br /><br /><p align="center"><img src="http://www.scanari85.rf.lv/images/bocundjiaction2.jpg" alt="Bocundji"></p></div>
                   
                   
                    <div id="footer"></div>
                    <div class="header">Copyright © 2006 <a href="http://www.scanari85.rf.lv/">Bocundji-Ca, le site non-officiel</a> - Design by <a href="http://www.scanari85.rf.lv/contactscanari85.php">Scanari85</a> - Tous droits réservés.</div>
                   
            </div>

    </body>
    </html>


    • Partager sur Facebook
    • Partager sur Twitter
    Scanari85

    Design extensible.

    × 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