Positionnement menus

**Spanish_** · 11/04/2008, 11h35

Bonjour,

J'aimerais réaliser une page d'accueil avec des menus à droit et à gauche et un au milieu qui décrirais mon site.

je viens vous demander de l'aide car j'ai commencer le code de mes menus mais il ya un décalage entre les deux.
J'en veux un tout à gauche "Actualités", et un tout à droite "Contact" mais sur la meme ligne.

Voici mon code :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="TEST">
<meta name="KeyWords" content="test">
 
<title>TEST</title>
 
<style type="text/css">
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000099;
  margin: 5px;
}
 
a {
  color: #000099;
  text-decoration: none;
}
 
a:hover {
  color: #FF0000;
  BACKGROUND: yellow    
  text-decoration: underline;
}
 
.bord_perso {
  border: 1px outset ;
  font-family: Goudy Old Style;
  font-size: 15px;
 
}
 
.fond{ 
    background-image:url(.\images\menu_fond.jpg); 
    text-align:center;
    width="100";
    height="400";
    font-weight: bold;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;    
 
} 
 
 
.titrebox_menu_gauche_1 { 
/* Titre */ 
    font: bold 15px arial, helvetica, sans-serif; 
    color: #000000; 
    background-color: transparent; 
    border: 1px solid #330066; 
    white-space: nowrap; 
    text-align: center; 
    line-height: 26px; 
    height: 26px; 
    width: 174px; 
    padding: 0;
    float:left;
    
}
 
.tblbox { 
    /* Corps */ color: inherit; 
    background-color: transparent; 
    border: 1px solid #330066; 
    text-align: left; 
    margin-bottom: 16px;
     margin-right:95%;
    padding: 0px;
    height: 100px;
    width: 174px;
    float:left;
}
 
.titrebox_menu_droite_1 { 
/* Titre */ 
    font: bold 15px arial, helvetica, sans-serif; 
    color: #000000; 
    background-color: transparent; 
    border: 1px solid #330066; 
    white-space: nowrap; 
    text-align: center; 
    line-height: 26px; 
    height: 26px; 
    width: 174px; 
    padding: 0;
    float:right;
}
 
.tblboxdroite { 
    /* Corps */ color: inherit; 
    background-color: transparent; 
    border: 1px solid #330066; 
    text-align: left; 
    margin-bottom: 16px;
     margin-left:80%;
    padding: 0px;
    height: 100px;
    width: 174px;
    float:right;
    
}
 
 
 
 
 
.tblboxover { /* Corps survolé */ color: inherit; background-color: transparent; border: 1px solid #330066; text-align: left; margin-bottom: 8px; padding: 4px;} 
 
</style>
 
 
 
 
</head>
 
 
<body>
 
<div class="titrebox_menu_gauche_1" ><a href="actualites.php target="PAGE">Actualités</a></div>
 
<div class="titrebox_menu_droite_1"><a href="actualites.php target="PAGE">Contact</a></div>
<div class="tblboxdroite"></div>
<div class="tblbox"></div>
 
 
 
 
 
 
 
</body>
</html>

MErci d'avance

**pierre24** · 11/04/2008, 15h37

Il faut en gros que tu construise 3 calques sur ta pages et que tu les positionne en float (left). Apres tu adaptes tes largeurs et tu peux arriver à ce que tu demandes.

C'est une solution parmi d'autres !

**Spanish_** · 17/04/2008, 14h45

Merci du conseil, mais en fait je me suis plutot tourné vers une autre solution:
En utilisant

Code :

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

1
2
3
position:absolute;
top:100px;
left: 10px;

A+

**deejay2221** · 17/04/2008, 17h28

fait attention avec les positions Absolues. Toutes les versions d'Internet Explorer gèrent mal le positionnement absolu.

Si ta page est statique, il n'y a pas de problèmes habituellement. Mais quand tu rajoute des éléments dynamiques avec du javascript par exemple, tous tes divs en absolute vont décaller.

Il faut souvent se creuser la tête avec IE pour arriver à faire de quoi qui est si simple avec Firefox

D'ailleurs, ouvre ta page qui décale en IE avec Firefox et je suis prêt à gager qu'il n'y a aucun problèmes d'affichage

**pierre24** · 21/04/2008, 10h39

En effet, il ne faut pas d'elements dynamiques en dessus du sous-menu ,je comprends !

Positionnement menus

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager