[CSS] probleme alignement vertical (bis)

Version imprimable

2 pièce(s) jointe(s)

Bonjour, j'ai bien lu le sujet en dessous qui ressemble, mais j'ai pas trouvé la solution a mon probleme:

sur le Menu1 : mon menu de maintenant.
Donc comme vous le voyez ca prend une ou 2 lignes (j'ai pas de place pour élargir la case). donc j'ai augmenté la taille de la case (Menu2) seulement comme vous voyez le texte reste en haut.
J'ai bien essayé avec un line-height mais ca n'a pas fonctionné.

voici mon bout de CSS:
Code:

1 2 3 4 5 6 7 8 9 10 11 .menu { border-right: #3465CC 0.1em solid; border-top: #3465CC 0.1em solid; border-left: #3465CC 0.1em solid; border-bottom: #3465CC 0.1em solid; margin: 1em; color: #BCD7F3; font-family: arial; font-weight: bold; background: #3465CC; }
et un bout de .js qui finit la mise en page
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function Chargement() { // On va creer les rubriques principales du menu for(i=1; document.getElementById("menu"+i) != null; i++) { with(document.getElementById("menu"+i).style) { position="absolute"; top="1em"; left=(i*7.5)+"em"; width="6.5em"; height="1.2em"; textAlign="center"; margin="0"; padding="0"; zIndex="2"; } }
Voila voila, si quelqu'un a une solution pour centrer le texte .
Quand le texte est sur 2 lignes c'est bon, mais sur une ligne je voudrais qu'il soit au milieu, et je sais pas si c'est possible?
merci de l'aide

10/08/2006, 23h02
backeyes

Bonsoir,

C'est quoi comme élément "menu" ? un div ?
Essaie de rajouter un vertical-align: middle;

1 pièce(s) jointe(s)

non c'est pas un div.

un ptit exemple de mon menu:
Code:

1 2 3 4 <A href="#" title="menu suivant" onclick="window.open('menu_general_suite.jsp?titre=Menu General (suite)', '_top')"> <P class=menu id="menu6"><A href="#" title="menu suivant" onclick="window.open('menu_general_suite.jsp?titre=Menu General (suite)', '_top')">Menu Suivant</A><SPAN> .</SPAN></P> </A>
J'avais deja touché au line-height et vertical-align, mais pas les 2 en meme temps a voir. Donc j'ai bien ce que je veux quand c'est sur 1 ligne, mais ceux sur 2 lignes ca ne marche plus. (voir image)

A mon avis il doit pas y avoir moyen, sauf définir un type pour ceux a une ligne et un autre pour ceux sur 2 lignes...

Edit: bon j'ai trouvé 2 solutions: la première comme j'ai dit, faire 2 type de boites de menu, pour les titres sur une ligne et ceux sur 2, mais je trouvais qu'il y avait trop d'espace dans la boite pour le texte, ca faisait vide.
donc 2eme solution, rallonger les titres pour les mettre tous sur 2 lignes :P
Maintenant ca donne un impression contraire, il y a pu de place mais bon, tant pis...:mrgreen:

Minirom,

En regardant ton exemple, l'imbrication de 2 balises <a> me semble louche...

Je te propose donc une solution à partir de zéro et testée sous IE et Firefox :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
<script>
	function init() {
		height=0
		for(i=1; document.getElementById("menu"+i) != null; i++) {
			if (document.getElementById("menu"+i).offsetHeight > height) {
				height = document.getElementById("menu"+i).offsetHeight;
			}			
		}
		for(i=1; document.getElementById("menu"+i) != null; i++) {
			if (document.getElementById("menu"+i).offsetHeight < height) {
				document.getElementById("menu"+i).style.height=height;
				document.getElementById("menu"+i).style.lineHeight="2";
			}
		}
	}
</script>
<style>
	.menu_bar {
		background: #BCD7F3;
		height: 45px;
		padding: 5px;
	}
	.menu {
		list-style: none;
		margin: 0;
	}
	.menu_item {
		background: #3465CC;
		width: 6.5em;
		text-align: center;
		float: left;
		margin: 0 5px 0 5px;
		vertical-align: middle;
	}
	.menu_item a {
		display: block;
		color: #BCD7F3;
		text-decoration: none;
	}
</style>
</head>
<body onload="init();">
	<div class="menu_bar">
		<ul class="menu">
			<li id="menu1" class="menu_item"><a href="#">Menu 1</a></li>
			<li id="menu2" class="menu_item"><a href="#">Menu 2 sur 2 lignes</a></li>
		</ul>
	</div>
</body>
</html>

C'est du vite fait il y a surement moyen d'amélioré ça

PS : par contre, ca ne fonctionne pas sous Opera :/

11/08/2006, 12h25
minirom
Oui moi aussi ca me semble louche.
C'est pas moi qui ai fait le menu, le code existait déjà.
Mais comme l'application est utilisée depuis un an, j'ai pas envie de changer, ca va déérouter les utilisateurs :P .

Je pense savoir pourquoi il a mis 2 fois <a...>
Il voulais que le texte soit un lien (d'ou le <P...><a...>) et aussi le font soit un lien(on peut cliquer sur la partie bleue) d'ou le premier <a ...>
C'est vrai que j'ai pas modifié, je vais essayer d'enlever le <a ...> du texte, puisque le premier englobe tout.
Et j'avoue que je ne comprend pas non plus a quoi sert son span
Code:

1 2 3 4 .menu SPAN { display: none; }
11/08/2006, 12h25
minirom
Citation:
Envoyé par minirom

Oui moi aussi ca me semble louche.
C'est pas moi qui ai fait le menu, le code existait déjà.
Mais comme l'application est utilisée depuis un an, j'ai pas envie de changer, ca va dérouter les utilisateurs :P . Et c'est utilisé uniquement sous IE (bah ouais...)

Je pense savoir pourquoi il a mis 2 fois <a...>
Il voulais que le texte soit un lien (d'ou le <P...><a...>) et aussi le font soit un lien(on peut cliquer sur la partie bleue) d'ou le premier <a ...>
C'est vrai que j'ai pas modifié, je vais essayer d'enlever le <a ...> du texte, puisque le premier englobe tout.
Et j'avoue que je ne comprend pas non plus a quoi sert son span

Code:

1 2 3 4 .menu SPAN { display: none; }
Edit: oups j'ai voulu editer et j'ai citer :oops:

Redit: bon j'ai essayé ton code c'est bien comme ca que je veux le menu ^^.
ce que j'ai pas dit c'est qu'il y a des sous menus avec.
J'imagine qu'on peut mettre des sous listes dans les listes, je vais essayer pour voir.

Par contre c'est bien comme j'ai dit, on ne peut cliquer que sur le texte dans ton menu, c'est pour ca qu'il y a 2 <a> imbriqués.

merci de ton aide .

bon j'ai modifié le code, je l'ai optimisé, parce qu'il y avait bien plusieurs balises superflues (j'ai du gagne 20% a peu pres 8O )
donc je vais donner un exemple de ma jsp avec le CSS et le javascript necessaire integré.

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
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
<HTML>
<Meta http-equiv="Pragma" content="no-cache">
<head>
  <title>Menu</title>
 
  <style>
<!--
 
.menu {
	border-right: #3465CC 0.1em solid;
	border-top: #3465CC 0.1em solid;
	border-left: #3465CC 0.1em solid;
	border-bottom: #3465CC 0.1em solid;
	margin: 1em;
	color: #BCD7F3;
	font-family: arial;
	font-weight: bold;
	background: #3465CC;
}
 
.ssmenu {
	border-right: #BCD7F3 0.1em solid;
	border-top: #BCD7F3 0.01em solid;
	border-left: #3465CC 0.1em solid;
	border-bottom: #3465CC 0.1em solid;
	margin: 1em;
	color: #BCD7F3;
	background: #3465CC;
	font: bold 10pt arial;
}
.menu SPAN {
	display: none;
}
.ssmenu SPAN {
	display: none;
}
.menu A {
	color: #BCD7F3;
	text-decoration: none;
}
.ssmenu A {
	color: #BCD7F3;
	text-decoration: none;
}
.menu {
	padding: 0 1em;
}
.ssmenu {
	padding: 0;
}
.ssmenu LI {
	padding-left: 0.2em;
	list-style-position: inside;
	color: #FFF;
	list-style-type: disc;
}
.ssmenu LI:hover {
	color: #FFF;
	list-style-type: circle;
	background: #FFF;
}
.ssmenu A:hover {
	color: #3465CC;
	background: #FFF;
}
.ssmenu A:unknown {
	color: #3465CC;
	background: #FFF;
}
-->
</style>
 
  <script type="text/javascript">
<!--
function Charger() {
  // On va creer les rubriques principales du menu
	for(i=1; document.getElementById("menu"+i) != null ; i++) {
		with(document.getElementById("menu"+i).style) {
			position="absolute";
			top="1em";
			left=(i*7.5)+"em";
			width="6.5em";
			height="1.2em";
			textAlign="center";
			margin="0";
			padding="0";
			zIndex="2";
		}
	}
 
  // On va creer les rubirques secondaires du menu (sous-menus)
  for(i=1; document.getElementById("ssmenu"+i) != null; i++) {
    with(document.getElementById("ssmenu"+i).style) {
      position="absolute";
      top="5em";
      left=(i*10.5)+"em";
      width="13em";
      margin="0";
      padding="0";
      zIndex="3";
    }
  }
  // On ne va pas afficher les sous-menus tout de suite
  CacherMenu();
}
 
 
function CacherMenu() {
  for(i=1; window.document.getElementById("ssmenu"+i) != null; i++) {
    with(window.document.getElementById("ssmenu"+i).style) {
      visibility="hidden";
    }
  }
}
 
function MontreMenu(strMenu) {
  document.getElementById(strMenu).style.visibility="visible";
}
//-->
</script>
</head>
<body onLoad="Charger()" topmargin="0" leftmargin="25" rightmargin="0">
 
<!-- exemple menu avec sous-menu -->
<P class="menu" id="menu1" onmouseover="MontreMenu('ssmenu1'); this.style.cursor='hand'" onmouseout="CacherMenu();">Menu1 2 lignes<SPAN>&nbsp;:</SPAN></P>
	<OL class=ssmenu id="ssmenu1" onmouseover="MontreMenu('ssmenu1'); this.style.cursor='hand'" onmouseout="CacherMenu();">
		<LI><A href="#">ssmenu1 </A><SPAN>&nbsp;;</SPAN></LI>
		<LI><A href="#">ssmenu2 </A><SPAN>.</SPAN></LI>
	</OL>
<!-- exemple sans sous menu -->
<A class="menu" id="menu2" href="#">Menu2 2 lignes<SPAN>&nbsp;:</SPAN></A>
 
</body>
</HTML>

Precision: le menu est dans une page avec 2 frames: celle d'en haut contient donc ma jsp de menu, celle d'en bas les resultats lorsqu'on clique sur les liens (donc pas de div menubar ici). C'est pour ca que j'ai redéfini le javascript, puisqu'il me cherchait des parent.frame qui n'existent pas ici.