[CSS 3] Alignement texte et menu dans barre latérale

[didou038]

Bonjour à toutes et à tous !

j'ai un problème d'alignement en css et comme d'hab je suis sûr que c'est d'une simplicité monstre mais je vois pas mon erreur !

voila en image ce que j'ai actuellement (image : actuel.jpg en pièce jointe)
et voila ce que je veux (image exemple.jpg en pièce jointe)

voila mon code css actuel :

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
#navigation{
	background:#313131 url(./img/background.png); /* le fond*/
/* début ombre portée en css3*/
	-webkit-box-shadow: 30px 0px 15px 15px #ffffff;
	-moz-box-shadow: 30px 0px 15px 15px #ffffff;
	box-shadow: 30px 0px 15px 15px #ffffff; 
/* fin ombre portée en css3*/
/* début dimension et positionnement de la barre latérale */
	width : 150px;
	height : 650px;
	position : fixed;
	left : 0;
/* fin dimension et positionnement de la barre latérale */
/* début alignement du contenu*/
	display:inline-block;
	vertical-align:middle;
	clear:both;
/* fin alignement contenu */
}
#navigation h1,h2{
/* début propriété du texte */
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	text-align: center;
/* fin propriété du texte */
/* début rotation du texte en css3 */
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;
/* fin rotation du texte en css3 */
}
 
#navigationMenu li{
 /* correspond au icone avec une classe supplémentaire par icone plus bas dans le css*/
	list-style:none;
	height:39px;
	padding:2px;
	width:40px;
	margin: 0 0 0 109px;
 
}

j'ai toujours galéré avec ces alignements, merci d'avance pour le coup de main !

Did

edit : en y repensant, ne devrais-je pas décomposé ma barre latérale en 2 div, le premier pour le texte et le second pour mes icônes ?

[Emyleen]

Bonsoir Didou038,

En effet je penses qu'il vaudrait mieux que tu mettes tes icônes dans un bloc. Le schéma ressemblerait à ceci (voir pièce jointe).

Tu n'auras plus qu'a rajouter des margin, des paddings, des tailles et ça devrait être bon

[didou038]

ok merci, je vais voir pour faire cela,

je repasse si j'ai un soucis (ce qui est certain )

edit : apparemment j'y suis arrivé !

[Bisûnûrs]

Envoyé par didou038

edit : apparemment j'y suis arrivé !

C'est alors ?

[didou038]

avant de le mettre en résolu, est-il possible de vous montrer mon css afin de voir si ce que j'ai fait est "propre" ?

je pense que j'ai d'autres soucis qui me font sortir le texte de mes divs, surement lié au position, je fourni le css d'ici ce soir.