Footer
Macij
Messages postés
1130
Date d'inscription
Statut
Membre
Dernière intervention
-
Macij Messages postés 1130 Date d'inscription Statut Membre Dernière intervention -
Macij Messages postés 1130 Date d'inscription Statut Membre Dernière intervention -
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 :
et aussi un html par page, je vous en donne un :
En vous remerciant d'avance pour votre aide
Bonne soirée
Maciej
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
Salut,
Rajoute dans ton CSS, pour footer :
Si ça ne marche pas, ajouter également à body :
Rajoute dans ton CSS, pour footer :
width: 100%;
Si ça ne marche pas, ajouter également à body :
width: 100%;
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
Merci et bon dimanche
Maciej
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