Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Codage design (le menu)

Dernière réponse le 10 sep 2007 à 21:11:24 aigle21, le 16 aoû 2007 à 21:09:22

Signaler ce message aux modérateurs

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

Posez votre question Répondre

Gihef, le 17 aoû 2007 à 01:06:18

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/...

Et pour présenter ton code, chosis le bouton [code].

Répondre à Gihef

aigle21, le 17 aoû 2007 à 10:01:47

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

Répondre à aigle21

aigle21, le 17 aoû 2007 à 11:19:26

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.

Répondre à aigle21

Gihef, le 17 aoû 2007 à 13:18:35

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.

Répondre à Gihef

Gihef, le 17 aoû 2007 à 19:08:41

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.

Répondre à Gihef

aigle21, le 17 aoû 2007 à 21:58:33

^^ 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 :)

Répondre à aigle21

aigle21, le 17 aoû 2007 à 22:09:02

Hihi ahah ouhouh ^^, j'ai réussis pour la première foi a placer ou je veux les liens :P c'est super !!!!!!!!!!!!!

Répondre à aigle21

Gihef, le 17 aoû 2007 à 22:32:50

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>

Répondre à Gihef

aigle21, le 17 aoû 2007 à 23:02:03

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

Répondre à aigle21

Gihef, le 17 aoû 2007 à 23:20:48

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 ?

Répondre à Gihef

aigle21, le 17 aoû 2007 à 23:28:26

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

Répondre à aigle21

aigle21, le 17 aoû 2007 à 23:30:16

Je veux les menu comme j'ai mis, enfin si ca fais bien ?

(j'ai poster avant l'edition ^^)

Répondre à aigle21

Gihef, le 17 aoû 2007 à 23:31:04

Pas de problème.

Répondre à Gihef

Gihef, le 17 aoû 2007 à 23:30:22

Non, ce n'est pas celui-là.
Il utilise des “border” pas des images.

Répondre à Gihef

aigle21, le 17 aoû 2007 à 23:34:17

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 :) )

Répondre à aigle21

aigle21, le 17 aoû 2007 à 23:54:16

.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é ^^'

Répondre à aigle21

Gihef, le 18 aoû 2007 à 00:12:14

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.

Répondre à Gihef

Gihef, le 18 aoû 2007 à 01:55:43

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 ?

Répondre à Gihef

aigle21, le 18 aoû 2007 à 09:21:14

ç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 :) :) :)

Répondre à aigle21

aigle21, le 18 aoû 2007 à 09:22:24

C'est quoi la couleur du pied de page ?

Répondre à aigle21

RAD ZONE, le 18 aoû 2007 à 09:59:09

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 ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

27 réponses 12 Suivant

Posez votre question Répondre