[HTML] Comment faire ce genre de Menu ?

Version imprimable

26/04/2007, 16h31
°°° Zen-Spirit °°°

[HTML] Comment faire ce genre de Menu ?

Salut à tous,
Après quelques mois en standby, grace à votre aide, j'ai créé un site web il y a de celà plusieurs mois.
Je reviens une fois de plus sur votre forum afin d'obtenir des informations.
En effet je voudrai savoir comment réaliser ce genre de MENU.
1- En fait, un Menu qui au passage de la souris affiche toutes les rubriques du sous-Menu.
2- Un Menu estéthiquement joli, très bien encadré avec des bords arrondis.
3- Un Menu avec des couleurs personnalisées.
4- Un Menu horizontal.
Merci à Tous !

Ah, oui je voudrai savoir si c'est du javascript, ou et comment pourrai je trouver un modèle de code permettant de réaliser exactement ce joli MENU, très bien encadré et arrondi ?

Merci !

PS : J'ai oublié de vous donné l'adresse du modèle de Menu que je veux faire exactement : ICI le modèle de menu que je veux faire
26/04/2007, 18h04
Strix

Salut.

T'as essayé une recherche Google avec Menu et CSS ?

Tu vas voir, c'est sympa :mrgreen:

Après tu peux tenter un recherche menu déroulant sur le forum...
Ces 2 recherches résolvent les points 1 et 4
Avec bords arrondis dans la partie CSS ou HTML, le point 2 est résolu.

Qu'entends-tu par "Un Menu avec des couleurs personnalisées." ?
26/04/2007, 18h33
°°° Zen-Spirit °°°

Ben en fait quand je parle de Menu , avec des couleurs personnalisées, je veux dire par là, que le menu aura une apparence avec des couleurs que j'aurai choisi moi.
Sinon, je entrain d'étudier le code CSS du MENU, c'est assez chaud.
Il y a certaines choses que je ne comprends pas. Ici le code

Comment faire pour voir à quoi correspond les images des liens se trouvant dans le code que le webmaster a établi ?
Par exemple, ces adresses suivantes sont dans le code, mais je ne sais pas comment voir le fichier png.
Liens se trouvant dans le code résultant d'une image :
//s8.s-sfr.fr/css/img/nav-top/menu_sub_menu_right.png
//s5.s-sfr.fr/css/img/nav-top/menu_right_hover.png
Quand je rajoute çà dans ma barre d'adresse, çà donne alors :
http://www.sfr.fr//..._menu_right.png
Et même en enlevant un slash devant le lien, çà fonctionne pas, impossible de voir l'image :
http://www.sfr.fr/s..._menu_right.png

Merci ! ;)
26/04/2007, 19h00
Strix

Alors je prends ton message à l'envers :aie:

Le lien est celui-ci : http://s5.s-sfr.fr/css/img/nav-top/menu_right_hover.png

Avant de t'attaquer au code CSS de SFR, jette un œil ici (sans Javascript).
26/04/2007, 19h13
°°° Zen-Spirit °°°

Ok merci, mais c'est vraiment pas simple ses codes à ce web master !!!
Je vais encore me creuser la tête environ 4 semaines !
26/04/2007, 19h19
Strix

Citation:

Envoyé par °°° Zen-Spirit °°°

mais c'est vraiment pas simple ses codes à ce web master !!!

Lesquels de codes ?
26/04/2007, 19h21
°°° Zen-Spirit °°°

Citation:

Envoyé par Strix

Lesquels de codes ?

Je parles du code CSS correspondant au MENU du site SFR :
Ici le code
C'est assez lourd à comprendre et à analyser.
26/04/2007, 19h24
Strix

Citation:

Envoyé par °°° Zen-Spirit °°°

Je parles du code CSS correspondant au MENU du site SFR :
Ici le code
C'est assez lourd à comprendre et à analyser.

C'est bien pour ça que je t'ai donné 2 liens qui sont la base des menus déroulants !
28/04/2007, 00h29
°°° Zen-Spirit °°°

Salut tout le monde !
1- J'ai un petit soucis à comprendre un code Css par rapport à son fichier HTML.
En fait sur ce site, entre les rubriques du Menu, il y a des petites barres qui les sépares, mais en regardant le code HTML et le code CSS, je ne vois pas comment le webmaster définie ces petites barres afin qu'elles apparaissent.
Pouvez vous m'aidez à comprendre et à trouver dans ce code ce qui fait que ces petites barres apparaissent :

Code HTML :

Citation:

<ul id="navigation">
<li id="navhome"><a href="/">Accueil</a></li>
<li id="nav1"><a href="/articles">Tous les articles</a></li>
<li id="nav2"><a href="/ressources">Ressources</a></li>
<li id="nav3"><a href="/colophon">À propos du site</a></li>
<li id="nav4"><a href="/contact">Contact</a></li>
</ul>

Code CSS :

Citation:

/* ------------------------------------------
/* Navigation
/* ------------------------------------------
*/
#navigation {
width: 700px;
height: 25px;
margin: 0;
padding: 0;
padding-bottom: 15px;
list-style: none;
background: #FFF url(/pompage_v3/nav.gif) no-repeat;
}

#navigation li {
height: 25px;
margin: 0;
padding: 0;
float: left;
text-indent: -9000px;
}

#navigation a {
display: block;
height: 100%;
}

