Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: comment realiser un menu ?  (Lu 10627 fois)

971

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 461
    • Voir le profil
comment realiser un menu ?
« le: août 29, 2008, 15:37:50 pm »

Bonjour,

Toujours en train d'expérimenter dreamweaver.
Dans le pack intitulé "Structure et Positionnement" acheté dans la boutique, il est expliqué comment réaliser un menu en colonne avec un CSS :
EXemple :
Menu 1
Menu 2
Menu 3

Moi, je souhaite réaliser celui-ci à l'horizontal, séparé par un espace conséquent entre les différents menus, toujours avec les CSS:
EXemple :
Menu 1     Menu 2     Menu 3

Existe t-il une astuce ?

Merci d'avance
IP archivée

Jasse29

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
    • Factual Book
Re : comment realiser un menu ?
« Réponse #1 le: août 29, 2008, 17:42:55 pm »

Bonsoir,

Il me semble qu'il faut utiliser la propriété CSS : float
Tu devrais avoir ce style de propriété pour ton menu afin d'avoir tes liens horizontaux (ce n'est qu'un exemple):
#menu a
   {
   display:block;
   float:left;
   width:19%;
   height:30px;
   border:none;
   text-align:center;
   }

Je te joins un lien, où se trouve une vidéo qui explique la manipulation :
http://jojoratonlaveur.fr/ressources/coder-site-web-23.html
Et tu trouveras sur ce second lien des explications détaillées :
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html

jean-Seb

IP archivée
Débutant dans la programmation web, mais des idées en pagailles

971

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 461
    • Voir le profil
Re : comment realiser un menu ?
« Réponse #2 le: août 29, 2008, 17:47:01 pm »

MERCI

je regarde cela et te tiens au courant.

Bonne soirée
IP archivée

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail
Re : comment realiser un menu ?
« Réponse #3 le: août 29, 2008, 20:17:19 pm »

Bonsoir,
La propriété CSS float, permet de gérer le flottement des boîte <div> sur leur côté gauche ou leur côté droit par rapport à l'élément parent. Cet élément parent peut être la fenêtre du navigateur, l'élément <body> ou une autre boîte <div>.
Pour faire des menus CSS, je ne peux que te conseiller d'aller visiter l'excellent site Alsacreations et notamment sa rubrique déidée à la création des menus en CSS simple ou des menus déroulants.
Un site absolument indispensable pour ceux qui veulent être au top des standards du web
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

Olivier

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
    • E-mail
Re : comment realiser un menu ?
« Réponse #4 le: août 30, 2008, 20:44:50 pm »

Salut a tous,

Je me permet de m'incruster dans le topic pour donner un petit exemple...Il y a surement de meilleur solution mais celle ci fonction sur FireFox 3 et Internet Explorer (du moins le 6...c'est le seul que j'ai sous la main...). En revanche je ne sais pas si le code est validé dans les règles du W3C machin bidule truc chouette chose...

Bref.

Voila le code:

A mettre dans ta page index.html, quelque part entre les deux balises <body> et </body> :

<div id="conteneur_menu">
   
    <div id="case_menu">Menu 1</div>
        <div id="case_menu">Menu 2</div>
        <div id="case_menu">Menu 3</div>
        <div id="case_menu">Menu 4</div>
        <div id="case_menu">Menu 5</div>
        <div id="case_menu">Menu 6</div>
        <div id="case_menu">Menu 7</div>
        <div id="case_menu">Menu 8</div>
   
    </div>

Ensuite le CSS :

#conteneur_menu {
width: 800px;
height: 20px;
background-color: #333333;
texte-align: left;
}

#case_menu {
width: 100px;
height: 20px;
text-align: center;
float: left;
color: #0066FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}

Donc j'ai fais un grand bloc (d'un taille de 800px). C'est conteneur menu.
Dans ce grand bloc, j'ai placé 8 petit bloc (de 100px; de large).
Et dans chaque petit bloc, le texte de mon menu.
Comme précisé ci-dessus, c'est la propriété "float" qui fais que mes bloc reste côte à côte.

Ici float: left; ...tu l'auras deviné, les blocs d'appuis sur leur côté gauche.
Je ne sais pas vraiment si on peux parler d'appuis, on pourrais dire aussi aligner, mais c'est comme cela que je vois les choses.  ;D

Tu peux voir l'aperçus ici: http://labs.desuko.info/wisi/menu_css/

Note bien que, si comme ici tu utilise des valeur fixe en pixel ton menu aura la même taille partout...800px. Ce que je veux te dire c'est que si tu fais un site pleine page (qui s'agrandie en fonction de ton navigateur), n'oublie pas de mettre tes valeurs en %...comme Jasse29.

Voila.

J'espère que cela t'aura aidé.

A bientôt,

Amicalement,

Olivier.  8)

PS: je sais que c'est moche malgré que j'ai pausé vite fais quelques couleurs...mais on s'en fiche c'est pour l'exemple hein  :P

PS 2: @admins du forum : Super pratique votre petit bouton quick edit en dessous du message que l'on viens de poster...c'est la première fois que je vois ca, j'adore ! Bravo bravo !!!
« Modifié: août 30, 2008, 20:51:16 pm par Olivier »
IP archivée

971

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 461
    • Voir le profil
Re : comment realiser un menu ?
« Réponse #5 le: août 30, 2008, 21:31:35 pm »

Bonsoir,

Encore UN GRAND MERCI à tous !

