Créer des menus déroulants

**Svenna** · 10/06/2009, 17h04

Bonjour,

Bien entendu je fais de mon mieux pour apprendre mais là je m’embrouille un peu ......mon petit neurone de blonde en prend pour son grade !!!
J’ai donc besoin de votre aide.

Le but du jeu pour moi est « simplement » de modifier l’apparence d’un site qui techniquement fonctionne très bien….disons que le côté design n’est pas franchement la tasse de thé du webmaster.

Je souhaite pouvoir lui faire différentes présentations.
Je travaille sur dreamweaver

Je comprends le principe de relation page .html et .css je fais joujou avec et j'apprends.

Mon premier problème, (j’ai pourtant lu beaucoup de tutos ) :
Je parviens à placé mon menu déroulant (on est content...enfin surtout moi ! ) mais je n'arrive pas a adapter des sous menus

mon code est celui-ci :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="tabsH">
<ul>
 
<li id="current"><a href="Accueil.html"><span>Accueil</span></a></li>
<li><a href="Les recherches.html"><span>Les recherches</span></a></li>
<li><a href="Déposer un projet<.html"><span>Déposer un projet</span></a></li>
<li><a href="formulaires.html"><span>Les formulaires</span></a></li>
<li><a href="Historique.html"><span>Historique</span></a></li>
<li><a href="Membres.html"><span>Membres</span></a></li>
<li><a href="Liens.html"><span>Liens</span></a></li>
 
  </ul>
</div>

Mon.css est celui là :

Code css :

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
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
 
/*- Menu Tabs H--------------------------- */
 
    #tabsH {
      float:left;
      width:100%;
      background:#000;
      font-size:98%;
      line-height:normal;
      }
    #tabsH ul {
        margin:0;
        padding:30px 10px 0 240px;
        list-style:none;
      }
    #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsH a {
	float:left;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	background-image: url(tableftH.gif);
	background-repeat: no-repeat;
	background-position: left top;
      }
    #tabsH a span {
	float:left;
	display:block;
	padding:5px 15px 4px 6px;
	color:#FFF;
	background-image: url(Images/tabrightH.gif);
	background-repeat: no-repeat;
	background-position: right top;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }
 
        #tabsH #current a {
                background-position:0% -42px;
        }
        #tabsH #current a span {
                background-position:100% -42px;
        }

Le résultat de ma page pour l’instant : http://www.andja.ch/index.html

Sur les images en vertical aussi j’aimerai faire des menus déroulants mais c’est une autre étape, il faudrait déjà que je maitrise les plus simple, parce que sur image je pense que là je joue déjà dans la cours des grands !!

Mon autre souci c’est le logo « Resar » je ne suis pas autorisée à le modifier, je voulais donc l’intégrer dans ma barre de menus, mais le placé sur la barre de cette façon ..est-ce bien raisonnable ?:

Code css :

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

1
2
3
4
5
6
7
8
#logo {
	position:absolute;
	left:-4px;
	top:17px;
	width:143px;
	height:109px;
	z-index:1;
}

Je me demande s’il va rester à sa place ?
Est-ce qu’en ajoutant des codes par la suite je ne risque pas de le voir partir à Tokyo subitement ?
Il y a-t-il une façon plus judicieuse de faire cela ?

Voilà (pour l’instant) mes petits soucis
Désolée d'être si nouille

**12monkeys** · 10/06/2009, 18h53

Bonsoir

Dans un premier temps pour créer un menu déroulant tu peut lire ce tutoriel qui vas t'expliquer en détail comment faire...

Pour ta mise en page, elle n'est pas géniale en effet, trop de position:absolute... Essaye de positionner un peu plus naturellement, un autre tutoriel : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Voilà ce que je ferrais (ce n'est qu'un exemple pour donner un modèle) :

Code html :

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
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
<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Accueil</title>
<link href="index10_fichiers/Styles_perso.css" rel="stylesheet" type="text/css">
<style type="text/css">
#entete {
        width :         1000px;
        height :        120px;
}
#gauche {
        width :         200px;
        float :         left;
}
#contenu {
        width :         800px;
        float :         left;
        background :    red;
}
</style>
</head>
 
<body>
 
<div id="entete">
  <div id="logo">
    <img src="index10_fichiers/Logo.gif" width="150" height="112" alt="Logo">
  </div>
 
  <div id="tabsH">
    <ul>
 
      <li id="current"><a href="http://www.andja.ch/Accueil.html"><span>Accueil</span></a></li>
      <li><a href="http://www.andja.ch/Les%20recherches.html"><span>Les recherches</span></a></li>
      <li><a href="http://www.andja.ch/D%C3%A9poser%20un%20projet%3C.html"><span>Déposer un projet</span></a></li>
      <li><a href="http://www.andja.ch/formulaires.html"><span>Les formulaires</span></a></li>
      <li><a href="http://www.andja.ch/Historique.html"><span>Historique</span></a></li>
      <li><a href="http://www.andja.ch/Membres.html"><span>Membres</span></a></li>
      <li><a href="http://www.andja.ch/Liens.html"><span>Liens</span></a></li>
    </ul>
  </div>
</div>
 
<div id="corps">
  <div id="gauche">
    <div><img src="index10_fichiers/city0_active.jpg" width="110" height="82"></div>
    <div><img src="index10_fichiers/image3.gif" width="110" height="82"></div>
    <div><img src="index10_fichiers/table0_active.jpg" width="110" height="82"></div>
  </div>
  <div id="contenu">
Contenu
  </div>
</div>
 
</body></html>

**Svenna** · 11/06/2009, 21h21

Bonsoir 12monkeys,

Merci pour ton aide très précieuse, et navrée de répondre si tard (journée d'enfer ici )

Essaye de positionner un peu plus naturellement

Rien n'est encore très naturel dans ce domaine pour moi

Je vais pouvoir comparer ton code au mien et comprendre un peu mieux la logique.
Je vais aussi suivre le tutos.

Reste que je n'arrive pas a placer ces fichus sous-menus sur mes boutons de la barre horizontal !

Merci beaucoup en tout cas pour ton aide c'est gentil.

**12monkeys** · 11/06/2009, 21h29

Envoyé par Svenna

Reste que je n'arrive pas a placer ces fichus sous-menus sur mes boutons de la barre horizontal !

La aussi developpez.com as tout ce qu'il te faut : http://css.developpez.com/tutoriels/menu-deroulant/ ce tutoriel t'expliquera pas à pas comment faire...

Créer des menus déroulants

Discussions similaires

Partager

Partager