Codage design (le menu)

Question

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.

Afficher la suite

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.

Gihef · Answer

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

aigle21 · Answer

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

aigle21 · Answer

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.

Gihef · Answer

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.

aigle21 · Answer

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

aigle21 · Answer

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

Gihef · Answer

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

--

aigle21 · Answer

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

Gihef · Answer

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 ?

aigle21 · Answer

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

aigle21 · Answer

Je veux les menu comme j'ai mis, enfin si ca fais bien ?

(j'ai poster avant l'edition ^^)

Gihef · Answer

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

aigle21 · Answer

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

aigle21 · Answer

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

Gihef · Answer

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.

Gihef · Answer

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 ?

aigle21 · Answer

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

aigle21 · Answer

C'est quoi la couleur du pied de page ?

RAD ZONE · Answer

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

aigle21 · Answer

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.

aigle21 · Answer

une question hs, euh comment ça se fait que quand j'écris des paragraphes, ma première est toujours en noir ?

Bienvenue sur le site de la section badminton EMBA 42

Voila enfin le site du club,
les fiches d'inscriptions et de demande de surclassement sont disponibles dans la partie INSCRIPTION

h2 { text-align: center; font-family: Arial, "Arial Black", "Times New Roman", serif; color: black; }

Gihef · Answer

“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 : Proposition#2 pour EMBA 42 - Badminton 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

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 ?

aigle21 · Answer

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

aigle21 · Answer

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.

aigle21 · Answer

Up :P

Codage design (le menu)

25 réponses

Votre réponse

Discussions similaires

Newsletters