#navigation li a:link, #navigation li a:visited {
color: #FFF;
text-decoration: none;
font-variant: small-caps;
font-weight: bold;
}
#navhome {
width: 80px;
background: url(/pompage_v3/nav_home.gif) no-repeat;
}
#nav1 {
width: 142px;
background: url(/pompage_v3/nav_articles.gif) no-repeat;
}
#nav2 {
width: 101px;
background: url(/pompage_v3/nav_ressources.gif) no-repeat;
}
#nav3 {
width: 85px;
background: url(/pompage_v3/nav_aprop.gif) no-repeat;
}
#nav4 {
width: 78px;
background: url(/pompage_v3/nav_contact.gif) no-repeat;
}

2- D'autres par rapport à ce même site, le webmaster a mis dans son code HTML, au début ceci :

Citation:

<div id="header">
<h1>Pompage</h1>
</div> 

Mais à aucun moment je ne vois le titre Pompage en texte !!!
Le gros titre pompage qu'il y a sur le site en haut à droite est une image !

Merci de m'aider à comprendre, car çà me bloque dans ma progression.
28/04/2007, 00h34
°°° Zen-Spirit °°°

Aussi, sur ce site là : Cours CSS
Dans la partie du cours sur Display : je n'arrive pas à avoir le mêe résulatat que le webmaster à mis comme résultat final :

Donc voici ce que je mets dans mon code HTML :

Citation:

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>essai3</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1"/>
<meta name="Description" content="blabla">
<link rel="stylesheet" media="screen" type="text/css" title="essai3.css" href="essai3.css" />
<link rel="shortcut icon" href="favicon.ico" >

</head> <!–– Fin de la balise Head ––>

<body> <!–– Début de la balise Body ––>

<div id="display">
<p>
<a href="http://www.w3.org/">Le site du W3C</a>
<a href="http://www.w3.org/TR/CSS21/">Recommandations CSS2</a>
<a href="http://www.w3.org/Style/CSS/current-work#CSS3">Recommandations CSS3</a>
</p>
<hr />
<ul>
<li><a href="http://www.w3.org/">Le site du W3C</a></li>
<li><a href="http://www.w3.org/TR/CSS21/">Recommandations CSS2</a></li>
<li><a href="http://www.w3.org/Style/CSS/current-work#CSS3">Recommandations CSS3</a></li>
</ul>
</div>

</body>

</html>

Et dans mon code CSS :

Citation:

#display p.block a {
display:block;
width:180px;
border:1px solid #E8E8E8;
padding:3px 10px;
background-color: #DCDCDC;
}
#display li {
display:inline;
background:url(nav.png) no-repeat 0 50%;
padding-left:10px;
}

Merci !
28/04/2007, 10h12
blueice
Citation:

En fait sur ce site, entre les rubriques du Menu, il y a des petites barres qui les sépares, mais en regardant le code HTML et le code CSS, je ne vois pas comment le webmaster définie ces petites barres afin qu'elles apparaissent.

:roll:

Citation:

Mais à aucun moment je ne vois le titre Pompage en texte !!!
Le gros titre pompage qu'il y a sur le site en haut à droite est une image !

:roll:
Code:

1 2 3 4 5 6 7 8 #home h1 { width: 216px; height: 145px; margin: 0 0 0 481px; padding: 0px; background: url(/pompage_v3/pompage.gif) no-repeat bottom; text-indent: -9000px; }
Citation:

Dans la partie du cours sur Display : je n'arrive pas à avoir le mêe résulatat que le webmaster à mis comme résultat final :

Sois plus clair
28/04/2007, 15h57
°°° Zen-Spirit °°°

Salut tout le monde !
Merci d'avoi répondu Blueice.

Citation:

Envoyé par blueice

Sois plus clair

1- En fait ce que je veux dire, c'est que par rapport au cours que le webmaster donne sur l'utilisation de "DISPLAY", et il donne un exemple concernant le résultat final, quand on utilise exactement les codes qu'il donne dans son cours ( résultat qui se trouve au dessus du code ).
Sauf que j'ai mis exactement sur ma page HTML et dans mon code CSS les mêmes codes que lui, mais je n'ai pas le même résultat que son exempàle à lui.
Je vous remets ici le lien de son cours CSS sur DISPLAY

2- Concernant le

Citation:

<div id="header">
<h1>Pompage</h1>
</div> 

Je ne comprends pas ce que tu veux dire, car j'ai revérifié, mais c'est bien une image, et non un titre concernant le texte où c'est écrit "POMPAGE" sur son site.
Mais à aucun moment je ne vois le titre Pompage en texte, concernant son code où c'est écrit h1 !!!

Merci !

Citation:

Je ne comprends pas ce que tu veux dire, car j'ai revérifié, mais c'est bien une image, et non un titre concernant le texte où c'est écrit "POMPAGE" sur son site.

C'est bien une image, mais pour rendre la chose accessible, ils ont rajouté le texte, de sorte que si l'image n'apparait le texte vient à la place.

Pour ton histoire pas envie de chercher le pourquoi du comment, fais ton propre menu, je te donne un exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css" title="text/css">
/* <![CDATA[ */
 
* { margin:0; padding:0; }
body { background: #f0e7d7; }
ul#navlist
{
text-align:left;
list-style:none;
width: 20%;
}
 
ul#navlist li
{
display: block;
}
 
ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}
 
ul#navlist li a { width: auto; }
 
ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}
 
ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
/* ]]> */
</style>
</head>
<body>
<ul id="navlist">
<li id="active"><a href="#" id="current">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</body>
</html>

29/04/2007, 18h27
kaiser59

Salut,

Tu devrais trouver ton bonheur dedans :
http://css.maxdesign.com.au/listamatic/
30/04/2007, 16h39
FraK

tu peux aussi télécharger un .exe qui construira ton menu tel que tu le souhaites vraiment niveau design
si tu n'es pas à l'aise avec le code, c'est une tres bonne option
DHTML Menu Builder