Discussion :

[Greg12345]

Bonjour,
J'essaie de recréer un menu vertical similaire à celui-ci: http://www.huddletogether.com/projects/lightbox2/
Plutôt que de faire un copier/coller du code j'essaie de le comprendre et de le reproduire.
Malheureusement chez moi je n'arrive pas à ce que le texte de mon menu soit centré verticalement dans les cellules gris foncé
Quel est le problème?
Merci d'avance pour votre aide

Gregory

CSS

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
/* sidebar
----------------------------------------------- */
 
div.sidebar{ position:fixed; top: 100px; left:20px;	width: 200px; }
 
#menuitems{list-style: none; margin: 1.5em 0 1em 0;}
 
#menuitems li{ 
font-size:12px;
padding: 0; 
margin: 0;
}
 
#menuitems a{
	display: block;
	height: 2.0em; /* Epaisseur de chaque item */
	padding: 0 0 0 0.8em;
	margin-bottom: 1px; /*espacement entre chaque item */
	color: #eee; /* couleur du texte du bouton non clické (gris clair) */
	background-color: #333; /* arriere plan du bouton (gris fonce) */
	text-decoration: none;
	}
 
#menuitems a:hover{
	color: #eee; /* couleur du texte du bouton clické (gris clair) */
	background-color: #666;
	text-decoration:none;
	}

XHTML

Code :

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

1
2
3
4
5
6
7
8
<div class="sidebar">
<ul id="menuitems">
		<li><a href="#Biography">Biography</a></li>
		<li><a href="#works">Works</a></li>
        <li><a href="#Exhibitions">Exhibitions List</a></li>
        <li><a href="#Current Projects">Current Projects</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul></div>

[obito]

Salut,

tu veux centrer les liens c'est ça ? Dans ce cas tu as juste à faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#menuitems a{
	display: block;
	height: 2.0em; /* Epaisseur de chaque item */
	padding: 0 0 0 0.8em;
	margin-bottom: 1px; /*espacement entre chaque item */
	color: #eee; /* couleur du texte du bouton non clické (gris clair) */
	background-color: #333; /* arriere plan du bouton (gris fonce) */
	text-decoration: none;
        /*******************/
        text-align:center; /*permet de centrer du texte*/
	}

[Greg12345]

Merci pour ta réponse.
Le problème est que je souhaite centrer mon texte verticalement, et "text align: center" le centre horizontalement :-/

[Macmillenium]

Bonjour,

Au lieu de figer la hauteur, tu peux simplement appliquer à tes éléments un padding vertical:

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
#menuitems a{
	display: block;
	/* height: 2.0em;  Epaisseur de chaque item */
	padding: .3em 0 .3em .8em;
	margin-bottom: 1px; /*espacement entre chaque item */
	color: #eee; /* couleur du texte du bouton non clické (gris clair) */
	background-color: #333; /* arriere plan du bouton (gris fonce) */
	text-decoration: none;
}

[Marc22]

C'est vrai que ça serait bien qu'il y ait un "vertical-align", pour les div, span, li, .., plutôt que de tricher avec les marges..

[Greg12345]

Merci!