Problème de positionnement

**jason69** · 25/05/2007, 14h52

Salut à tous...

J'ai donc un petit problème de positionnement...

Voila, ma page comporte quatre parties :
- partie du haut
- Menu à gauche
- Partie centrale (contenu de la page)
- Bandeau du bas.

Mais voila, je n'arrive pas à positionner le bandeau du bas en bas (de la page)!

J'ai mis un aperçu du résultat en pièce jointe.

Pourtant voici mon code html et css :

HTML :

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
<html>
<head>
    <title>RESO, le specialiste du second oeuvre /// Espace client - Accueil \\\</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
 
<body>
    <center>
        <div class="site">
            <img src="haut.png" border="0" />
            <br /><br />
            <!-- Partie gauche du site -->
            <div class="partieGauche">
                <!-- Menu de gauche -->
            </div>
 
            <!-- Partie centrale du site : -->
            test
 
            <div class="bandeauBas" align="right">
                Contacts | 
                &copy; Reso 2007
            </div>
 
        </div>
 
    </center>
</body>
 
</html>

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
29
30
31
32
33
34
body
{
    /* Police utilisée sur les pages du site : */
    font-family: arial, Comic Sans MS, helvetica, sans-serif ;
    /* Taille de la police : */
    font-size: 9pt ;
    /* Couleur du texte : */
    color: #000000;
    /* Couleur de fond : */
    background-color: #F7F7DC;
}
 
.bandeauBas
{
    width:100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 2px;
    margin-top: 15px;
    background-color: #DFF2AF;
    font-weight: bold;
}
 
.partieGauche 
{
    float: left;
    width: 150px;
}
 
.site 
{
    background-color: #F7F7DC;
    width: 800px;
}

Vous voyez comment je pourrai arriver à avoir ce que je veux??

Merci d'avance!

**E.Bzz** · 25/05/2007, 14h59

Bonjour,

Code :

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

1
2
3
4
<!-- Partie centrale du site : -->
<div style="height:500px;">
test
</div>

A+

**1407.** · 26/05/2007, 10h11

commence par enlever le margin-top de ton #BandeauBas, a moins que tu veuille qu'il soit situé a 15 px a partir du haut...

je n'ai pas regardé tout le code, mais généralement ces problemes se reglent ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.bandeauBas
{
	width:100%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 2px;
	bottom: 0px; /* calcule a partir du bas */
	margin-bottom: -15px; /* remonte de 15 px a partir du bas */
	background-color: #DFF2AF;
	font-weight: bold;
}

Voila, code pas testé, mais ca devrais fonctionner, ou en tout cas te mettre sur la piste

ah, et dans ton DIV ID="BandeauBas", t'as pas besoin de définir de align, ton truc fais 100% width de toutes facons

**jason69** · 28/05/2007, 16h50

Bon alors j'ai réussi à avoir ce que je voulais

... enfin presque!

Voila, il me reste encore un petit souci, ma partie du bas se positionne beaucoup trop bas (sous FireFox, parce que sur IE, aucun problème, le résultat est parfait)... Pour mieux comprendre j'ai mis en pièce jointe des aperçu des deux résultats (1ère PJ --> FireFox, 2ème PJ --> IE), vous verrez vite le problème (j'ai aussi rajouter des bordures rouges pour mieux visualiser les résultats).

Voici mon code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
.bandeauBas
{
	width:100%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 2px;
	margin-top: 5px;
	background-color: #DFF2AF;
	font-weight: bold;
	text-align: right;
}
 
.milieu
{
	width: 100%;
	height: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: #FF0000;
}
 
.partieGauche 
{
	float: left;
	width: 150px;
	margin-right: 8px;
	text-align: left;
	border-style: solid;
	border-width: 1px;
	border-color: #FF0000;
}
 
.partieCentrale 
{
	width: 600px;
	float: left;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	border-color: #FF0000;
}
 
.site 
{
	background-color: #F7F7DC;
	width: 800px;
	border-style: solid;
	border-width: 1px;
	border-color: #FF0000;
}

Et mon code HTML :

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
29
30
31
32
 
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="style.css" type="text/css">
</head>
 
<body>
	<center>
		<div class="site">
			<!-- Partie haute -->
			<div class="milieu">
 
				<!-- Partie gauche du site -->
				<div class="partieGauche">
					<!-- Contenu -->
				</div>
 
				<!-- Partie centrale du site : -->
				<div class="partieCentrale">
					<!-- Contenu partie centrale -->
				</div>
			</div>
			test
			<!-- Partie du bas : -->
			<div class="bandeauBas">
				<!-- Contenu partie du bas -->
			</div>
		</div>
	</center>
</body>
</html>

Merci d'avance!

Problème de positionnement

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager