Création d'un menu verticale en HTML et positionement image
Bonjour à toutes et à tous,
J'ai du faire un site avec un design prédéfini par notre université (le design est moche mais j'ai pas le droit de le changer donc bon :/ ).
J'aurais besoin d'aide sur plusieurs points.
Voici l'url du site : https://website.yj.fr
Le
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
| header{
background-color: #173c78;
/* Ecart entre la balise header et l'autre parti donc si padding : 10px alors il sera mon haut et plus bas donc plus grand */
padding: 5px;
text-align: center;
color: #d3d8e0;
}
body{
/* Permet d'adapter le header et le menu à gauche sans blanc */
margin: auto;
padding: auto;
}
.foot footer{
background-color: #173c78;
left: 0;
width: 100%;
bottom: 0;
position: fixed;
text-decoration: none;
color: #d3d8e0;
}
.foot .ecrire{
color: rgb(199, 193, 193);
text-decoration: none;
list-style-type: none;
}
.menuGauche{
background-color: #2d3b61;
width: 175px;
height: 100%;
margin: 0;
padding: 0;
min-height: 100%;
position: fixed;
}
.menuGauche h2{
color: white;
margin-top: 40px;
text-align: center;
padding-left: auto;
padding-bottom: 20px;
}
.menuGauche ul{
float: left;
margin-top: 3px;
padding-left: 60px;
list-style-type: none;
}
.menuGauche ul li{
/* Augmente l'espace entre chaque balise li */
line-height: 50px;
display: block ;
}
.menuGauche ul li a{
color: white;
/* Enleve les decorations de li */
text-decoration: none;
}
.main{
margin-top: 0px;
margin-left: 170px;
padding: 20px;
text-align: center;
}
.main .pict{
float: right;
margin-right: 100px;
margin-bottom:60px;
position: absolute;
} |
Lorsqu'on scroll vers le bas le menu verticale laisse un blanc entre le menu et le header. Comment puis-je résoudre ce problème (j'ai beau chercher sur internet mais je n'arrive vraiment pas à trouver).
De deux, j'aurais besoin que mes images soit plus espacé les une des autres et que la dernière image ce retrouve en bas (j'ai pensé à faire des div à chaque fois mais ca ferais moche dans le code source... même chose pour le &nsap).
Merci de bien vouloir m'aider.
Ps: Je suis débutant en css donc faut pas trop m'en vouloir si vous voyez des fautes ou des bouts de codes qui servent à rien dans le style.css
