[Poblème] CSS - Footer - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  [Poblème] CSS - Footer

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: [Poblème] CSS - Footer (Lu 8074 fois)

[Poblème] CSS - Footer
« sur: le 23-08-2013 a 20:11:59 »

Noxy
Membre récent

Hors-Ligne

Messages: 13

Bonsoir ça à l'air bête mais j'ai un problème avec l'alignement de mon footer ... je n'arrive pas à le positionner en bas de ma page ...

index.php

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./_js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./_js/ajax.js"></script>
<LINK rel=stylesheet type="text/css" href="css/style.css">
</HEAD>
<BODY>

<div id="content">
<?php include('includes/header.php'); ?>

<center><h4><em>Bienvenue sur mon site web perso. A travers celui-ci vous pourrez découvrir mes réalisations et mes compétences en Webmastering.</em></h4></center>

</div>

<div id="footer"></div>

</BODY>
</HTML>

style.css

Code:
html, body {
background:url('../images/background.png') center fixed no-repeat;
background-size:100%;
margin:0;
padding:0;
height: 100%;
}

#content {
color:black;
font-size:16px;
padding:50px 10px 10px 10px;
border-radius:0px 0px 5px 5px;
background-color:#D8D8D8;
width:800px;
height:auto;
margin:0 auto;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 2px 2px 12px black;
}

#footer {
background-color:#D8D8D8;
margin:0 auto;
left:0;
bottom: 0;
right:0;
height: 25px;
width:800px;
text-align:center;
border-radius: 10px 10px 0px 0px;
text-align:center;
padding: 3px 3px 3px 3px;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 1px 1px 12px #555;
border-top: 3px solid #D8D8D8;
border-left: 3px solid #D8D8D8;
border-right: 3px solid #D8D8D8;
}

a {
text-decoration:none;
color:black;
}

p {
color:black;
}

#title{
float:left;
margin-left:25px;
z-index:1;
}

.name{
font-family: Tahoma, Verdana, sans-serif;
color: black;
font-size:25px;
}

.subtitle{
font-family: Tahoma, Verdana, sans-serif;
color: black;
font-size:12px;
font-style:italic;
}

#menu{
margin-left:46%;
margin-bottom:50px;
}
.buttonhome{
font-family: Tahoma, Verdana, sans-serif;
width:auto;
height:auto;
display: inline-block;
color: black;
margin-right:20px;
transition:1s;
text-decoration:bold;
font-weight : bold;
box-shadow: 1px 1px 12px #555;
border-radius: 5px;
padding: 4px 4px 4px 4px;
border: 3px outset #D8D8D8;
}

.buttonhome:hover{
background: rgba(0,0,0,.5);
font-family: Tahoma, Verdana, sans-serif;
border-radius: 5px;
width:auto;
height:auto;
display: inline-block;
padding: 4px 4px 4px 4px;
border: 3px inset #D8D8D8;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 1px 1px 12px #555;
color: white;
transition:0.5s;
font-weight : bold;
}

.button{
background:url(images/bg-button.png);
font-family: Tahoma, Verdana, sans-serif;
width:auto;
height:auto;
display: inline-block;
color: black;
margin-right:20px;
transition:1s;
text-decoration:bold;
font-weight : bold;
box-shadow: 1px 1px 12px #555;
border-radius: 5px;
padding: 4px 4px 4px 4px;
border: 3px outset #D8D8D8;
}
.button:hover{
background: rgba(0,0,0,.5);
font-family: Tahoma, Verdana, sans-serif;
border-radius: 5px;
width:auto;
height:auto;
display: inline-block;
padding: 4px 4px 4px 4px;
border: 3px inset #D8D8D8;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 1px 1px 12px #555;
color: white;
transition:0.5s;
font-weight : bold;
}
.size{
font-size:20px;
}

@font-face {
font-family: zenda; src: url('./polices/zenda.ttf');
}

Merci d'avance pour votre aide ..

Rapporter au modérateur

Re:[Poblème] CSS - Footer
« Répondre #1 sur: le 23-08-2013 a 21:33:11 »

dandreaweb
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 124

dandreaweb

Bonsoir,
Modifier votre code html, je pense que ça ira mieux:

<div id="content">
<?php include('includes/header.php'); ?>

<center><h4><em>Bienvenue sur mon site web perso. A travers celui-ci vous pourrez découvrir mes réalisations et mes compétences en Webmastering.</em></h4></center>
<div id="footer"></div>
</div>

Rapporter au modérateur

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618

Re:[Poblème] CSS - Footer
« Répondre #2 sur: le 23-08-2013 a 21:40:11 »

Noxy
Membre récent

Hors-Ligne

Messages: 13

Tout d'abord merci pour votre réponse.
Votre technique qui consiste à mettre le footer dans le div content ne marche pas non plus.

