Bonjour,
Essaye en précisant
et
pour le #pied.
Ta manière de faire est un peu aléatoire.
Ce qui fait que la gestion des différents éléments de ta page est difficile, confuse.
Comme tu sembles te lancer dans les CSS, j'ai tendance à te suggérer autre chose qui te simplifiera la vie pour la suite.
Place l'ensemble des éléments de ta page dans un bloc qui les contiendra tous et auquel tu donneras, ou pas, des dimensions.
Je te propose de tester
cet exemple.
Tu remarqueras ces différents choix :
— Pour supprimer l'espace par défaut des navigateurs, c'est le
qui a reçu
(et pas une marge négative qui peut varier selon les navigateurs. 16px en général).
— Des dimensions ont été définies un peu partout. C'est souvent nécessaire et utile.
— Le #conteneur (le bloc qui contiend tous les autres) aussi, mais ce n'est pas obligatoire.
— Ces dimensions permettent de mieux gérer le #tete et le #pied et surtout les éléments de la liste du menu. En particulier les liens <a> qui ont été définis avec un
Là, plus besoin de les gérer avec padding.
Si le cœur t'en dis, amuse-toi à tester tout ça.
En voici le code :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Une piste pour ESF</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #000;
color : #fff;
height : 100%;
}
#conteneur {
position: relative;
margin: 0 auto;
width: 760px;
font-family: 'Comic Sans MS';
text-align: left;
border : 1px solid #fff;
background-color: #3a0000;
}
#corps {
margin : 126px 0 60px;
}
#tete, #pied {
position : fixed;
left : 50%;
margin-left : -380px;
width : 760px;
background-color: #c0c0c0;
}
#tete {
top : 0;
height : 116px;
text-align : center;
font-family: 'Arial Rounded MT Bold';
color: #000;
}
#pied {
bottom : 0;
height : 50px;
}
#horaire {
margin-left : 10px;
width: 740px;
font-family: Georgia, serif;
text-align: center;
}
#horaire td {
border-bottom : 1px solid #c0c0c0;
background-color: #5c2222;
text-align: center;
}
#menu {
/* margin: 0px;*/
width: 100%;
text-align: center;
background-color: black;
color: white;
/* position: fixed;
top: 77px;*/
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
/* border-style: none;
margin-bottom: 0;
margin-top: -4px;*/
/* padding-right: 20px;
padding-left: 20px;*/
width: 20%;
height: 25px;
line-height: 25px;
font-family: 'Futura Bk', sans-serif;
/* font-weight: bold;*/
text-align: center;
color: white;
background-color: #000;
}
#menu li a {
display : block;
text-decoration: none;
color: #a66c6c;
}
#menu li a:hover {
color : #fff;
background-color: #a66c6c;
}
p {
margin : 1em;
font-size : 1.1em;
text-align : justify;
color : #e5e5e5;
}
a {
color : #fff;
}
</style>
<base href="http://pingpongfalaise.free.fr/" />
</head>
<body>
<div id="conteneur">
<div id="tete">
<h1 style="margin-top: 0px; height: 71px;">
<img style="border: 8px solid ; width: 60px; height: 60px;" alt=""
src="gif/pingpong006.gif" align="middle" hspace="10" vspace="10">
<strong style="background-color: rgb(255, 102, 0);">ESF TENNIS DE TABLE</strong>
<img style="border: 8px solid ; width: 60px; height: 60px;" alt="" src="gif/pingpong007.gif" align="middle" hspace="10" vspace="10">
</h1>
<div id="menu">
<ul>
<li>Accueil</li>
<li><a href="http://lepingafalaise.free.fr/championnats.html">Championnats</a></li>
<li><a href="http://lepingafalaise.free.fr/classements.html">Classements</a></li>
<li><a href="http://lepingafalaise.free.fr/revuepresse.html">Revue de Presse</a></li>
<li><a href="http://lepingafalaise.free.fr/contacts.html">Contacts</a></li>
</ul>
</div>
<div style="clear:left;"></div>
</div>
<div id="corps">
HAUT<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>
<p>
Si l'envie vous démange, vous pouvez nous rejoindre à <a href="contacts.html">l'espace
sportif Didier Blanco</a> aux horaires suivants :
</p>
<table id="horaire" border="0" cellpadding="4" cellspacing="0">
<tbody>
<tr>
<td style="color: black; background-color: rgb(51, 204, 255);">Jours</td>
<td style="background-color: rgb(51, 204, 255); color: black;">Horaires</td>
<td style="background-color: rgb(51, 204, 255); color: black;" colspan="2" rowspan="1">
Type d'entrainement</td>
</tr>
<tr>
<td>lundi</td>
<td>20 h 00 - 22 h 00</td>
<td colspan="2" rowspan="1">libre</td>
</tr>
<tr>
<td colspan="1" rowspan="3">mardi</td>
<td>17 h 15 - 18 h 15</td>
<td>jeune</td>
<td colspan="1" rowspan="3">dirigé par Anthony</td>
</tr>
<tr>
<td>18 h 15 - 19 h 45</td>
<td>confirmé</td>
</tr>
<tr>
<td>20 h 30 - 22 h 00</td>
<td>adulte</td>
</tr>
<tr>
<td colspan="1" rowspan="3">mercredi</td>
<td>18 h 00 - 19 h 00</td>
<td>babyping</td>
<td>dirigé par Cyril</td>
</tr>
<tr>
<td>18 h 00 - 19 h 00</td>
<td>jeune</td>
<td>dirigé par Anthony</td>
</tr>
<tr>
<td>20 h 00 - 22 h 00</td>
<td colspan="2" rowspan="1">libre</td>
</tr>
<tr>
<td>jeudi</td>
<td>20 h 00 - 22 h 00</td>
<td colspan="2" rowspan="1">libre</td>
</tr>
<tr>
<td colspan="1" rowspan="2">vendredi</td>
<td style="background-color: rgb(0, 153, 0);">20 h 00 - 24 h 00</td>
<td colspan="2" rowspan="1" style="background-color: rgb(0, 153, 0);">compétition départementale</td>
</tr>
<tr>
<td>ou 20 h 00 - 22 h 00</td>
<td colspan="2" rowspan="1">libre</td>
</tr>
<tr>
<td colspan="1" rowspan="2">samedi</td>
<td style="background-color: rgb(0, 153, 0);">15 h 00 - 24 h 00</td>
<td colspan="2" rowspan="1" style="background-color: rgb(0, 153, 0);">compétition régionale</td>
</tr>
<tr>
<td>ou 15 h 00 - 22 h 00</td>
<td colspan="2" rowspan="1">libre</td>
</tr>
</tbody>
</table>
<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>—<br>BAS
</div>
<div id="pied">pied
</div>
</div>
</body>
</html>
++
“gif/pingpong006.gif” est absente.
As-tu testé ta page dans un navigateur plus ancien que le tien ?
Parce que le “fixed” dans
IE6
Y tiens-tu vraiment ?
[/url]
Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/523.12 (KHTML, like Gecko) Safari/419.3