Footer [Fermé]

Signaler
Messages postés
1122
Date d'inscription
jeudi 30 avril 2009
Statut
Membre
Dernière intervention
29 mars 2020
-
Macij
Messages postés
1122
Date d'inscription
jeudi 30 avril 2009
Statut
Membre
Dernière intervention
29 mars 2020
-
Bonsoir à tous,
Dans le cadre d'un travail maison, je suis amené à préparer un site web. J'ai un problème au niveau de mon footer qui me donne un résultat comme http://imagizer.imageshack.com/a/img923/2601/AOxl8g.png ça or j'aimerai qu'il aille sur toute la longueur de la page.
J'ai fait un fichier CSS :
body { 
background-color: rgb(204,153,255);
margin : 10px;
font-family : Verdana, sans-serif;
text-align : justify;
text: rgb(204,153,255);
float : left; 
}
header {
text-align :center; 
font-size : 200%;
padding : 15px;
font-weight: bold;
background-image: url(imgfond.jpg);
color: rgb(255,255,255);
border-radius: 60px;
margin-bottom: 30px;
}
section {
margin-left : 160px;
}
nav {
float : left;
width : 140px;
height : 500px;
text-align :center;
background-color: rgb(145,34,255);
border-radius: 60px;
}
h1 {
border : 1px solid rgb(0,0,0);
text-align: center ;
color: rgb(102,153,102)
}
.style1 {
font-weight: bold;
font-style : italic;
font-size:200%;
text-align: center;
color: rgb(201,56,207)
}
.style2 {
font-size:100%;
text-align: justify;
color: rgb(201,56,207);
a:link color: rgb(0,0,0);
text-indent:30px;
}
footer {
margin : 500px;
text-align: center ;
background-color: rgb(145,34,255);
border-radius: 30px;
}
.image {
text-align: center;
}
a:link { color:rgb(0,0,0); }
a:visited { color:rgb(0,0,0); }
.image2 {
text-align: right;
}
.image3 {
text-align : left;
}
.flotte {
float:right;
}
.flotte1 {
float:right;
}
.flotte2 {
float:left;
}


et aussi un html par page, je vous en donne un :
<!DOCTYPE html>
<html>

<head>
<title> Mes stages </title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<header> Mes stages </header>
<body>
    <p class=style2> J'ai effectué plusieurs stages durant ma scolarité</p>
    <p class=style2>Tout d'abord j'ai efféctué deux stages en Troisième à savoir en janvier 2012, j'ai efféctué un stage de 2 jours à la société Pac Finances
    basée à Aire-Sur-La-Lys dans le Pas-de-Calais. Durant ce stage, j'étais amené à traduire des contrats de bails des bâtiments qui
    abritent des centres commerciaux en Pologne et les traductions se faisaient du Polonais en Français.
    <br>En avril 2012, j'ai efféctué un stage à la Maison de la Presse "Grard" à Auchel dans le Pas-de-Calais.
    Durant ce stage, j'étais amené à réceptionner des commandes, mettre les revues sur les rayons. Je devais également observer
    la facturation des clients.</br></p>
    <p class=style2>En mars, 2014, j'ai effectué mon stage à la librairie Pont-Virgule qui se situe à Esplalion en Aveyron.
    Durant ce stage, j'étais amené à receptionner les colis avec des livres, à aider dans diverses tâches diverses. </p>
    <p class=flotte1><img src="stage Espalion.jpg" width="300" height="300"></p>

<p class=flotte2><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2844.627596589128!2d2.7616100152136696!3d44.52278077910108!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12b292a46cf04971%3A0x1a32bbb1b4e294cc!2sLibrairie+Pont+Virgule!5e0!3m2!1sfr!2sfr!4v1458556668101" width="600" height="450" 
frameborder="0" style="border:0" allowfullscreen> align="left"</iframe></p>

<footer> 
<a href="bio.html"> Maciej</a>
<a href="index.html"> Accueil</a>
<a href="GLT.html"> DUT GLT</a>
<a href="ecoles.html"> Mon parcours scolaire</a>
<a href="divers.html"> Autres informations</a>
<a href="mes loisirs.html"> Mes loisirs</a>
</footer>
</body>


En vous remerciant d'avance pour votre aide
Bonne soirée
Maciej

2 réponses

Messages postés
260
Date d'inscription
vendredi 10 juillet 2009
Statut
Membre
Dernière intervention
30 mars 2020
80
Salut,
Rajoute dans ton CSS, pour footer :
width: 100%;


Si ça ne marche pas, ajouter également à body :
width: 100%;
salut

Pensez aussi à revenir dans le flux après un ou plusieurs float.
Il faut utiliser
clear:both
dans la balise qui est après les éléments hors du flux(en flottant par exemple).

Explications:
http://www.journaldunet.com/developpeur/tutoriel/css/061130-css-comprendre-float-clear.shtml

ou

http://www.w3schools.com/cssref/pr_class_clear.asp
Messages postés
1122
Date d'inscription
jeudi 30 avril 2009
Statut
Membre
Dernière intervention
29 mars 2020
38
Bonjour à tous, merci pour vos réponses, j'ai essayé de faire comme vous me l'avez indiqué, cependant cela ne marche pas car soit d'un côté c'est bien au milieu après les images mais avec un grand décalage (je ne comprends pas la raison de ce décalage) qui ressemble à un alinéa. Existe t-il une solution pour supprimer cet écart.

Merci et bon dimanche

Maciej