Création d'un menu verticale en HTML et positionement image

**forcela** · 06/02/2020, 20h27

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

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

Invité · 07/02/2020, 10h06

Bonjour,

1-

Envoyé par forcela

...le design est moche...

Je confirme.

2-

Code html :

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

1
2
<!DOCTYPE html>
<head>

Il manque <html>.

3- Je ne visualise pas le problème dont tu parles.
Précise sur quel navigateur tu testes ?

4- Pour espacer les images : margin (CSS)

...ca ferais moche dans le code source...

5- On écrit "Accueil".

Création d'un menu verticale en HTML et positionement image

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager