Positionnement du footer

**lola2009** · 17/02/2014, 15h41

Bonjour,

Je suis novice dans le développement web et je suis actuellement un tuto pour faire mon site internet. J’avance pas mal mais depuis hier je rencontre un petit soucis...
Tout fonctionne pour l’instant correctement mais lorsque je paramètre mon ID footer et que je fais appel à lui dans ma page html il apparait en haut de ma page et non en bas....je met le code en dessous. Ces pages ne sont pas en lignes donc je ne peux pas vous mettre le lien.

CSS

Code :

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

1
2
#global-bas	{ width:100%; height:auto; margin:auto; background:url(../images/motif2.png); background-color:#000;}
#footer	{ width:1004px; height:auto; margin:auto; padding:20px 10px 20px 10px; overflow:auto; color:#aaa; font-size:13px;}

HTML

Code html :

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

1
2
3
4
5
6
7
<!--       global bas        -->
<div id="global-bas">
	<div id="footer">
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br>
    </div>
</div>
<!--     Fin global bas      -->

Pièce jointe 138336

Quelqu’un a t il une solution?

**mangasource** · 17/02/2014, 16h04

Je regarde ça ce soir, mais déjà la balise br s'implémente de la manière suivante : <br /> et non </br>

Invité · 17/02/2014, 16h40

Bonjour,
le minimum serait de montrer suffisamment de code.
Ce qui n'est pas le cas.

Envoyé par lola2009

...et je suis actuellement un tuto pour faire mon site internet....

Tu devrais changer de tuto !

Tu peux lire ceci :

**mangasource** · 17/02/2014, 16h46

Effectivement .. Un petit peu plus de code pour replacer ce code dans l'ensemble pourrait être bien

De plus, j'ai du mal à saisir, dans ton code, à quoi correspond ta div global-bas ?

**lola2009** · 17/02/2014, 18h52

Voilà le CSS

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
@charset "UTF-8";
/* CSS Document */
 
@font-face {font-family:’hlv’; /* définition d’une nouvelle police nommée hlv */
	src:url(’hlv.eot’); /* bug ie */
	src:url(’hlv?iefix’) format (’embedded-opentype’), /* bug ie */
		url(’hlv.woff’) format (’woff’),
		url(’hlv.ttf’) format (’truetype’),
		url(’hlv.svg’) format (’svg’);}
 
 
/**********************************************/
/*               BALISES GENERALES            */
/**********************************************/
 
