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)
  2. aigle21
    Resalut ,

    donc le site a pris forme :

    http://badminton42.free.fr

    par contre il ne marche pas sous IE , il y a des bandes bleu vers le menu, et les boutons ne sont pas centrés .
    Donc si quelqu'un pouvait me dire comme s'y prendre pour que ça marche sous IE :) et j'aimerais aussi tout compte fait un corps extensible, donc pas de barre scrolable dans la partie où on écris ...

    Merci bien

    Bonne journée.
    1. aigle21
      :s, donc il me faut une barre scrolable ^^ , j'essaierais de la faire , m'enfin si on peut m'expliquer ^^, parce que vu que le corps et tout est fais ... je lirais le lien demain (je vais partir d'ici peu )

      j'imprimerais quand j'aurais de l'encre :P

      merci pour la frist line, je n'avais pas fais attention :s, ca fait bien ou pas ? enfin ça fait pas intrus ? sinon je laisse :)

      c'est a peu près tout pour l'instant :P

      merci, je revien demain :)
      1. Gihef Contributeur
        “la barre scolable”
        Le choix que tu as fait d'avoir des pages de dimensions fixes nécessite sa présence, sinon du contenu sera caché ou débordera.
        Si tu n'en veux pas, il faudrait que tu permettes à ton bloc principal de s'adapter en hauteur. Mais c'est une autre histoire.

        Les formatage des pages se fait dans le fichier .css (merci RAD (-; ).
        On trouve l'info. dans l'en-tête des pages :
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>Proposition#2 pour EMBA 42 - Badminton</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" href="design_3.css" />
        Comme tu as pu le remarquer, seule la 1re ligne est concernée.
        Première ligne se dit “:first-line” en anglais. Tu trouveras donc ça
        #corps p:first-line {
  font-family : Georgia, serif;
  font-size : 1em;
  font-weight : bold;
  color : #273046;
  }
        dans le fichier.
        Tous les <p> de #corps sont concernés.

        Il ne s'agit pas d'un noir, mais d'un bleu très foncé : “color : #273046;”.
        Toutes les couleurs que j'ai utilisées, je les ai prises dans tes graphismes.

        + D'autres couleurs.

        “media="screen"” : As-tu déjà essayé d'imprimer une de tes pages ?
        2. aigle21
          une question hs, euh comment ça se fait que quand j'écris des paragraphes, ma première est toujours en noir ? 

          <div id="corps">
        <h3> Bienvenue sur le site de la section badminton EMBA 42 </h3>
		 <br/>
		 <br/>
		 <br/>
		 <p>
		 Voila enfin le site du club, <br/>
		 les fiches d'inscriptions et de demande de surclassement sont disponibles dans la partie <a href="info.html">INSCRIPTION</a>
		 
		 
		 
		 
		 
		 
		 
              </div>



h2
{
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", serif;
   color: black;
   
}
          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. 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
              2. 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 :) :) :)
                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. 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. 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. 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. Gihef Contributeur
                          Non, ce n'est pas celui-là.
                          Il utilise des “border” pas des images.
                          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. 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. 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 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
                                  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
                                    Hihi ahah ouhouh ^^, j'ai réussis pour la première foi a placer ou je veux les liens :P c'est super !!!!!!!!!!!!!
                                    • 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