Sujet Précédent Sujet Suivant

Footer

Fermé
Macij Messages postés 1130 Date d'inscription jeudi 30 avril 2009 Statut Membre Dernière intervention 13 mars 2023 - 15 avril 2016 à 20:56
Macij Messages postés 1130 Date d'inscription jeudi 30 avril 2009 Statut Membre Dernière intervention 13 mars 2023 - 17 avril 2016 à 13:40
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

Réponse 1 / 2
totoyo47 Messages postés 260 Date d'inscription vendredi 10 juillet 2009 Statut Membre Dernière intervention 30 mars 2020 134
16 avril 2016 à 10:16
Salut,
Rajoute dans ton CSS, pour footer : 
width: 100%;


Si ça ne marche pas, ajouter également à body : 
width: 100%;
0
Raoulouf
17 avril 2016 à 04:32
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
0
Réponse 2 / 2
Macij Messages postés 1130 Date d'inscription jeudi 30 avril 2009 Statut Membre Dernière intervention 13 mars 2023 39
17 avril 2016 à 13:40
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
0

Discussions similaires

HTML2PDF - Footer en bas de page
alexdu17200 -
alexdu17200 -

11 réponses
fpdf, comment mettrevariable dans un footer
jabu1906 -
jabu1906 -

4 réponses
Problème footer Wordpress
lo1574 -
lo1574 -

4 réponses
[HTML - CSS] Fixer le footer en bas de page
patrice86 -
jo -

8 réponses
footer en bas de l'écran et non en bas de la page
Blouwii -
Grandasse_ -

1 réponse