Menu vertical mal placé

vesgre · 05/07/2011, 12h02

Bonjour,

Je suis en train de créer un menu vertical et celui ci ne s'inscrit pas dans le bloc menu.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
/head>
 <body>
 
<div id="en_tete"><h1>la tête dans les étoiles</h1></div>
 
<div id="menu"> 
 <img src="LOGO.png" alt=""/>
 
 </div>
 
 <div id="sous_menu">
 <h2>Accueil</h2>
 <h2>Installation</h2>
 <ul>
 <li><a href="#">Ordinateur</a></li>
 <li><a href="#">Connexion internet</a></li>
 <li><a href="#">Imprimante</a></li>
 <li><a href="#">Logiciels</a></li>
 <li><a href="#">Application internet</a></li>
 <li><a href="#">Wifi</a></li>
 <li><a href="#">Mise en réseaux</a></li>
 </ul>
 
 
 <ul id="onglets">
    <li class="active"><a href="Accueil.html"> Accueil </a></li>
    <li><a href="Depannage.html"> Depannage </a></li>
    <li><a href="Maintenance.html"> Maintenance </a></li>
    <li><a href="Formation.html"> Formation </a></li>
    <li><a href="Tarifs.html"> Tarifs </a></li>
    <li><a href="Livre d'or.html"> Livre d'or </a></li>
  </ul>
</div>

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
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
#menu
{
        border-bottom : 1px solid #9EA0A1;
		padding-top: 2px;
        padding-bottom : 25px;
}
 
#menu h2
{
        font-family: Arial, "Times New Roman", Times, sans-serif;
		line-height: 6px;
		margin: 20px;
		color: #FFFFFF;
 
}
 
#sous_menu
{
margin-left: -400px;
font-family: Arial;
color: #FFFFFF;
}
 
 
 
 
#menu img
{
display: block;
margin: 60px;
margin-top: 20px;
}
 
#onglets
{
        position : absolute;
        border : 1px solid transparent;
        padding : 0;
        font : bold 25px Batang, arial, serif;
        list-style-type : none;
        left : 50%;
        margin-top : -330px;
        width : 850px;
		margin-left : -195px; /* la moitié de width */
 
}
 
 
#onglets li
{
    float : left;
    height : 32px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: #CC0000;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #9EA0A1;
}
 
#onglets li.active
{
color: #CC0000;
    border-bottom: 1px solid #DDDDDD;
    background-color: #999087;
 
}
 
#onglets a
{
    display : block;
    color : #FFFFFF;
    text-decoration : none;
    padding : 4px;
}
 
#onglets a:hover
{
    background : #DDDDDD;
}

merci d'avance car je suis bloquée...

Bisûnûrs · 05/07/2011, 12h06

Sans doute un problème de parent qui n'englobe pas ses enfants :
http://css.developpez.com/faq/?page=...ment_flottants

vesgre · 05/07/2011, 13h26

La réponse ne s'était pas affichée....

Où placer ces codes html parent enfant...

Je nage

Bisûnûrs · 05/07/2011, 14h04

Ben ton parent #menu a des enfants flottants comme #onglets. Maintenant sur la FAQ c'est expliqué comment gérer le cas et je pourrai pas mieux te l'expliquer moi-même.

Arekk · 05/07/2011, 15h57

Salut,

Il y'a moyen de simplifier ton menu.
Regarde ce tuto de menu HTML + CSS. Très simple et puissant

http://css.developpez.com/tutoriels/menu-deroulant/

05/07/2011, 12h06	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Sans doute un problème de parent qui n'englobe pas ses enfants : http://css.developpez.com/faq/?page=...ment_flottants
	00

05/07/2011, 13h26	#3
vesgre Inscription : juillet 2011 Messages : 3 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : juillet 2011 Messages : 3 Points : -1 Points : -1	La réponse ne s'était pas affichée.... Où placer ces codes html parent enfant... Je nage
	00

05/07/2011, 14h04	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Ben ton parent #menu a des enfants flottants comme #onglets. Maintenant sur la FAQ c'est expliqué comment gérer le cas et je pourrai pas mieux te l'expliquer moi-même.
	00

05/07/2011, 15h57	#5
Arekk Candidat au titre de Membre du Club Alex Webmaster Inscription : juillet 2011 Messages : 10 Détails du profil Informations personnelles : Nom : Alex Âge : 22 Localisation : France Informations professionnelles : Activité : Webmaster Informations forums : Inscription : juillet 2011 Messages : 10 Points : 11 Points : 11	Salut, Il y'a moyen de simplifier ton menu. Regarde ce tuto de menu HTML + CSS. Très simple et puissant http://css.developpez.com/tutoriels/menu-deroulant/
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email