Voilà ce que cela me donne:

http://image.noelshack.com/fichiers/2013/34/1377286753-site.png

« Dernière Édition: le 23-08-2013 a 21:41:18 par Noxy »

Rapporter au modérateur

Re:[Poblème] CSS - Footer
« Répondre #3 sur: le 23-08-2013 a 21:47:32 »

dandreaweb
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 124

dandreaweb

votre div content a un padding à gauche de 10px et vu que votre footer à la même largeur que cette div c'est normal que le footer dépasse à droite. Je n'ai pas regarder le code plus que ça. Essayer de diminuer la taille du footer à 790px. Si ça ne fonctionne toujours, je regarderai demain plus en détails.

Rapporter au modérateur

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618

Re:[Poblème] CSS - Footer
« Répondre #4 sur: le 23-08-2013 a 21:58:03 »

Noxy
Membre récent

Hors-Ligne

Messages: 13

Entendu merci beaucoup pour votre aide je le fais tout de suite

EDIT: et cela ne fonctionne toujours pas malheureusement :/

J'attends de vos nouvelles avec impatience
Bonne soirée

« Dernière Édition: le 23-08-2013 a 22:00:42 par Noxy »

Rapporter au modérateur

Re:[Poblème] CSS - Footer
« Répondre #5 sur: le 23-08-2013 a 23:28:43 »

WebVitrine
Superactif

Hors-Ligne

Sexe: Male

Messages: 639

Critique Mastery Max level !

Beaucoup de choses dans le css ne servent pas à grand chose.
Les arguments right, left, height : auto ou le height : 100%, et j'en passe...

A votre place, pour mieux comprendre le déroulement de votre code, je coderais la page, au fur et à mesure, comme suit :

<div id="header">
</div>

<div id="main">
</div>

<div id="footer">
</div>

Ensuite, dans la div "main", j'ajouterais une seconde div pour votre contenu :

<div id="main">
<div id="main-content"> </div>
</div>

Je pense que le problème d'alignement provient principalement des différents padding. A savoir que lorsque vous créez une box de 800 pixels de large (width: 800px;), et que vous lui ajoutez un padding : 50px 10px 10px 10px; Votre box prend au final une largeur de 820 pixel. C'est pour cela que votre content est plus large que votre footer.

C'est déjà une piste pour vous.

« Dernière Édition: le 23-08-2013 a 23:29:53 par WebVitrine »

Rapporter au modérateur

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016

Re:[Poblème] CSS - Footer
« Répondre #6 sur: le 24-08-2013 a 06:43:13 »

Noxy
Membre récent

Hors-Ligne

Messages: 13

Merci d'avoir répondu "Webvitrine" mais vous m'avez un peu embrouillé la :/ désolé mais j'ai toujours eu du mal avec le css .. même après avoir relu et relu des tutos ..

Rapporter au modérateur

Re:[Poblème] CSS - Footer
« Répondre #7 sur: le 24-08-2013 a 08:23:40 »

dandreaweb
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 124

dandreaweb

Webvitrine vous explique seulement comment mieux structurer votre code afin que vous puissiez appliquer aisément différents style sur les divers éléments html et bien garder le contrôle sur ceux-ci.

Pour votre problème, le footer est décalé à gauche parceque vous avez un padding à gauche sur le content.
Ensuite le footer dépasse car vous avez une largeur de 800px sur celui-ci (le même que le content) avec un padding 3px à gauche et à droite soit au total 806px.
Je vous ai rapidement modifier le content et le footer ci-dessous mais il vaudrait mieux repartir sur de bonnes bases car vous allez être perdu rapidement.

#content {
color:black;
font-size:16px;
padding-top:50px;
border-radius:0px 0px 5px 5px;
background-color:#D8D8D8;
width:800px;
margin:0 auto;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 2px 2px 12px black;
}

#footer {
background-color:#D8D8D8;
margin:0 auto;
height: 25px;
text-align:center;
border-radius: 10px 10px 0px 0px;
text-align:center;
padding: 3px 3px 3px 3px;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 1px 1px 12px #555;
border-top: 3px solid #D8D8D8;
border-left: 3px solid #D8D8D8;
border-right: 3px solid #D8D8D8;
}

« Dernière Édition: le 24-08-2013 a 08:25:05 par dandreaweb »

Rapporter au modérateur

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618

Re:[Poblème] CSS - Footer
« Répondre #8 sur: le 24-08-2013 a 12:23:12 »

Noxy
Membre récent

Hors-Ligne

Messages: 13

Entendu, merci beaucoup pour votre aide je test cela cet après midi car la je ne suis pas devant mon pc

EDIT: le problème persiste :/ mais merci pour votre aide

« Dernière Édition: le 25-08-2013 a 22:16:13 par Noxy »

Rapporter au modérateur