Codage design (le menu)

aigle21 -  
Salut, je suis en train de faire un site, sauf que je suis presser (a finir demain sans doute ...) et je bloque sur un truc depuis une semaine ^^ , j'ai chercher mais rien a faire, en lisant les tutos je trouve pas :'(

alors voila un exemple

http://img512.imageshack.[...]designessaieoz0.png

donc a gauche bah il y a 2 menu , avec les boutons déjà, mais c´est pas du code (juste une image ...) donc j´aimerais pouvoir mettre ces bouton au meme emplacement garce au css ou html , et faire un effet de passage de souris (le bouton change de couleur ) , et ensuite metttre le titre de chaque bouton

voila j´espere que je me suis fais comprendre car la je peux pas mieu expliquer :s

voila le code ^^
mon premier bouton se situe dans le dossier images/bouton.png
l´effet se situe en images/rollovers.png
et je crois que c´est tout ce qu´il faut savoir (pour le titre des menus bah ca faut mettre n´importe quoi, histoire que je puisse tout retoucher pour apprendre ...

^^ en tout cas merci si quelqu´un me le fait car la je desespere :(

body
{
width: 800px;
height: 820px;
background-color: white;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

#conteneur
{
width: 790px;
height: 810px;
background-image: url("images/conteneur.png");
margin-bottom: 10px;
margin-top: 10px;
}

#en_tete
{
width: 780px;
height: 130px;
background-image: url("images/header.png");
margin: auto;
}

#menu1
{
width: 175px;
height: 275px;
background-image: url("images/menuaccueil.png");
margin-left: 2px;

}

#menu2
{
width: 175px;
height: 275px;
background-image: url("images/menuleclub.png");
margin-left: 2px;
margin-top: 3px;

}

#corps
{
margin-left: 185px;
margin-bottom: 20px;

}

PS : je n´arrive pas non plus a placer le corps a droite du menu, il reste toujours en dessous, et les float ne marchent pas o_0

j´ai juste réussis a metre un bouton ,sauf que je ne sais pas comment faire pour le déplacer :´( et pour mettre le roollovers , voila le code de ce que j´ai fais .....

<div id="menu2">
<img src="images/bouton.png" width="127" height="25" border="0" usemap="#map" />

<map name="map">
<area shape="rect" coords="2,1,125,24" onmouseover="images/rollovers.png" onmouseout="images/rollovers.png" onfocus="images/rollovers.png" href="
http://badminton42.free.fr/forum" />
</map>

</div>

c'est ce que j'ai fais ..... j'espère l'etre fais comprendre ....

Merci a celui qui saura m'expliquer, ou qui le fera, mais en m'expliquant ^^

Bonne soirée.
Configuration: Windows XP
Firefox 2.0.0.6

25 réponses

Résumé de la discussion

Le sujet porte sur reproduire deux boutons de menu alignés et ajouter un effet rollover au passage de la souris, tout en positionnant le corps du contenu à droite. Des conseils préconisent d’utiliser CSS plutôt qu’images actives pour aligner les menus avec des floats et des listes et changer la couleur au survol via :hover. Les échanges proposent d’éviter les maps HTML et d’opter pour des liens structurés en ul/li afin de maîtriser l’espace, les marges et l’alignement des boutons, avec des exemples concrets de code. En complément, il est souvent recommandé d’utiliser des styles CSS appliqués directement sur les éléments de navigation et de prévoir des espacements entre les boutons pour éviter qu’ils ne se décalent.

Bobot (l’IA à votre service)
  1. Gihef Contributeur
    Bonjour,

    Plutôt qu'un lien invalide vers une image, le mieux serait que tu nous donnes le code de la page ou, mieux, son adresse.
    Est-ce que celle-là est la bonne ?

    + Vois :
    http://css.alsacreations.com/Construction-de-menus-en-CSS/
    http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant

    Et pour présenter ton code, chosis le bouton [code].
    1. aigle21
      Oui c'est bien ce site. (désolé je n'avais pas fais attention :s)

      Je vais de suite lire les page :P

      Je reviendrais avec des morceaux de codes :)

      Merci
      1. aigle21
        Bon bah j'ai encore rien trouver, ^^ , je sais je suis nul , mais j'ai essayer les bout de code , mais a pars reussir a mettre 4 lien, positionner n'importe comment et sans bouton derrier , bah .....

        Bref , me reste 2 jours,et après j'abandonne, en 1 moi j'aie meme pas été fichu de faire un menu.
        1. Gihef Contributeur
          En 1 h 15, tu n'a pas modifié ton menu sous forme de liste ?
          Alors, laisse ça pour l'instant.

          Tu vas trop vite.
          Tu devrais commencer par positionner tes blocs !
          C'est de là qu'il faut que tu partes. Et que tu avances étape par étape.
          Une piste. Essaye les 3 colonnes en “float”. Si tu n'aimes pas, essaye-les en “absolute”.

          Ensuite, seulement ensuite, tu créeras les menus.

          Allez, courage.

          + Quand tu auras fait ça, je te donnerai un menu, avec tes images.
          1. Gihef Contributeur
            Je me rends compte que j'ai peut-être été un peu rapide.
            Si tu veux de l'inspiration :
              css place d un script sur page web
              http://css.alsacreations.com/modeles/modele5.htm
            Par exemple.
        3. aigle21
          ^^ en 1 semaine je n'ai rien fais, c'est le resultat d'un moi ce que tu vois a l'heure actuel xD

          Bref je vais faire la liste des menu, j'ai déjà mes div 

          <body>
	     <div id="conteneur">
	          <div id="en_tete">
         
              </div>
         
              <div id="menu1">
              <ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Vidéos</a></li>
<li><a href="#">Liens</a></li>
</ul>
              

              </div>
	 
	          <div id="menu2">
<img src="images/bouton.png" width="127" height="25" border="0" usemap="#map" />

<map name="map">
<area shape="rect" coords="2,1,125,24" onmouseover="images/rollovers.png" onmouseout="images/rollovers.png" onfocus="images/rollovers.png" href="http://badminton42.free.fr/forum" />
</map>


<ul>
<li><a href="info.html">Informations - Inscriptions</a></li>
<li><a href="#">Calendrier des competitions</a></li>
<li><a href="#">Résultats</a></li>
<li><a href="forum">Forum</a></li>
<li><a href="#">Nous contacter</a></li>
</ul>

              </div>
         
              <div id="corps">
         
              </div>
         
              <div id="pied_de_page">
         
              </div>
	      </div>



	</body>


          Voila ce que j'ai fais avec les lien en liste si c'est ça qu'il fallait ?
          Je vais reregarder les liens :P

          En tout cas merci :)
          1. aigle21
            Hihi ahah ouhouh ^^, j'ai réussis pour la première foi a placer ou je veux les liens :P c'est super !!!!!!!!!!!!!
            1. Gihef Contributeur
              Voilà.
              Tu es sur la voie.
              Tu n'as pas besoin de la “map”. Abandonne sans regrets cette trouvaille.
              Et tu vas avoir du mal à faire tenir les longs intitulés dans le menu de droite.

              Il manque quand même le CSS…
              Avec lequel tu pourrais avoir quelque chose comme ça.

              Mets ça en ligne.

              +
              <body>
<div id="conteneur">
  <div id="en_tete">
  </div>
  
  <div id="menu1">
    <ul>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Vidéos</a></li>
      <li><a href="#">Liens</a></li>
    </ul>
  </div>
  
  <div id="corps">
  </div>
  
  <div id="menu2">
    <ul>
      <li><a href="info.html">Informations - Inscriptions</a></li>
      <li><a href="#">Calendrier des competitions</a></li>
      <li><a href="#">Résultats</a></li>
      <li><a href="forum">Forum</a></li>
      <li><a href="#">Nous contacter</a></li>
    </ul>
  </div>
  
  <div id="pied_de_page">
  </div>

</div>
</body>
              --
               
              1. aigle21
                je l'ai fais avant que tu le dise :), j'adorais avoir ce que tu a fais en image o_0 c'est ce que je veux ^^

                mais apres je n'arrive pas a mettre l'image dessouss le lien :s
                1. Gihef Contributeur
                  Choisis : http://css.alsacreations.com/Galeries-de-menus-en-CSS
                    http://css.alsacreations.com/modelesmenus/g01.htm par exemple.
                  Mais tu auras besoin de 
                    li a {
    …
    background : transparent url(images/bouton.png) left top no-repeat;
  }

                  Tu veux les menus l'un en dessous de l'autre ?
                  1. aigle21
                    je pense que c'est lui ?

                    http://css.alsacreations.com/modelesmenus/b1.htm

                    la j'ai pas le temps de le faire, mais j'ai pas trouver l'image choisis pour le rollovers dans l'exemple :P
                    1. aigle21
                      Je veux les menu comme j'ai mis, enfin si ca fais bien ?

                      (j'ai poster avant l'edition ^^)
                      1. Gihef Contributeur
                        Pas de problème.
                    2.  Gihef Contributeur
                      Non, ce n'est pas celui-là.
                      Il utilise des “border” pas des images.
                      1. aigle21
                        Ok, c'est bon je suis libre, au boutot :), j'essaie :P

                        en tout cas merci, avec d'autre aide .. je n'avais meme pas reussis a faire les lien ^^ et la j'avance super bien :) ( c'est clair on peut dire que je débute m'enfin :) )
                        1. aigle21 
                          .m1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 40px;
text-align:center;
text-decoration: none;
line-height: 30px;
}

.m1 a {
margin: 0 2px;
color: #000000;
text-decoration: none;
}
.m1 a:hover {
color: lightskyblue;
text-decoration: none;
font-size: 14px;
}


.m2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 40px;
text-align:center;
text-decoration: none;
line-height: 30px;
}

