Codage design (le menu)

aigle21 -  
 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

  • 1
  • 2
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 Messages postés 5165 Statut Contributeur 2 781
     
    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
  2. 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
    0
  3. 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.
    0
  4. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    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.
    0
    1. Gihef Messages postés 5165 Statut Contributeur 2 781
       
      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.
      0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. 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 :)
    0
  7. aigle21
     
    Hihi ahah ouhouh ^^, j'ai réussis pour la première foi a placer ou je veux les liens :P c'est super !!!!!!!!!!!!!
    0
  8. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    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>
    --
     
    0
  9. 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
    0
  10. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    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 ?
    0
  11. 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
    0
  12. aigle21
     
    Je veux les menu comme j'ai mis, enfin si ca fais bien ?

    (j'ai poster avant l'edition ^^)
    0
    1. Gihef Messages postés 5165 Statut Contributeur 2 781
       
      Pas de problème.
      0
  13. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    Non, ce n'est pas celui-là.
    Il utilise des “border” pas des images.
    0
  14. 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 :) )
    0
  15. 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é ^^'
    0
  16. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    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.
    0
  17. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    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 ?
    0
  18. 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 :) :) :)
    0
  20. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    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
    0
  21. 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.
    0
  • 1
  • 2

Discussions similaires

Problème de reconnaissance Memup feel design
sasa -
Kiagoo Ross -

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

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

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses