Partage
  • Partager sur Facebook
  • Partager sur Twitter

centrer mon menu sur ma page

    20 novembre 2011 à 21:28:35

    bonjour a tous

    j'ai mon menu sur mon site mais je n'arive pas a le centrer
    je voudrai qu'il se centre automatiquement sur la page du navigateur

    voici le code html de mon menu :

    <html>

    <link rel="stylesheet" href="menu.css" />
    <ul id="menu">

    <li>
    <a href="membre.php">Tchat jjey !!</a>
    </li>

    <li>
    <a href="#">Musiques</a>
    <ul>
    <li><a href="javascript:popup('http://*******.wgs.me/radio','','width=300, height=40,scrollbars=no,resizable=no');">Techno/Hardcore</a></li>
    <li><a href="javascript:popup('http://*******.wgs.me/radio2','','width=300, height=40,scrollbars=no,resizable=no');">Années 80</a></li>
    <li><a href="javascript:popup('http://*******.wgs.me/radio1','','width=300, height=40,scrollbars=no,resizable=no');">Reggae</a></li>
    </ul>
    </li>

    <li>
    <a href="photo.htm">Album photos</a>
    </li>

    <li>
    <a href="#">Téléchargements</a>
    <ul>
    <li><a href="films.htm">Films</a></li>
    <li><a href="musiques.htm">Musiques</a></li>
    <li><a href="#">Logiciels</a></li>
    </ul>
    </li>

    <li>
    <a href="divx.php">Streaming</a>
    </li>

    <li>
    <a href="deconnexion.php">Déconnexion</a>
    </li>

    <li>
    <a href="*****@hotmail.fr">Me contacter</a>
    </li>

    </ul>

    </html>

    et voici mon code css :

    #menu, #menu ul /* Liste */
    {
    padding : 0; /* pas de marge intérieure */
    margin : 0; /* ni extérieure */
    list-style : none; /* on supprime le style par défaut de la liste */
    line-height : 21px; /* on définit une hauteur pour chaque élément */
    text-align : center; /* on centre le texte qui se trouve dans la liste */
    }

    #menu /* Ensemble du menu */
    {
    font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
    }

    #menu a /* Contenu des listes */
    {
    display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 0; /* aucune marge intérieure */
    background : #000; /* couleur de fond */
    color : #fff; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 144px; /* largeur */
    }

    #menu li /* Elements des listes */
    {
    float : left;
    /* pour IE qui ne reconnaît pas "transparent" */
    border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
    }

    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li
    {
    border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
    }

    #menu li ul /* Sous-listes */
    {
    position: absolute; /* Position absolue */
    width: 144px; /* Largeur des sous-listes */
    left: -999em; /* Hop, on envoie loin du champ de vision */
    }


    #menu li ul li /* Éléments de sous-listes */
    {
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
    }

    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li ul li
    {
    border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
    }

    #menu li ul ul
    {
    margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
    }

    /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
    html>body #menu li ul ul
    {
    border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
    }

    #menu a:hover /* Lorsque la souris passe sur un des liens */
    {
    color: #000; /* On passe le texte en noir... */
    background: #fff; /* ... et au contraire, le fond en blanc */
    }

    sfHover = function() {
    var sfEls = document.getElementById("menu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
    {
    left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
    }

    #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
    {
    left: auto; /* Repositionnement normal */
    min-height: 0; /* Corrige un bug sous IE */
    }

    si vous connaisser la methode je suis preneur
    merci
    • Partager sur Facebook
    • Partager sur Twitter
      20 novembre 2011 à 22:55:42

      woooooow le code à pleurer du sang :)

      comment tu fais pour passer de <html> à <link> puis <ul>????

      <html>
      <link rel="stylesheet" href="menu.css" />
      <ul id="menu">


      De grâce!!! y a des gens qui se cassent le popotin pendant des semaines à nous faire des cours plus que respectables et en langage simple lis les!!! tu n'en sera que gagnant ^^
      http://www.siteduzero.com/tutoriel-3-1 [...] -et-css3.html

      sinon (lis le cours)
      tu donnes à ton id #menu l'attribut width:100% et t'es tranquille (lis le cours)
      ou alors tu change ton margin en margin 0 auto
      ce qui permet de centrer ton menu au centre (lis le cours)

      voila (lis le cours) j'espère que ca t'aidera (lis le cours) cordialement (lis le cours) :p
      PS: lis le cours :pirate:
      • Partager sur Facebook
      • Partager sur Twitter
        20 novembre 2011 à 23:33:24

        voici le debut de mon code html que j'utilise
        comme vous pouvez le constater mon premier message ne montre que le menu
        c'etait pour ne pas tous reecrire

        <html>
        <BODY BGCOLOR="black" TEXT="white" LINK="green" ALINK="red" VLINK="blue">
        <BODY BACKGROUND="weed1.jpg" bgproperties="fixed">
        <div align=center>
        <head>
        <title>films</title>
        </head>

        <body>
        <img src="baniere/films.jpg" /></br>
        <font size=+4>Bienvenue sur les Films !!<br /><font size=-0>
        <link rel="stylesheet" href="menu.css" />
        <div id="content">
        <ul id="menu">

        <li>
        <a href="membre.php">Tchat jjey !!</a>
        </li>

        <li>



        etc.....
        je ne suis pas un expert mais plutot debutant
        je suis sur de faire des erreur mais le liens que vous m'avait donner je l'avait lu entierrement
        cela m'a bien aider mais il reste certaine chose qui reste flou
        en ce qui concerne mon menu je l'avait mis en position absolut
        mais en allant sur un autre ordinateur je me suis rendu compte que mon menu n'etait pas bien centrer et que ma page n'etait pas celle voulu (sous internet explorer 9)
        j'ai creer mes pages sur chrome
        voila pourquoi je fais appel a vos conseilles
        • Partager sur Facebook
        • Partager sur Twitter
          21 novembre 2011 à 1:18:40

          je t'explique quelques points si tu permet

          Une page web c'est comme un être humain (oui je sais mes analogies sont débiles)

          il y a des choses que tu vois et d'autres que tu ne vois pas. par exemple quand tu as un ami tu vois son visage, son nez, ses cheveux. mais tu ne vois pas son caractère, sa facon de réfléchir, et encore moins son matériel génétique qui va dicter la couleur des yeux, la tailles, la couleur de peau etc etc.

          dans une page web il y a des choses que tu vois et d'autres que tu ne vois pas et ce que tu ne vois bien qu'il soit invisible pour un simple visiteur, a toujours une raison d'être, une signification.

          l'homme est comme ca (c'est une analogie)

          <homme>
          <ce qu'on ne voit pas>
                  <nom et prénom />
                  <langue />
                  <ADN qui définit ses caractèristiques physiques />
                  <reaction face aux différents évènements de son environnements />
          <fin ce qu'on ne voit pas>
          <ce qu'on voit>
                  <tete>
                          <cheveux />
                          <visages>
                                  <yeux>
                                          <oeil droit />
                                          <oeil gauche/>
                                  <fin yeux>
                                  <nez />
                                  <bouche>
                                          <langue />
                                          <dents/>
                                  <fin bouche>
                          ....
                          ....
                          <fin visages>
                  <fin tete>
                  <plexus />
                  
                  <abdomen>
                          ....
                  <fin abdomen>
                  <bassin />
                  <bas>
                          <cuisse />
                          <genoux />
                          <mollets />
                          <pied />
                  <fin bas>
          <fin ce qu'on voit>
          
          <fin homme>


          la page web c'est presque pareil

          elle suit le même principe; <html> pour dire debut de toute la page et à la fin</html> pour dire fin de toute la page, <head> pour dire début de ce qu'on ne voit pas et </head> fin de ce qu'on ne voit pas et enfin <body> pour dire début de ce qu'on voit dans le navigateur web et </body> fin de ce qu'on voit, le format est donc le suivant

          <html>
          <head>
          	ici on met ce qu'on ne voit pas mais qui agit sur ce qu'on voit comme la définition du titre
          	la langue du site web, le codage, le style de chaque élément, les script pour l'interactivité ou les effets etc
          </head>
          <body>
          	ici on met ce que l'on voit comme les bloc, le texte, les images, les boutons, tableaux, formulaires etc etc etc...
          </body>
          
          </html>
          


          chaque élément est donc défini par une balise, par exemple dans la vrai vie on montrera simplement avec le doigt le début du bras d'un homme et la fin de son bras. donc si par exemple on veut lui faire (je suppose) une opération pour lui mettre un bras robotisé, il faut que le médecin sache ou commence et finisse le bras sinon il risque de changer autre chose

          dans le web c'est pareil on utilise des balises pour dire ou commence et fini chaque élément, le texte qui est en gras s’arrête d'être en gras ou, le tableau commence et fini ou etc etc,
          c'est comme si dans un immeuble, les appartements n'avaient pas de murs de séparation ça serait le chaos

          donc pour revenir à notre histoire de balise qui est en fin de compte un délimiteur,
          une balise est comprise entre le signe inférieur < et le signe supérieur > comme ceci
          <balise>
          il y a des balises simples et des balises doubles,
          une balise double a généralement de l'information en plus qui est inséré, par exemple le salon commence par <salon> ensuite on décrit ce qu'il y a à l'intérieur <fauteuil> <TV> <telephone> etc... puis on fini par </salon>

          un exemple de balise simple, pour définir un mur on se tape de ce qu'il y à l'intérieur du mur on écrira juste <mur /> (et non <mur></mur>)

          Donc pour revenir au web il y a des balises qui permettent de définir ce qu'on ne voit pas et que l'on met (normalement) entre le <head> et </head>
          comme par exemple <title> qui donne le titre du site ou <link> pour attaché des fichiers externe de style ou script
          <style> pour définir un style pour cette page <script> pour définir un script propre a cette page et <meta> qui sont des informations supplémentaire généralement utilisé par les moteurs de recherches pour indexer, crawler et catégoriser ton site

          donc on a ceci

          <html>
          <head>
          	ensemble de balise propre au header <title><link><script><style><meta>
          </head>
          <body>
          	ensemble de balise propre au body (ce qu'on voit sur la page web) <table><div><img><button>etc etc etc
          </body>
          
          </html>
          


          dans ton code a toi si tu regarde bien il y a trois body
          <BODY BGCOLOR="black" TEXT="white" LINK="green" ALINK="red" VLINK="blue">
          <BODY BACKGROUND="weed1.jpg" bgproperties="fixed">
          <body>

          c'est comme si tu disais qu'un type avait 3 têtes :)
          et tu as cette partie

          <BODY BGCOLOR="black" TEXT="white" LINK="green" ALINK="red" VLINK="blue">
          <BODY BACKGROUND="weed1.jpg" bgproperties="fixed">
          <div align=center>

          qui est entre <html> et <head>
          ce qui est faux!!!
          et ce qui est bizarre c'est que le code que tu utilise n'est pas du cours de matteo je ne me rappel pas avoir vu un attribut écrit en majuscule

          Mon ami j'insiste reprend les bases du tuto du site du zero et relis le autant de fois qu'il le faut sin

          • Partager sur Facebook
          • Partager sur Twitter
            21 novembre 2011 à 4:22:53

            Oui ou, une page web c'est comme la carrosserie d'une voiture. Le code source est l'intérieur de la voiture(le mécanisme).
            • Partager sur Facebook
            • Partager sur Twitter
              21 novembre 2011 à 11:43:54

              benfarhat > ton analogie est superbe (et pas débile du tout) ! C'est très juste et poétique. Bravo :3
              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                21 novembre 2011 à 11:46:16

                tout pareil qu'AkaiKen. C'est loin d'être débile !
                • Partager sur Facebook
                • Partager sur Twitter

                centrer mon menu sur ma page

                × 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