[CSS] probleme alignement vertical (bis)

**minirom** · 10/08/2006, 15h03

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 :

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

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 :

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

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

**backeyes** · 10/08/2006, 23h02

Bonsoir,

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

**minirom** · 11/08/2006, 09h19

non c'est pas un div.

un ptit exemple de mon menu:

Code :

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

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>&nbsp;.</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

Maintenant ca donne un impression contraire, il y a pu de place mais bon, tant pis...

**sedryk** · 11/08/2006, 10h48

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 :

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 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 :/

**minirom** · 11/08/2006, 12h25

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

.

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 :

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

1
2
3
4
 
.menu SPAN {
	display: none;
}

**minirom** · 11/08/2006, 12h25

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

. 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 :

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

1
2
3
4
 
.menu SPAN {
	display: none;
}

Edit: oups j'ai voulu editer et j'ai citer

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 .

[CSS] probleme alignement vertical (bis)

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager