Titre: [Poblème] CSS - Footer
Posté par: Noxy le le 23-08-2013 a 20:11:59
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 .. :) |
Titre: Re:[Poblème] CSS - Footer
Posté par: dandreaweb le le 23-08-2013 a 21:33:11
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> |
Titre: Re:[Poblème] CSS - Footer
Posté par: Noxy le le 23-08-2013 a 21:40:11
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 |
Titre: Re:[Poblème] CSS - Footer
Posté par: dandreaweb le le 23-08-2013 a 21:47:32
| 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. |
Titre: Re:[Poblème] CSS - Footer
Posté par: Noxy le le 23-08-2013 a 21:58:03
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 |
Titre: Re:[Poblème] CSS - Footer
Posté par: WebVitrine le le 23-08-2013 a 23:28:43
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. |
Titre: Re:[Poblème] CSS - Footer
Posté par: Noxy le le 24-08-2013 a 06:43: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 .. |
Titre: Re:[Poblème] CSS - Footer
Posté par: dandreaweb le le 24-08-2013 a 08:23:40
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;
} |
Titre: Re:[Poblème] CSS - Footer
Posté par: Noxy le le 24-08-2013 a 12:23:12
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 |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|