* 		{margin:0; padding:0px; border:0;}
body 	{background:url(../images/motif.png); font-size:14px; color:#000; font-family:’hlv’, arial, serif;} /*motif etoiles*/
p		{text-align:justify;}
 
/**********************************************/
/*               STRUCTURE GENERALES          */
/**********************************************/
 
#global 			{width:1004px; height:auto; margin:auto; padding:20px 10px 20px 10px overflow:auto;} /*global fenetre à 1024px puis marges haut, gauche,bas, droite, oveflow pour étirer le site*/
#gauche 			{width:190px; height:auto; margin-right:20px; float:left; text-align:center; text-transform:uppercase; font-size:25px; line-height:40px; font-weight:bold;} /*taille cellule, marge droite, tous les element apres la colonne à gauche, alignement text centre, texte en majuscule, taillde police 25, interligne40px, graisse police gras*/
#gauche li			{ list-style:none}
#gauche a			{ color:#000; text-decoration:none;}
#gauche a:hover		{ background-color:#000; color:#FFF; padding:5px;}
#gauche a.active	{ background-color:#000; color:#FFF; padding:5px;}
#main				{ width:794px; height:auto; float:left;}
#main-gauche		{ width:600px; height:auto; float:left; margin-right:20px;}
#main-gauche-sh		{ width:600px; height:15px; float:left; background:url(../images/shadow-image.png) no-repeat;}
#main-droite		{ width:174px; height:auto; float:left;}
#main-droite ul		{ border-top:dotted; border-bottom:dotted; padding:5px 0px 5px 0px; border-width:1px;}
#main-droite li		{ list-style:none;}
.date				{ font-size:12px;}
.titre				{ font-size:15px; text-transform:uppercase; background-color:#FF0; font-weight:bold; display:block;}
.sous-titre			{ font-size:13px; text-transform:uppercase; font-weight:bold;}
.btn				{ font-size:15px;}
.btn a				{ background:url(../images/puce-pourfdn.jpg) no-repeat 3px 3px; background-color:#000; color:#FFF; text-decoration:none; padding-left:20px; display:block;}
.btn a:hover		{ background:url(../images/puce-pourfdn2.jpg) no-repeat 3px 3px; background-color:#fcff00; color:#000; text-decoration:none; padding-left:20px; display:block;}
 
#global-bas			{ width:100%; height:auto; margin:auto; background:url(../images/motif2.png); background-color:#000;}
#footer				{ width:1004px; height:auto; margin:auto; padding:20px 10px 20px 10px; overflow:auto; color:#aaa; font-size:13px;}
 
 
 
 
/**********************************************/
/*                   SLIDER                   */
/**********************************************/
 
#slider ul, #slider li 			{ list-style:none; width:600px; height:400px; overflow:hidden;} 
 
 
/**********************************************/
/*                  MARGES                    */
/**********************************************/
.marge-b20 			{ margin-bottom:20px;} 
#marge-b50 			{ margin-bottom:50px;}

Voilà le 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
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
71
72
73
74
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Laurence Grillo</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
                $("#slider").easySlider({
                        auto:true, continuous:true
         });
        });
</script>
</head>
 
<body>
<!-- structure global -->
<div id="global">
	<!-- gauche-->
	<div id="gauche">
    	<img src="images/Logorond.gif" width="152" height="152" id="marge-b50"/>
        <ul>
        	<li><a href="#" class="active">Accueil</a></li>
            <li><a href="#">Qui suis-je?</a></li>
            <li><a href="#">Mon CV</a></li>
            <li><a href="#">Realisations</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- Fin gauche -->
     <!-- Main -->
    <div id="main">
    	 <!-- Main gauche -->
    	<div id="main-gauche">
        	<div id="slider">
            	<ul>
                	<li><img src="images/image-accueil.jpg"/></li>
                </ul>
 
            </div>
 
            <div id="main-gauche-sh"></div>
        </div>
        <!-- Fin main gauche -->	
        <div id="main-droite">
        	<ul class="marge-b20">
        		<li class="date">Année 2014...</li>
				<li class="titre">LAURENCE GRILLO</li>
				<li class="sous-titre">OPENING SESSION</li>
            </ul>
 
            <p class="marge-b20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce 					pulvinar sit amet neque cursus rhoncus.<br/><br/>
Nulla cursus nisl viverra ultricies feugiat. Cras tempus libero sit amet justo varius, at dictum neque tincidunt.<br /><br/>
Sed tristique tempus adipiscing. Suspendisse potenti. Vivamus ornare in lacus ac porttitor. Nullam molestie non elit eu molestie. </p>
 
			<span class="btn"><a href="#">Voir le projet</a></span>
 
        </div>
 
    </div>
    <!-- Fin main -->
</div>
<!-- Fin de structure global -->
<!--       global bas        -->
<div id="global-bas">
	<div id="footer">
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
</div>
<!--     Fin global bas      -->
</body>
</html>

Global bas étant mon footer....

**JefReb** · 18/02/2014, 09h15

Il manque un ; au padding de #global.

Code css :

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

#global 			{width:1004px; height:auto; margin:auto; padding:20px 10px 20px 10px overflow:auto;}

Et ne faudrait-il pas un heigh différent de auto pour le global-bas parce que pour un footer il est bien haut!

**lola2009** · 24/02/2014, 22h56

C’est bon le rooter est bien positionné il fallait rajouter un float:left!
Par contre mon background:url de mon motif ne s’applique pas je n’ai que le background en noir!

**JefReb** · 25/02/2014, 09h35

J'ai remarqué que les images sont indiquées en chemin relatif ( background:url(../images/motif2.png)

Est-ce que le motif est bien là où il doit se trouver? c'est peut être la raison d'un background noir ...
Pour ma part je trouve que le chemin absolu doit être privilégié au chemin relatif car on est sûr de partir de la racine du site. Evidemment si il y a de nombreux sous-dossier, c'est long à coder.
Mais ce n'est juste qu'un avis.

Positionnement du footer

Positionnement en CSS

Discussions similaires

Partager

Partager