18067 sujets

Questions générales et questions de débutants

Le menu qu'il ménerve !! Il m'énerve je vous dis !!!

Bonjour à tous, toujours en étude sur le CSS, je continue mon brouillon de site pour le faire avancer vers une éventuelle version finale ... un jour ... dans 150 ans.

Mon problème du jour, c'est le menu.
Je n'arrive pas à trouver le moyen de le centrer ce bougre.
Quelque chose m'échappe ... mais quoi donc ? Si vous pouvez m'aider à trouver ce que ça peut être, j'en serais ravi. Smiley smile

Voila ma fiche de Style : 

BODY       {
    font-family:verdana;
    color: #000000;
    background-color:#D8DFEB;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    width: 800px;
}

A:link      {  text-decoration:none;
               color: #000000;
               font-weight: bold    }
A:visited   {  text-decoration:none;
               color: #000000;
                   font-weight: bold    }
A:active    {  text-decoration:none;
               color: #000000;
           font-weight: bold    }
A:hover     {
    text-decoration:overline
    color: #00000;
    font-weight: bold
}


b           {  color: #000000       }
strong      {
    color: #000000;
    text-align: left;
    }


.hautpage {
    position:relative;
    text-align:center;
    font-size:11pt;
    height:100px;
    background-image: url(Images/Interface/Haut.png);
    background-repeat: no-repeat;
    line-height: 1.9;
    font-family: tahoma,arial,helvetica,"bitstream vera sans",sans-serif;
    color: #000000;
    background-color: #D8DFEB;
    }
    
    .hautpage02 {
    position:relative;
    width: 800px;
    height:32px;
    background-color:transparent;
    }
    
    .menu {
    position:relative;
    background-color:transparent;
    height:69px;
    width: 800px;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    text-align:center;
    }
    
    .vide {
    position:relative;
    font-size:11pt;
    height:20px;
    width: 800px;
    background-color:#a8b9d2;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    }
        .vide2 {
    position:relative;
    background-color:transparent;
    height:69px;
    width: 800px;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    text-align:center;
    }
    
        .pth01 {
    position:relative;
    background-color:transparent;
    background-image:url(Images/Interface/petit-haut-01.gif);
    height:69px;
    width: 800px;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    }
    
.pth02 {
    position:relative;
    background-color:transparent;
        background-image:url(Images/Interface/petit-haut-02.gif);
    height:69px;
    width: 800px;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    }
    
    .pth03 {
    position:relative;
    background-color:transparent;
    background-image:url(Images/Interface/petit-haut-03.gif);
    height:69px;
    width: 800px;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    }

.shoutbox {
    position:relative;
    text-align:center;
    background-image:url(Images/Interface/Edito/Chat-box-fond.png);
    background-color:#a8b9d2;
    height:230px;
    width: 800px;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    }
    
.contenu {
    position:relative;
    width: 790px;
    padding-left:10px;fr
    padding-right:10px;
    margin-left:auto;
    background-image:url(Images/Interface/rat2.jpg);
    font-family:Verdana;
    font-size:10px;
    font-weight:bold;
    text-align: left;

    }

.piedpage {
    margin-left:auto;
    position:relative;
    height:40px;
    background-image: url(Images/Interface/Bas.png);
    background-color: #D8DFEB;
    }#


Voila la fiche de style de mon menu :

ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
li {
 float:left; /*pour IE*/
 border-left:1px solid black;
 }
ul li a {
 display:block;
 float:center;   
 width:100px;
 line-height:50px; /*hauteur de l'image de fond*/
 background:black url(images/noir-1.png) repeat-x;
 color:#DCDCDC;
 text-decoration:none;
 text-align:center;
 }
ul li a:hover {
 background:black url(images/noir-2.png) repeat-x;
 color:white;
 }


Et pour finir voila le code source de ma page : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="../style.css"/>
<link rel="stylesheet" type="text/css" href=" menu/menu_style.css"/>

</head>
<body>

<!-- Haut de page -->  
<div class="hautpage"></div>
<div class="menu"><ul id="menu"><li><a href="Edito.html" title="Edito">Edito</a></li>
    <li><a href="Galerie.html" title="Galerie">Galerie</a></li>
    <li><a href="#" title="Archives">Archives</a></li>
    <li><a href="#" title="Contact">Contact</a></li>
</ul></div></div>


<!-- Haut de page2 --> 
<div class="hautpage2"><img src="../Images/Interface/Edito/bas-entete.png" width="800" height="32" /></div>

<!-- Entête -->
<div class="pth01"></div>

<!-- Zone de contenu -->
<div class="contenu">
    <br />
    <table width="135" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20"><img src="../Images/Interface/Edito/icon_edit.gif" width="16" height="16" /></td>
        <td width="80">03-10-2010</td>
        <td width="35"><img src="../Images/Interface/Edito/icones/2010/04.gif" alt="" width="33" height="20" /></td>
      </tr>
    </table>
    <p>Alors  que je passe des heures à me creuser la tête sur  le CSS afin de donner<br />
      enfin vie à ce site idiot, j'ai en arrière plan une musique endogène qui brasse sans cesse.<br />
      Heureusement pour moi, elle est issue d'une vidéo formidable qui relate l'incroyable<br />
      aventure de deux amis qui nagent dans le bonheur.
    Si cela me touche particulièrement,<br />
    c'est simplement parce que de nombreuse fois j'ai pu avoir l'occasion de vivre la même chose.<br />
    Outre bien entendu la chute, que j'aurais sans hésitation troquée contre toutes les heures<br />
    que j'ai pu vivre dans ces parcs de jeux pour enfants.
    </p>
    <table width="125" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="../Images/Interface/Edito/icones/2010/Video-Bulle-01.gif" width="580" height="51" /></td>
      </tr>
      <tr>
        <td><object width="580" height=fr"360"><param name="movie" value="http://www.youtube.com/v/uwAxwApjOTo?fs=1&amp;hl=fr_FR&amp;rel=0&amp;color1=;color2=0x6b8ab6&amp;border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/uwAxwApjOTo?fs=1&amp;hl=fr_FR&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="360"></embed></object></td>
      </tr>
    </table>
    <p><br />
    <img src="../Images/Interface/Edito/sepa.png" alt="" width="800" height="1" /></p>
    <table width="115" border="0" cellspacing="0" cellpadding="0">
<tr>
            <td width="14"><img src="../Images/Interface/Edito/icon_edit.gif" width="16" height="16" /></td>
            <td width="78">02-10-2010</td>
            <td width="23"><img src="../Images/Interface/Edito/icones/2010/03.gif" width="24" height="24" /></td>
          </tr>
</table>
    <br />    Le plus difficile au travail !<br />
        Certains courent comme des dératés vers une efficacité sans faille. <br />
        Pour beaucoup, les moments creux sont ceux qui imposent l'inaction, <br />
        tuent la productivité, forcent le corps à rester en position assise.<br />
        Incapables d'affronter le pire adversaire de la rentabilité, <br />
        trop de personnes vont jusqu'à s'inventer du travail. <br />
        Affiner le rangement, classer ce qui est déjà classé. Recalculer, revérifier, relire, retravailler ! ...<br />
        Moi, j'ai la chance d'avoir internet sous le clic et pas un seul atome de compassion <br />
        envers le monde du travail.<br />
        Alors c'est volontairement que je cherche le moment creux de la journée. <br />
      Une fois que je le tiens, je le remplis avec WORMFOOD ... !<br />
      <br />
    <table width="124" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="124"><a href="http://www.nitrome.com/games/wormfood/" target="droite"><img src="../Images/Interface/Edito/icones/2010/Jeu-Bulle-01.gif" width="267" height="147" border="0" /></a></td>
          </tr>
    </table>
<p><img src="../Images/Interface/Edito/sepa.png" width="800" height="1" /></p>
        <table width="135" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="20"><img src="../Images/Interface/Edito/icon_edit.gif" width="16" height="16" /></td>
            <td width="80">01-10-2010</td>
            <td width="35"><img src="../Images/Interface/Edito/icones/2010/02.png" alt="" width="32" height="32" /></td>
          </tr>
        </table>
        <br />
C'est la rentrée !<br />
Je me retrouve avec sur les bras un site tout moche, tout   dépouillé, <br />
sans un brin de programmation, juste parce que je suis un   gros   mauvais. <br />
Qu'importe, autant lancer quelque chose, et lui donner   forme   au fur et à mesure. <br />
Mais c'est là le cadet de mes soucis à dire   vrai. Il y a bien pire que cela.<br />
l'ambiance d'Octobre elle, est bien plus forte que la   masse de travail virtuelle qui m'attend. <br />
J'entend de là les braillements de désespoir des petits enfants   que   les écoles arrachent <br />
sans pitié aux bras de leurs parents. La   fatigue   condensée pour l'année des collégiens,<br />
frustrés de l'inefficacité     évidente de leur lotion Biactol. <br />
La rage des lycéens, prêt à en découdre contre le système,<br />
en y     opposant de farouches grèves aux arguments stériles. <br />
L'amertume des     grands, de retourner au travail après avoir sabordé leur compte en     banque <br />
sur les plages ou dans les campagnes profondes. La tête pleine de     souvenirs, de bons moments, <br />
et une petite pointe de nostalgie qui   nous   confirme sans détour que ... Ouais ! <br />
C'était Putain de bien les vacances !
  </p>
  <br />
  <br /></td>
</div>


<!-- Zone vide pour raccourcis archives edito -->
<div class="vide"><img src="../Images/Interface/Edito/sepa.png" width="800" height="1" border="0" /><a href="Archives/Edito/Editos.html"><img src="../Images/Interface/Archives/ico.png" width="139" height="20" border="0" /></a></div>

<!-- Zone de la shoutbox -->
<div class="shoutbox"><!-- Debut shoutbox -  http://www.i-tchat.com  -->
<iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=60724" width="400" height="230" frameborder="0" allowtransparency="true" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="http://www.i-tchat.com" onClick="window.open(this.href+'?60724');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
<!-- Fin shoutbox --></div>

<!-- Zone pied de page -->
<div class="piedpage"></div>

</body>
</html>


Alors oui j'ai codé comme un cochon. Je suis graphiste moi, pas codeur !
Si vous voyez des incohérence, des éléments à modifier, n'hésitez pas.
En outre, expliquez moi pourquoi et comment, comme si vous vous adressez à un Galet qui venait tout juste de passer au stade Humain.

Votre aide m'est très précieuse, bien plus que tous ces tutos que j'ai pu croiser Smiley smile

Par avance je vous remercie. Smiley smile
Hello,
Un petit bout de code HTML ne serait pas de refus...
Ou mieux, une page ou voir le problème, mais je pousse peut être un peu? Smiley cligne
Modifié par vdo93 (08 Oct 2010 - 11:24)
Re,
Alors déjà sorry j'avais pas vu qu'il y avait aussi du html dans ce que tu avais envoyé...enfin, c'est quand meme mieux de voir directement.

Donc,
Il faut que tu donnes une taille à ton "ul" , puis que tu lui ajoutes "margin:auto" et le tour est joué.
La taille doit etre de 4*100 (taille des "a") + 5 (bordures des "li") soit "width:405px"

A+
Modifié par vdo93 (08 Oct 2010 - 11:38)
Alors voila dans ma fiche de style ce qui correspond à la box de mon menu : 

    .menu {
    width: 800px;
    background-color:#a8b9d2;
    height:69px;
    margin-left: auto;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    }


Voila ce que j'ai déterminé pour l'ul dans la fiche de style du menu :

ul {
 width:405px;
 padding:0px;
 margin:auto;
 list-style-type:none;
 }


Et voila le ... résultat Smiley smile http://octokom.free.fr/HTML/Edito.html
Oui c'est normal.
Mais moi je me suis basé sur le site que tu m'avais envoyé.
La, tu as changé la taille de tes liens alors forcément, il faut que tu agrandisses la taille de ton ul...
je mettrai un padding left de 200px à ta classe .menu à régler au plus précis en fonction de ta largeur de bouton et ne pas oublier de mettre ta largeur de menu à 600 pour arriver à 800 px.
Modifié par micromaniac (08 Oct 2010 - 14:46)
Sujet clos
Aller à