.m2 a {
margin: 0 2px;
color: #000000;
text-decoration: none;
}
.m2 a:hover {
color: lightskyblue;
text-decoration: none;
font-size: 14px;
}


li a 
{
display: block;	
height: 25px;
width: 127px;
font-size: 14px;
font-family: arial, georgia, serif;
text-decoration: none;
line-height: 25px;	  
background : transparent url(images/bouton.png) left top no-repeat;

}





li a:hover {
background: transparent url(images/rollovers.png) top left no-repeat;
}


                          Voila :) donc je n'arrive pas a déplacer les bouton a gauche :( , et j'aimerais les eloigner entre ( du genre 1 ou 2 px entre chaque bouton)

                          si y'a une ecriture sympas je prends :) ^^

                          chui trop content d'y etre arriver :) enfin a moitié ^^'
                          1. Gihef Contributeur
                            Essaye :
                            #m1 li, #m2 li {
  padding : 2px 0 0 24px;
  }
                            Tu verras ça plus tard, mais en effet, tes menus sont uniques. Ils doivent utiliser des “id”, pas des “class”.
                            Et donc être “#m1” et pas “.m1”.

                            + 
                            font-family: arial, georgia, serif;
                            Arial n'est pas une serif.
                            1. Gihef Contributeur
                              Il se fait tôt. Et tu es sur la bonne voie.

                              Je ne sais pas pourquoi, mais j'étais parti pour une page avec 3 colonnes (???)
                              Alors, j'avais fait ça.

                              Et puis, j'ai quand même compris que tes 2 menus superposés n'étaient pas un bug.
                              Alors, j'ai refait ça.

                              Comme tu peux le voir, je trouve le float très pratique (-;
                              Même si dans ton cas le absolute conviendrait aussi.

                              Ça ressemble, non ?
                              Est-ce que ça passe avec IE ?
                              1. aigle21
                                ça me tue o_0

                                J'ai mis plus d'un moi et je n'ai meme pas reussis a faire ce que tu as fais comme exemple, et j'adore ! le pied de page je te le prends :) la barre scolable je trouve ca pas beau m'enfin

                                i me faut exactement ça, trop bien :) ^^ j'admire ;)

                                je vais mooi aussi essayer de suite :P
                                sous IE j'en sais rien ^^ j'essaerai plus tard :P (bug beaucoup chez moi ie ...)

                                edit : je n'y arrive pas, impossible de déplacer :s,j'ai essayer mais rien :( , alala je suis encore tout excité ^^ , je trouve ça trop jolie :) :) :)
                                2. RAD ZONE Contributeur
                                  SALUT

                                  la couleur du backround du pied est : #eef1f5

                                  tout est sur le css externe

                                  voila le CSS que Gihef (salut (-; Gihef)

                                  a fait pour ton exemple

                                  Ici

                                  RAD
                                  1. aigle21
                                    je vien de regarder :P, maintenant je vais essayer de le faire tout seul :) , m'enfin ca le fais super bien :) :) :)

                                    le design est bien ou pas ? ...
                                    ^^

                                    Je crois que c'est tout hihi ^^ , un gros merci =D , j'ai beaucoup appris la :) :) :) bref merci merci ;) , je reviendrais sans doute si j'ai des problèmes :P

                                    Bonne journée.
                                    • 1
                                    • 2

                                    Discussions similaires

                                    Problème de reconnaissance Memup feel design
                                    sasa

                                    6 réponses
                                    mon pc ne reconner pas memup feel design
                                    zorroooooooo

                                    1 réponse
                                    Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
                                    Kaheil

                                    7 réponses