Discussion :

[°°° Zen-Spirit °°°]

Bonjour tout le monde !
Voilà, je suis entrain de créer un nouveau site et je voudrai avoir un Menu qui soit déroulant avec des sous menus et qui soit horizontal.

j'ai vu plusieurs modèles de menus sur divers sites :
1 -Modèle chez MTV
2 -Modèle OM
3 -Modèle Eurosport

° Alors ma question est comment créer se menu déroulant?
Est du javascript ou uniquement du HTML ?

MERCI

[Crayon]

C'est du CSS va voir http://web.developpez.com/tutoriel/x...uderoulantcss/

La prochaine fois fait une peite recherche ou fait un "View Source" dans ton fureteur.

[°°° Zen-Spirit °°°]

Merci pour l'info super, et désolé.
Maintenant que je suis entrain d'étudier la chose, je voudrai quelques précisions :
1 - c'est quoi : " liste de premier niveau " ou " les rubriques de tout premier niveau " ? j'ai vu çà dans le tutos
2 - une autre question comment faire pour faire apparaitre une autre image lors du passage de la souris sur un lien ?
Ici l'exemple ( voir lorsque la souris passe sur "articles " " topics ", ...
En fait je veux dire quel est le code qui permet de faire çà?
3 - Dans ce même lien on peut apecevoir le " N°162" dans le rond noir dentelet, comment faire pour placer image qui est un lien sur une autre image qui est aussi un lien.

Merci encore.

[Crayon]

Il va falloir que tu apprenne à regarder la source du fichier pour comprendre comment ça fonctionne.

2 - une autre question comment faire pour faire apparaitre une autre image lors du passage de la souris sur un lien ?
Ici l'exemple ( voir lorsque la souris passe sur "articles " " topics ", ...
En fait je veux dire quel est le code qui permet de faire çà?
qui est aussi un lien.

C'est du CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="navbar">
  <li id="articles"><a href="/articles/" title="Articles">Articles</a></li>
  <li id="topics"><a href="/topics/" title="Topics">Topics</a></li>
  <li id="about"><a href="/about/" title="About">About</a></li>
  <li id="contact"><a href="/contact/" title="Contact">Contact</a></li>
  <li id="contribute"><a href="/contribute/" title="Contribute">Contribute</a></li>
  <li id="feed"><a href="/feed/" title="Feed">Feed</a></li>
</ul>

Voici le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#navbar {height: 2.4em;
  padding: 0 0 0 215px;
  background: #FBFAF4;
  border-top: 5px solid #333;
  font: 18px Georgia, Times, serif; overflow: hidden;
  min-width: 750px;}
#navbar li {float: left; padding: 0 23px 0 13px; margin-right: 5px;
  background: url(/pix/diamond-black.gif) 100% 66% no-repeat;}
#navbar li a {display: block; padding: 0.75em 0 0.25em;
  text-transform: uppercase; color: #000;}
#navbar #feed {background: none;}
#navbar a:hover,
  .articles #navbar #articles a,
  .topics #navbar #topics a,
  .about #navbar #about a,
  .contact #navbar #contact a,
  .contribute #navbar #contribute a,
  .feed #navbar #feed a {
 background: url(/pix/navbarlinkbg.gif) top left repeat-x; color: #555;
}

3 - Dans ce même lien on peut apecevoir le " N°162" dans le rond noir dentelet, comment faire pour placer image qui est un lien sur une autre image qui est aussi un lien.

C'est encore du CSS (ligne 45 à 48):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="ish">
<a href="/issues/162" title="Issue 162">No. <em>162</em></a>
 
</div>

Contenu du fichier CSS (http://www.alistapart.com/css/base.css):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#ish {position: relative; z-index: 10; border-top: 1px solid #666;
  font: bold 10px Arial, sans-serif; letter-spacing: 1px;}
#ish a:link, #ish a:visited {position: absolute; top: -33px; left: 150px;
  width: 65px; height: 52px; padding-top: 13px; text-align: center;
  background: url(/pix/ishbug.gif) top left no-repeat;
  color: #FFF;}
#ish a:hover {background-position: bottom right;}
#ish a em {display: block; margin-top: -0.2em;
  font: 2.33em Georgia, Times, serif; letter-spacing: 0;}

Bonne chance

[°°° Zen-Spirit °°°]

Merci pour tes réponses et ton aide judicieuse.
J'ai déjà créé un site web avec les cours et tutoriels pour apprendre CSS que j'ai appris sur le site. Mais c'est des codes css de base. Y a pas tout dans ces cours.
Cependant vu ton expérience, encore quelques petites questions please, à quoi correspond :

