Bonjour,
J'espère que vous allez bien.... Moi très bien mais j'ai un problème ! un Gros : je débute css xD
J'avais fait une première version de mon site tout bien, mais lorsque je change mon css...ça redevient une catastrophe.
J'ai tout fait pour firefox (galère evidemment) et rien ne marche sur IE (pas grand chose du moins).
Je souhaiterai que le menu sur firefox reste "fixed" mais qu'il ne garde pas l'espace du haut lorsque l'on descend en bas.
je vais mettre le html et le css, le lien est : http://clan.tkt.free.fr/test.php
=================================================================
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>Clan TkT</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design2.css" />
<meta name="Description" CONTENT="Site du Clan TKT de Warcraft 3 - The Frozen Throne" />
<meta name="Rating" CONTENT="Fan de jeux vidéos, joueurs de warcraft 3 - The Frozen Throne" />
<meta name="Rev" CONTENT="aurastyles@hotmail.com" />
<meta name="Subject" CONTENT="Page d'accueil du Clan TKT" />
<meta name="Keywords" CONTENT="Clan TKT, Warcraft 3, Frozen throne, TINQUIETE" />
</head>
<body>
<div id="conteneur">
<div id="en_tete">
<?php include ('haut.php'); ?>
</div>
<div id="session">
<?php include ('session.php'); ?>
</div>
<div id="menu">
<?php include ('menu.php'); ?>
</div>
<div id="corps">
<h1>Bienvenue sur le Site du clan TKT !</h2>
<p><br>
<?php
echo 'Il est ' . date('H\hi\m\i\n') .'<br /><br />';
?>
( ......................code php............)
<br>
<h2><a href="http://clan.tkt.free.fr/debutant.php" title="Tu veux t'améliorer ??">Par ici les débutants.</a></h2>
<br><br><br><br><br>
<a href="http://clan.tkt.free.fr/debutant.php" title="Tu veux t'améliorer ??">Par ici les débutants.</a>test<br><br><br><br><br>
</p>
</div>
<div id="pied_de_page">
<?php include ('bas.php'); ?>
</div>
</div>
</body></html>
========================================================
PUIS le code css :
===========================================================
body
{
margin: 2% 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */
#en_tete
{
width:822px;
height:82px;
border: 2px solid #ab4 ;
background: #dea ;
position:relative;
margin:2%;
}
#conteneur
{
/*position:absolute;*/
width: 96% ;/*975px*/
height:90%;
margin:2%;
border: 2px solid #ab4 ;
background: #fff ;
}
/*#corps, #menu{position:relative;height:100%}*/
#corps
{
position:relative;
border: 2px solid #ab4 ;
text-align: left ;
background: #dea ;
padding: 0 1% 0 5% ;
margin:2%;
bottom:20%;
height:100%;
margin-left:25%;
width:67%;
margin-top:4%;
}
#menu
{
position:fixed;
width:20%;
/*width:180px;*/
border: 2px solid #ab4 ;
background: #dea ;
margin-left:2%;
margin-top:2%;
}
#session
{
width:8%;
margin:2%;
border: 2px solid #ab4 ;
background: #dea ;
padding:1%;
position:absolute;
right:1.5%;
top:4.5%;
}
#pied_de_page
{
position:relative;
border: 2px solid #ab4 ;
background: #dea ;
margin : 2%;
}
/* -------------------------------------------------------------------------------------------------------------------------------------- */
h1#en_tete
{
border: 2px solid #ab4 ;
background: #dea ;
height: 258px;
background: url(apple.jpg) no-repeat left top;
}
/* Une image de fond correspondant aux 258 pixels
de tout à l'heure, attention à bien compresser vos images */
/* On ajoute un petit élément décoratif sur le côté
de la page et on crée un espace à gauche et à droite du corps */
div#corps h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
/* Mise en forme du titre de page, une petite image,
on décale le texte en fonction de l'image, on donne un couleur au texte et
on met une bordure basse */
div#corps h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
/* De même que pour le titre h2, à ceci près qu'on
ne donne pas d'image décorative cette fois ci */
div#corps p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié,
alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
div#corps a
{
color: #8a0 ;
}
div#corps a:hover
{
color: #9b2;
}
/* On met en forme les liens corps dans la page */
p#pied_de_page
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police
et un léger espace entre le texte et les bords du pre */
pre span
{
color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
eux mêmes compris dans un pre */
pre span.comment
{
color: #b30000 ;
}
/* Couleur différente pour les span.comment, les span
utilisés pour les commentaires */
#menu .gris
{
color:gray;
}
======================================================
J'ai fait presque tous les tutoriels connus, et là je me retrouve toujours avec les mêmes problèmes, car je ne comprends pas...
Pouvez-vous m'aider s'il vous plait ?!
(le lien est : http://clan.tkt.free.fr/test.php (pour ceux qui sont perdus))
Balise p css ie firefox
