Espace entre une page et un div

**roseblanche_nanou** · 28/11/2022, 13h03

Salut, j'ai un léger soucis, je suis entrain de faire une page en CSS et en html et j'ai voulu faire une barre fixe en bas de page mais j'ai un espace qui reste à gauche entre le contour de ma fenêtre et le div de cette barre, le margin, le pudding et le border sont à 0px mais rien ne change
Merci d'avance de vos réponses

**mathieu** · 28/11/2022, 13h46

montrez nous le code html et css que vous utilisez et éventuellement aussi la page en ligne.

**roseblanche_nanou** · 28/11/2022, 16h48

Voilà le code qui concerne ma barre fixe

Code html :

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
<html>
	<head>
		<style>
                        #barre_fixe
                        {
                        position: fixed;
                        bottom:0; 
                        text-align; center;
                        width: 100%;
                        margin-left:0px;
                        padding-left:0px;
                        border-left: 0px;
                        }
                        
                        #barre
                        {
                        border-collapse:collapse;
                        width: 100%;
                        height: 75px;
                        margin:0px;
                        padding:0px;
                        background-color:#229bd4;
                        }
                        
                        th
                        {
                        padding: 10px;   
                        }
                </style>
	</head>
	<body>
 
 
 
		<div id="barre_fixe">
		<table id="barre" align="center" border="1">
			<tr>
				<th width="25%" id="actif"> image1 </th>
				<th width="25%"> <a href="deuxieme.html">image2</a> </th>
				<th width="25%"> <a href="troisieme.html">image3 </a></th>
				<th width="25%"> <a href="quatrieme.html">image4 </a></th>
			</tr>
		</table>
		</div>
	</body>
</html>

**Doksuri** · 28/11/2022, 17h38

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#barre_fixe
			{
			position: fixed;
			bottom:0; 
			left:0; /*  <====   */
			text-align: center; /* typo ici point-virgule a la place des deux-points */
			width: 100%;
			margin-left:0px;
			padding-left:0px;
			border-left: 0px;
			}

**NoSmoking** · 28/11/2022, 18h26

Bonjour,
il manque le « reset » margin et padding sur les éléments <html> et <body>.

Code :

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

1
2
3
4
5
html,
body {
  margin: 0;
  padding: 0;
}

Envoyé par Doksuri

/* typo ici point-virgule a la place des deux-points */

Effectivement, cependant cela invalidera la déclaration mais pas le reste de la règle.

Conseils si tu débutes oublie les <table> pour de la mise en page, il y a « plus mieux » avec les modèles flex ou encore grid.

De même pour éviter les futures soucis ton fichier devrait commencer par

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="fr">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Le titre</title>
</head>
<body>
  <!-- le contenu -->
</body>
</html>

**roseblanche_nanou** · 28/11/2022, 18h56

A oui effectivement, je n'avais pas vu le point-virgule, merci!!
Avec les changements que vous m'avez dit, l'espace a disparu, encore merci,
et je ne débute pas vraiment mais ça faisait 3ans que je n'avais plus codé en html, css et java, du coup la reprise est dure

Espace entre une page et un div

CSS

Discussions similaires

Partager

Partager