Bonjour à tous,
Petit préambule: merci à ce site et à ses contributeurs d'exister, ça aide pas mal quand on a des soucis un peu particulier et qui ne sont repris nulle part dans les doc officielles (ou alors qui sont difficiles à trouver).... Merci à vous
Maintenant, le petit truc qui m'embête depuis deux jours...
J'essaie de faire un site depuis zéro en html5 et CSS3(?) et j'ai un chevauchement entre mon footer et ma section; à noter que si je mets un "aside" en dessous, ça le fait aussi; pouvez-vous m'aider?
voici ma partie html; les footer et section, ne contiennent que du blabla pour l'instant
voici ma partie css pour l'agencement (je le met entier pour que vous puissiez donner un avis, je rappelle que je pars de zéro); merci
Petit préambule: merci à ce site et à ses contributeurs d'exister, ça aide pas mal quand on a des soucis un peu particulier et qui ne sont repris nulle part dans les doc officielles (ou alors qui sont difficiles à trouver).... Merci à vous
Maintenant, le petit truc qui m'embête depuis deux jours...
J'essaie de faire un site depuis zéro en html5 et CSS3(?) et j'ai un chevauchement entre mon footer et ma section; à noter que si je mets un "aside" en dessous, ça le fait aussi; pouvez-vous m'aider?
voici ma partie html; les footer et section, ne contiennent que du blabla pour l'instant
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="images/favicon.png" />
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="pages/style.css" />
<title>Red Knights Europe</title>
</head>
<body>
<div id="page">
<?php include("pages/header.php"); ?>
<?php include("pages/menu1.php"); ?>
<?php include("pages/menu2.php"); ?>
<?php include("pages/section1.php"); ?>
<?php include("pages/footer.php"); ?>
</div>
</body>
</html>voici ma partie css pour l'agencement (je le met entier pour que vous puissiez donner un avis, je rappelle que je pars de zéro); merci
/* Définition des polices du site */
@font-face {
font-family: 'police1';
src: url('polices/police1.ttf');
}
@font-face {
font-family: 'police2';
src: url('polices/police2.ttf');
}
body
{
background-color: red;
font-size: 100%;
background-image: url(../images/fond.jpg);
color: #ffffff;
}
a:link
{
color: white;
text-decoration: none;
}
a:visited
{
color: gray;
}
a:hover
{
color: red;
}
a:focus
{
color: red;
}
a:active
{
color: red;
}
/* Utilisation de la police1 sur les titres h1 */
h1
{
font-family: 'police1', Arial, Verdana, serif;
}
/* Utilisation de la police1 sur les titres h2 */
h2
{
font-family: 'police1', Arial, Verdana, serif;
}
/* Utilisation de la police1 sur les titres h3 */
h3
{
font-family: 'police1', Arial, Verdana, serif;
}
/* Utilisation de la police1 sur les titres h4 */
h4
{
font-family: 'police1', Arial, Verdana, serif;
}
/* Utilisation de la police1 sur les titres h5 */
h5
{
font-family: 'police1', Arial, Verdana, serif;
}
/* Utilisation de la police1 sur les titres h6 */
h6
{
font-family: 'police1', Arial, Verdana, serif;
}
/* Utilisation de la police1 sur les listes quelconques ul */
ul
{
font-family: 'police1', Arial, Verdana, serif;
}
/* Utilisation de la police1 sur les paragraphes p */
p
{
font-family: 'police1', Arial, Verdana, serif;
}
/* Utilisation de la police1 sur les listes numérotées ol */
ol
{
font-family: 'police1', Arial, Verdana, serif;
}
div#page {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
}
/* Caractéristiques des includes */
header.header1
{
background-color: rgba(0, 100, 0, 0.4);
border: 1px dashed black;
border-radius: 0 0 10px 10px;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
nav.menu1
{
float: left;
background-color: rgba(100, 0, 0, 0.4);
display: inline-block;
width: 180px;
border: 1px dashed black;
border-radius: 0 10px 10px 0;
vertical-align: top;
}
nav.menu2
{
float: right;
background-color: rgba(0, 0, 100, 0.4);
display: inline-block;
width: 180px;
border: 1px dashed black;
border-radius: 10px 0 0 10px;
vertical-align: top;
}
section.section1
{
background-color: rgba(0, 0, 255, 0.4);
border: 1px dashed black;
border-radius: 10px;
margin-left: 190px;
margin-right: 190px;
padding: 10px;
}
aside.aside1
{
background-color: rgba(0, 255, 0, 0.4);
border: 1px dashed black;
border-radius: 10px;
margin-left: 190px;
margin-right: 190px;
padding: 10px;
}
footer
{
clear: both;
}
footer.footer1
{
background-color: rgba(255, 0, 0, 0.4);
text-align: center;
position: absolute;
bottom: 0;
border: 1px dashed black;
border-radius: 10px;
margin-left: 190px;
margin-right: 190px;
padding: 10px;
}