Re,
Bon, pour être plus constructif, j'ai repris le plus important, le reste c'est à toi ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="TITLE" content="" />
<style type="text/css">
body
{
font-family: Arial, sans-serif;
background: #8ea9ff;
width: 810px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
#page
{
width: 800px;
padding: 5px;
background: #FFFFFF;
}
#banniere
{
width: 800px;
height: 151px;
background: url('images/banniere.jpg');
margin-bottom: 5px;
}
#gauche
{
float:left;
width: 130px;
margin-bottom: 5px;
overflow: hidden;
}
#droite
{
width: 200px;
margin-bottom: 5px;
overflow: hidden;
}
#corps
{
float: left;
width: 457px;
padding: 5px;
padding-top: 0px;
}
#bas
{
clear: both;
width: 796px;
background: #6699cc;
text-align: center;
font-size: 12px;
padding: 2px;
color: #FFFFFF;
font-weight: bold;
}
/* Menu */
.menu_bg
{
width: 119px;
height: 18px;
background: url('images/menu_bg.jpg');
padding: 4px;
padding-left: 7px;
font-size: 12px;
font-weight: bold;
font-family: Trebuchet Ms;
}
.sous_menu_bg
{
width: 119px;
height: 18px;
background: url('images/sous_menu_bg.jpg');
padding: 4px;
padding-left: 7px;
font-size: 12px;
color: #000;
font-weight: bold;
font-family: Trebuchet Ms;
}
.menu_bg a
{
color: #000;
text-decoration: none;
}
.menu_bg a:hover
{
color: #FFFFFF;
text-decoration: underline;
}
.sous_menu_bg a
{
color: #000;
text-decoration: none;
}
.sous_menu_bg a:hover
{
color: #FFFFFF;
text-decoration: none;
}
/* News Central */
#news_central
{
height: 180px;
border-bottom: 1px solid #000000;
margin-bottom: 5px;
}
.titre_news_central
{
color: #000000;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.images_news_central
{
float: left;
width: 200px;
height: 150px;
border: 1px solid #000000;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
.desc_news_central
{
font-size: 12px;
}
.desc_news_central a
{
text-decoration: none;
color: #666666;
}
.desc_news_central a:hover
{
color: #3399FF;
}
#autres_news
{
}
.news_block
{
float: left;
width: 105px;
padding: 5px;
padding-top: 0px;
}
.images_autres_news
{
width: 100px;
height: 75px;
border: 1px solid #000000;
margin: 0px;
}
.autres_news_desc
{
font-size: 10px;
}
.autres_news_desc a
{
text-decoration: none;
color: #666666;
}
.autres_news_desc a:hover
{
color: #3399FF;
}
#news_total
{
}
.news_total_titre
{
color: #000000;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold
}
.news_total_images
{
float: left;
width: 200px;
height: 150px;
border: 1px solid #000000;
margin: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
/* Liste de news */
#news_liste
{
}
.news_liste_bloc
{
width: 100%;
overflow: hidden;
}
.news_liste_bloc h1
{
font-weight: bold;
font-size: 12px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
.news_liste_bloc img
{
border: 1px solid #000000;
float:left;
margin: 5px;
width: 100px;
height: 75px;
}
.news_liste_bloc p
{
font-size: 12px;
}
hr{
clear: both;
}
</style>
</head>
<body>
<div id="page">
<div id="banniere">
</div>
<div id="gauche">
<div class="menu_bg">
<a href="../tamil">Tamil</a>
</div>
<div class="sous_menu_bg">
<a href="news.php">Actualites</a>
</div>
<div class="sous_menu_bg">
<a href="previews.php">Previews</a>
</div>
<div class="sous_menu_bg">
Reviews
</div>
<div class="sous_menu_bg">
Bande Annonces
</div>
<div class="sous_menu_bg">
Video
</div>
<div class="menu_bg">
<a href="../hindi">Hindi</a>
</div>
<div class="menu_bg">
<a href="../telugu">Telugu</a>
</div>
<div class="menu_bg">
<a href="../malayalam">Malayalam</a>
</div>
<div class="menu_bg">
<a href="../chat">Chat</a>
</div>
<div class="menu_bg">
<a href="../gallerie">Gallerie</a>
</div>
</div>
<div id="corps">
<div class="news_liste_bloc">
<h1>Dasavatharam - Smart pair</h1>
<img src="http://img.indiaglitz.com/tamil/news/kamal061006_1.jpg" class="news_liste_img">
<p>
Kamal Haasan and Jayapradha were hailed as a great pair in Kollywood in 1980s. Some of the movies like Ninaithalae Inikkum and Salangai Oli, which featured both together, are still watched with great admiration by film-buffs.
</p>
<hr/>
<h1>Arun gets ready for Vedha</h1>
<img src="http://img.indiaglitz.com/tamil/news/arunkumar300906_1.jpg" class="news_liste_img">
<p>
Arun Kumar aka Arun Vijay teams with Ilavattam fame Sheela for his next venture Vedha.
With his Thavam, being produced by Arjun completed, he has commenced shooting for Vedha.
</p>
<hr/>
</div></div>
<div id="droite">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ultricies. Mauris pretium varius nibh. Maecenas vehicula. Nam ultricies odio quis mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus lacinia. Duis ac ligula. Aliquam pellentesque molestie elit. Maecenas sit amet leo id nisl volutpat posuere. Etiam a neque. Phasellus fermentum semper ipsum. Donec pede. Suspendisse condimentum consectetuer leo. Donec fringilla quam vel sem accumsan consectetuer.
</p>
</div>
<div id="bas">
Copyright © 2006 par DesiFrance.com - Tout droits reserve
</div>
</div>
</body>
</html>
Ah oui excuse ...
Je passe tout d'abord tes blocs gauche et centre en float left, ton design étant fixe pas la peine de determiner le bloc centre en taille variable (le bloc centre est réduit de 3px à cause d'un bug d'IE).
J'ai purgé tes div news des blocs inutiles et te renvois à l'utilisation des balises float, h1, p ...
Afin que tes blocs suivent la hauteur de leur contenu sous FF, la solution adopté ici (il y en à d'autres) overflow: hidden; (IE bug encore et le fait tout seul)
Les classes qui n'entraient pas dans l'affichage de la page, je n'y ai pas touché...
Pitié revois ton menu sous forme de liste (excellent tuto sur ce forum) ...
A priori c'est compatible FF et FF (à tester)
Bon courage
Modifié par ghost (07 Oct 2006 - 01:16)