- border-top: 5px solid #333;
En fait le border top correspond à quoi car je n'ai jamais utilisé. Et ses 3 valeurs veulent dire quoi ( le solid c'est quoi ?) ( 5px je sais que c'est la dimension et le #333 c'est la couleur, mais le border top, est ce la bordure du haut )?

- padding: 0 0 0 215px;
Le padding je sais c'est quoi, mais ces 4 valeurs correspondent à quoi car je n'ai jamais utilisé 4 valeurs mais qu'une seule. Pourquoi 4 valeurs ?

- text-transform: uppercase;
L'upercase, j'ai fait une recherche sur google et j'ai cru comprendre que c'est pour mettre en majuscule, peut être que je n'ai rien compris di tout.
mais si c'est effectivement une histoire de majuscule, pour utiliser çà pour mettre en majuscule, alors qu'on a la possibilté de taper en majuscule dans le HTML ?

- Enfin une dernière question concernant ces codes qui sont nouveaux depuis que j'utilise le CSS, à correspond le code CSS {display: block;}

- Ah oui concernant le tutos que tu m'as donné, pour le menu, j'ai remarqué un soucis concernant l'affichage des sous menus sous Iexplorer.
Regardez par vous même sous les 2 navigateurs, Mozilla affiche bien les sous menus qui déroulent alors que Iexplorer non :ICI


MERCI encore CRAYON, Sympa !

[Crayon]

Je suis très loins d'être un expert en CSS, j'en sais un minimum c'est pourquoi je ne serait pas capable de répondre à toutes tes questions.

- padding: 0 0 0 215px;
Le padding je sais c'est quoi, mais ces 4 valeurs correspondent à quoi car je n'ai jamais utilisé 4 valeurs mais qu'une seule. Pourquoi 4 valeurs ?

Je crois que c'est l'équivalent d'écrire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 215px;

- text-transform: uppercase;
L'upercase, j'ai fait une recherche sur google et j'ai cru comprendre que c'est pour mettre en majuscule, peut être que je n'ai rien compris di tout.
mais si c'est effectivement une histoire de majuscule, pour utiliser çà pour mettre en majuscule, alors qu'on a la possibilté de taper en majuscule dans le HTML ?

Dès fois c'est pratique quand tu laisses une personne écrire un titre de qqchose dans une base de données et elle oublie de le mettre en majuscule. Toi tu utilises cette fonctionnalité pour être certain que tout est standard sur ton site Web.

MERCI encore CRAYON, Sympa !

De rien, j'esssai de faire de mon mieux!

[Crayon]

- border-top: 5px solid #333;
En fait le border top correspond à quoi car je n'ai jamais utilisé. Et ses 3 valeurs veulent dire quoi ( le solid c'est quoi ?) ( 5px je sais que c'est la dimension et le #333 c'est la couleur, mais le border top, est ce la bordure du haut )?

Oui c'est la bordure du haut. Solid est le style de la bordure, il y en 8 différentes (fait une recherche pour plus d'info). Width est l'épaisseur de la bordure en pixel dans ce cas-ci. Le dernier paramètre est bien la couleur.
Ton code pourrais avoir l'air de:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #B2B2B2;
	border-right-color: #B2B2B2;
	border-bottom-color: #B2B2B2;
	border-left-color: #B2B2B2;

Il y a quatre côté (top, right, left et bottom)

[°°° Zen-Spirit °°°]

Encore salut CRAYON.
Merci encore pour tes précisions. J'ai bien compris et j'enregistre bien les informations que tu es entrain de me donner au combien précieuses.

- Concernant l'uppercase, je n'ai pas bien saisi son utilité. Tu dis :

quand tu laisses une personne écrire un titre de qqchose dans une base de données et elle oublie de le mettre en majuscule

tu parles des cadres ou il faut taper un texte pour effectuer une recherche sur le site, ou ... . je comprends pas trop.

- Sinon à quoi correspond le code CSS {display: block;}

- Aussi, concernant le tuto que tu m'as donné, pour le menu, j'ai remarqué un soucis concernant l'affichage des sous menus sous Iexplorer.
Regardez par vous même sous les 2 navigateurs, Mozilla affiche bien les sous menus qui déroulent alors que Iexplorer non :
ICI et faire le test avec les 2 navigateurs pour voir le problème

MERCI CRAYON magique !

[Crayon]

- Sinon à quoi correspond le code CSS {display: block;}

Va voir:
http://wiki.media-box.net/documentation/css/display

Si tu as d'autres question d'ordre CSS fait une recherche sur le site avant de poster ici.