Bonjour,
Pour le menu j'ai abandonné ce n'est pas grave
Mais j'ai un problème plus important :
Quand il y a trop d econtenu dans le menu, avec IE le div en dessous est poussé, mais avec FF il passe au dessus,
c'est la première fois que IE ne m'a pas décu
Voici le code source :
Page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.:: Gangsta Life ::. Jeu de gangster en ligne en mode texte!</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Gangsta Life est un jeu de gangster en ligne en mode texte!">
<meta name="keywords" content="Gangsta Life,gangster,crime,voler,voiture,drogue,php,mmorpg,rpg,texte,warren,dumortier,jeu,gang,guerre,online,en ligne,voyager,San Francisco,Los Angeles,Las Vegas,San Andreas,cj,sweet,fusil,minigun,shotgun,lance roquette,flingue,mafia,gratuit,honneur,respect,tuning">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="7 days">
<link href="img/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Banniere -->
<div id="banniere1"></div><div id="banniere3"></div><div id="banniere2"></div>
<!-- Contenu menu + page -->
<div id="cont">
<!-- Contenu menu -->
<div id="menu_cont">
<!-- Menu -->
<div id="menu">
<h3>TITRE</h3>
<ul>
<li><a href=index.php>Liens</a></li>
<li><a href=index.php>Liens</a></li>
<li><a href=index.php>Liens</a></li>
<li><a href=index.php>Liens</a></li>
<li><a href=index.php>Liens</a></li>
</ul>
</div>
</div>
<!-- Page -->
<div id="page">
</div>
</div>
<!-- Bande jaune -->
<div id="bande"></div>
<!-- Pied de page -->
<div id="pied1">
© Gangsta Life 2007 <a href="mailto:elwario91@gmail.com">Warren Dumortier</a>
</div>
<div id="pied3"></div>
<div id="pied2">
<img src="img/boutons/php.png" alt="php">
<img src="img/boutons/mysql.png" alt="mysql">
<img src="img/boutons/firefox.png" alt="firefox">
<img src="img/boutons/html.png" alt="html">
<img src="img/boutons/css.png" alt="css">
</div>
</body>
</html>
CSS :
<!--
body {
background : #282828;
font-family : Verdana, Geneva, "Sans-Serif";
font-size : 14px;
}
a {
color : #ffffff;
text-decoration : none;
}
a:hover {
color : #fe6700;
text-decoration : underline;
}
#banniere1 {
float : left;
width : 700px;
height : 90px;
background-image : url("banniere_1.png");
background-repeat : no-repeat;
margin-bottom : 10px;
margin-right : -40px;
}
#banniere2 {
width : auto;
height : 90px;
background-image : url("banniere_2.png");
background-repeat : repeat;
margin-bottom : 10px;
}
#banniere3 {
float : right;
width : 15px;
height : 90px;
background-image : url("banniere_3.png");
background-repeat : no-repeat;
margin-bottom : 10px;
margin-left : -5px;
}
#cont {
width : 100%;
height : 100%;
}
#menu_cont {
float : left;
display : block;
width : 150px;
height : 550px;
background : url("menu_fond.png");
background-repeat : repeat-y;
}
#menu {
width : 150px;
background-color : #848575;
}
#menu ul {
margin : 0;
padding : 0;
list-style : none;
}
#menu li a {
margin : 0;
padding : 0;
text-decoration : none;
color : #fff;
display : block;
width : 150px;
line-height : 18px;
height : 20px;
background : url("menu_liens.png") 0 0;
text-indent : 30px;
}
#menu li a:hover {
background : url("menu_liens.png") 0 -20px;
}
#page {
margin-left : 150px;
background-color : #afafa3;
height : 550px;
background-image : url("page_fond.png");
background-repeat : repeat-x;
}
#pied1 {
float : left;
width : 700px;
clear : both;
height : 40px;
text-align : center;
background-image : url("news_1.png");
background-repeat : no-repeat;
margin-right : -40px;
padding-top : 10px;
}
#pied2 {
width : auto;
height : 40px;
padding-top : 10px;
background-image : url("news_2.png");
background-repeat : repeat-x;
}
#pied3 {
float : right;
width : 15px;
height : 40px;
background-image : url("news_3.png");
background-repeat : no-repeat;
margin-bottom : 10px;
margin-left : -5px;
}
#bande {
width : 100%;
height : 21px;
background-image : url("page_fond.png");
background-repeat : repeat-x;
margin-bottom : 10px;
}
.bleu {
list-style-image : url("puce.png");
padding : 0;
padding-left : 20px;
margin : 0;
margin-bottom : 5px;
}
.noir {
list-style-image : url("puce.png");
padding : 0;
padding-left : 20px;
margin : 0;
margin-bottom : 5px;
}
h1 {
font-size : 22px;
border : 1px dashed #808080;
width : 90%;
}
h2 {
font-size : 20px;
border : 1px dashed #808080;
width : 80%;
}
h3 {
font-size : 18px;
width : 70%;
}
#menu h3 {
position : relative;
height : 20px;
width : 150px;
background : url("menu_titre.png");
margin : 0;
padding : 0;
font-size : 11px;
text-align : center;
color : #ffffff;
}
#ext {
background-image : url("page_fond.png");
background-repeat : repeat-x;
}
#int {
background : #b3b3b3;
}
-->
Désolé que le code soit si long
Je voudrais aussi que quand le menu s'allonge la page ausi, mais je doute que ce soit possible
Merci
