Codage design (le menu)
aigle21
-
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.
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.
A voir également:
- Codage design (le menu)
- Codage ascii - Guide
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Ouvrir le menu paramètres - Guide
- Codage - Guide
25 réponses
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].
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].
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
Je vais de suite lire les page :P
Je reviendrais avec des morceaux de codes :)
Merci
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.
Bref , me reste 2 jours,et après j'abandonne, en 1 moi j'aie meme pas été fichu de faire un menu.
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.
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.
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.
Si tu veux de l'inspiration :
css place d un script sur page web
http://css.alsacreations.com/modeles/modele5.htm
Par exemple.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
^^ 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
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 :)
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 :)
Hihi ahah ouhouh ^^, j'ai réussis pour la première foi a placer ou je veux les liens :P c'est super !!!!!!!!!!!!!
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.
+
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>--
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
mais apres je n'arrive pas a mettre l'image dessouss le lien :s
Choisis : http://css.alsacreations.com/Galeries-de-menus-en-CSS
http://css.alsacreations.com/modelesmenus/g01.htm par exemple.
Mais tu auras besoin de
Tu veux les menus l'un en dessous de l'autre ?
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 ?
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
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
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 :) )
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 :) )
.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é ^^'
Essaye :
Et donc être “#m1” et pas “.m1”.
+
#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.
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 ?
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 ?
ç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 :) :) :)
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 :) :) :)
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 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
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.
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.