Je suis en train de consulter un des liens que m'a fourni JASSE29.
Je ferai part de mes remarques et commentaires une fois terminé.

Bonne soirée !
IP archivée

Olivier

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
    • E-mail
Re : comment realiser un menu ?
« Réponse #6 le: septembre 04, 2008, 13:01:34 pm »

Alors, as tu réussis à faire ce que tu souhaitais ?  ;D
IP archivée

marroon

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1704
  • Wisinaute
    • Voir le profil
    • Studio graphique et imprimeur typographique
    • E-mail
Re : comment realiser un menu ?
« Réponse #7 le: septembre 04, 2008, 13:34:49 pm »

Je ne saurais trop te conseiller d'aller voir sur ce lien : http://css.alsacreations.com/search.php?q=menu&s=OK

C'est gratuit...
IP archivée
L'échec, c'est la réussite du con. - Frédéric Dard

971

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 461
    • Voir le profil
Re : comment realiser un menu ?
« Réponse #8 le: septembre 04, 2008, 21:12:19 pm »

Bonsoir à tous !

Etant l'inititeur de ce post, je me dois de vous tenir au courant des différentes solutions proposées :
je suis actuellement en train d'étudier "à fond" le tuto de 55 mn sur le site "jojoratonlaveur.com".
Celui-ci est à mon avis une "mine d'or".
"Alsacréation" m'a l'air pas mal aussi. Il est rangé dans mes favoris.

MERCI à Jasse 29, Olivier, Kriztho… et tous les autres !
A Olivier, j'ai retenu ta méthode simple et limpide !

Toutes ces infos réunies + "le pack" vendu dans la boutique m'ont fait enormément comprendre l'importances des CSS.

A bientôt !
IP archivée

Mallie

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 157
    • Voir le profil
    • E-mail
Re : comment realiser un menu ?
« Réponse #9 le: octobre 08, 2008, 15:15:42 pm »

et bien pour avoir un menu à l'horizontal il faut que tu mettes la taille du width dans sa taille de largeur horizontale (ex : 800px) et le height (c'est la hauteur de ton menu : ex 20px)

bon j'espère avoir été claire .... ;)
IP archivée

montoumes

  • Invité
Re : comment realiser un menu ?
« Réponse #10 le: octobre 21, 2008, 09:19:30 am »

Oulalalala... un menu en div...

Moi je te proposes pour faire les choses "proprement" et avec une sémantique correcte de faire ceci :

Soit un menu :
<div id="menu">
   <ul>
     <li><a title="" href="">accueil</a></li>
     <li><a title="" href="">lien 2</a></li>
     <li><a title="" href="">lien 3</a></li>
   </ul>
</div>
(ici on a plaqué tout ça dans un div "menu" facultatif pour aider à la mise en place)

Pour ta css :
Soit tu choisis des éléments li en leur appliquant "display: inline". Que j'aime pas trop, mais chacun ses goûts :p

Soit tu choisis la méthode float, que j'aime beaucoup, en ciblant au niveau le plus bas (<a href>)! Pourquoi au plus bas ? parce que tu peux appliquer de magnifiques effets de rollover à tes "a" ! :
#menu {width: 990px; /* une largeur facultative */background:transparent url(menu.gif) repeat-x scroll 0 0; /* une image de fond facultative, d'un pixel de large répétée en x */}
#menu ul {margin:0;list-style-position:outside;list-style-type:none;padding:0; /* le code précédent réinitialise les listes */height: 35px; overflow: hidden;}
#menu ul li {float:left;list-style-position:outside;list-style-type:none;padding:0; /* le gros du code est ici : float : left;*/}
#menu ul li a, #menu ul li a:link, #menu ul li a:visited {border-left:1px solid #FFD58B; border-right:1px solid #B68741; color:#333333; display:block; padding:0.6em 1.5em; /* ici notre liste-menu prend forme, avec une couleur de texte, de fond, et de bordure */}
#menu ul li a:hover, #menu ul li a:active {background-color:#302F2C; border-left: 1px solid #000; border-right:1px solid #555; color:#fff; /* et évidemment on est maintenant libre de changer l'apparence au rollover ! */}

Ce que dit Olivier n'est pas faut, mais n'est pas, à mon sens, "sémantiquement correct"...



IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : comment realiser un menu ?
« Réponse #11 le: octobre 21, 2008, 14:14:03 pm »

Bonjour, ne peut-on pas tout simplement définir les <li> comme étant balises inline ?

CSS :

li { display: inline; } /* Plus la déco (transformation) éventuelle */

Le fait de passer les <li> en inline permet de les afficher de gauche vers la droite, cela agit comme le float left mais (et je peux me tromper) me parait plus propice.

PS Bertrand : Pourait-on avoir un code plus lisible dans les balises "code". Merci.
« Modifié: octobre 21, 2008, 14:16:22 pm par edfred »
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

montoumes

  • Invité
Re : comment realiser un menu ?
« Réponse #12 le: octobre 21, 2008, 14:24:50 pm »

Si si bien sûr, et je l'avais d'ailleurs proposé dans mon post. Mais d'expérience, l'utilisation du inline est parfois casse-tête entre les navigateurs (positionnement, largeur des éléments, etc.). Le choix dépend essentiellement de la mise en page.
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : comment realiser un menu ?
« Réponse #13 le: octobre 21, 2008, 14:42:29 pm »

Je n'ai pas lu entre les lignes...  :-[
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum