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.
Configuration: Windows XP Firefox 2.0.0.6
25 réponses
- 1
- 2
Suivant
-
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].
-
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 -
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. -
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.
-
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.
-
-
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
<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.
+<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 -
Choisis : http://css.alsacreations.com/Galeries-de-menus-en-CSS
http://css.alsacreations.com/modelesmenus/g01.htm par exemple.
Mais tu auras besoin deli 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 -
-
Non, ce n'est pas celui-là.
Il utilise des “border” pas des images.
-
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 :) ) -
.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 :
#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 ?
-
ç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 :) :) :) -
-
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 -
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
Suivant
