Bonjour à tous,
j'ai presque fini de créer mon site web, mais j'ai quelques petit problèmes au niveau du placement des blocs, déjà, j'ai deux résultats différent suivant si je suis sous Firefox ou sous IE. Voici deux captures d'écran:
Sous IE:
Cliquez ici
Sous firefox:
Clqiuez ici
Voila maintenant le résultat auquel j'aimerais arrivé:
Clqiuez ici
Voici une bout de mon code CSS:
Et mon code xHTML:
J'ai regarder sur le site, j'ai fait validé mon code, mais je n'ai toujours pas trouver comment faire.
Merci de votre aide !
Modifié par Flavieng (28 Mar 2007 - 12:06)
j'ai presque fini de créer mon site web, mais j'ai quelques petit problèmes au niveau du placement des blocs, déjà, j'ai deux résultats différent suivant si je suis sous Firefox ou sous IE. Voici deux captures d'écran:
Sous IE:
Cliquez ici
Sous firefox:
Clqiuez ici
Voila maintenant le résultat auquel j'aimerais arrivé:
Clqiuez ici
Voici une bout de mon code CSS:
/* Rubriques */
#la_une, #billets, #dossiers, #info_en_continu, #le_chiffre
{
margin-left: 3px;
margin-top: 5px;
}
#trombinoscope, #sujets, #la_tele, #pub, #recherche, #services-outils
{
margin-top: 5px;
}
/* Placements */
#la_une
{
text-align: justify;
width: 59%;
float: left;
margin-right: 10px;
}
#dossiers
{
width: 30%;
float: left;
}
#trombinoscope
{
width: 30%;
margin-left: 31%;
}
#la_tele
{
width: 30%;
margin-left: 62%;
}
#billets
{
width: 30%;
float: left;
}
#sujets
{
width: 30%;
margin-left: 31%;
}
#recherche
{
width: 30%;
margin-left: 62%;
}
#services-outils
{
width: 32%;
margin-left: 62%;
}
#le_chiffre
{
text-align: justify;
width: 59%;
float: left;
margin-right: 10px;
}
#info_en_continu
{
width: 30%;
float: left;
clear: left;
}
#pub
{
width: 60%;
margin-left: 31%;
}
#footer
{
clear: both;
background: url("pub.png");
}
#dossiers, #trombinoscope, #la_tele, #billets, #sujets, #services-outils, #le_chiffre, #info_en_continu
{
font-size: 0.8em;
font-family: Arial, "Times New Roman", sans-serif;
text-decoration: none;
color: #000;
}Et mon code xHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Médiactu - Accueil</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<meta name="Identifier-url" content="http://www.mediactu.biz/">
<meta name="DC.description" content="Toute l'actu média">
<meta name="Keywords" content="mediactu, europe 1, médias, actu, télévision, star, academy, photo, tf1, france 2, france 3, blog, audience, radio, critique, tv, M6, cable, satellite, TNT, programme, internet, informatiques, news, presse, prime, discothèque, ppda, time, discuter, arthur, fogiel, delarue, dechavanne">
<meta name="Contact" content="contact@mediactu.biz">
<link rel="accueil" title="Accueil" href="http://www.mediactu.biz/">
<link rel="blog" title="Blog" href="http://blog.mediactu.biz/">
<link rel="forum" title="Forum" href="http://forum.mediactu.biz/">
<link rel="annuaire" title="Annuaire" href="http://annuaire.mediactu.biz/">
<link rel="boutique" title="Boutique" href="http://boutique.mediactu.biz/">
<link rel="contact" title="Contact" href="http://www.mediactu.biz/contact.php">
<link rel="ancien_blog" title="Ancien blog" href="http://lepetiecran.canalblog.com/archives/index.html">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link href="images-template/icone.ico" rel="shortcut icon">
</head>
<body>
<div id="page">
<a href="http://www.mediactu.biz">
<div id="header">
<p id="acces_rapide">
<a href="#header">Bannière</a> | <a href="#navigation_parties">Navigation principale</a> | <a href="#la_une">A la une</a> | <a href="#dossiers">Dossiers</a> | <a href="#trombinoscope">Trombinoscope</a> | <a href="#la_tele">Ce soir à la télé</a> | <a href="#billets">Derniers billets</a> | <a href="#sujets">Derniers sujets</a> | <a href="#recherche">Recherche</a> | <a href="#navigation_menu">Navigation secondaire</a> | <a href="#le_chiffre">Le chiffre</a> | <a href="#info_en_continu">L'info en continu</a> | <a href="#footer">Pied de page</a>
</p>
<p>
<h1>MEDIACTU</h1><br />
<h1>Toute l'actu média</h1>
</p>
</div></a>
<div id="navigation_parties">
<ul id="nav-box"><li><a href="http://www.mediactu.biz/">ACCUEIL</a></li><li><a href="http://blog.mediactu.biz/">Blog</a></li><li><a href="http://forum.mediactu.biz/">Forum</a></li><li><a href="http://annuaire.mediactu.biz/">Annuaire</a></li><li><a href="http://boutique.mediactu.biz/">Boutique</a></li></ul>
</div>
<div id="la_une">
<p><img src="images-template/la_une.png" alt="La une" title="La une" class="rub"><br />
<span id="title"><a href="#">Titre de l'article</a></span></p>
<p><span class="chapo"><a href="#">Chapô
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras justo tellus, convallis quis, facilisis in, feugiat eu, lorem. Proin leo. Duis lacinia elit et dui. Proin volutpat. Vestibulum sit amet arcu. Nam luctus volutpat ante. Proin at metus eget elit accumsan faucibus. Vivamus molestie fringilla risus. Fusce porttitor.
<strong><br />>> Lire l'article...</strong></a></span></p>
</div>
<div id="periodique">
<p><img src="images-template/bloc1.png" alt=""></p>
</div>
<div id="dossiers">
<p><img src="images-template/dossiers.png" alt="Dossiers" title="Dossiers"></p>
<table style="margin: 0px 0pt 0pt 0px;" border="0" cellpadding="4" cellspacing="0" width="205">
<tbody>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><a href="dossiers/fort-boyard.php" title="Fort Boyard"><img src="dossiers/images/fort-boyard.png" alt="Fort Boyard"></a></td>
<td width="187" style="vertical-align: middle; line-height: 13px;"><a href="dossiers/fort-boyard.php" title="Fort Boyard">Fort Boyard</a></td>
</tr>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><a href="dossiers/la-carte-aux-tresors.php" title="La carte aux trésors"><img src="dossiers/images/la-carte-aux-tresors.png" alt="La carte aux trésors"></a></td>
<td style="vertical-align: middle; line-height: 13px;"><a href="dossiers/la-carte-aux-tresors.php" title="La carte aux trésors">La carte aux trésors</a></td>
</tr>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><a href="dossiers/questions-pour-un-champion.php" title="Questions pour un champion"><img src="dossiers/images/questions-pour-un-champion.png" alt="Questions pour un champion"></a></td>
<td style="vertical-align: middle; line-height: 13px;"><a href="dossiers/questions-pour-un-champion.php" title="Questions pour un champion">Question pour un champion</a></td>
</tr>
<tr>
<td width="37"> </td>
<td><div align="right"><a href="dossiers/index.php"><strong>Tous les dossiers</strong></a></div></td>
</tr>
</tbody>
</table>
</div>
<div id="trombinoscope">
<p><img src="images-template/trombinoscope.png" alt="Trombinoscope" title="Trombinoscope"></p>
<table style="margin: 0px 0pt 0pt 0px;" border="0" cellpadding="4" cellspacing="0" width="205">
<tbody>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><a href="trombinoscope/olivier-minne.php" title="Fort Boyard"><img src="trombinoscope/images/olivier-minne.png" alt="Olivier Minne"></a></td>
<td width="187" style="vertical-align: middle; line-height: 13px;"><a href="trombinoscope/olivier-minne.php" title="Olivier Minne">Olivier Minne</a></td>
</tr>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><a href="trombinoscope/julien-lepers.php" title="Julien Lepers"><img src="trombinoscope/images/julien-lepers.png" alt="Julien Lepers"></a></td>
<td style="vertical-align: middle; line-height: 13px;"><a href="trombinoscope/julien-lepers.php" title="Julien Lepers">Julien Lepers</a></td>
</tr>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><a href="trombinoscope/Tex.php" title="Tex"><img src="trombinoscope/images/tex.png" alt="Tex"></a></td>
<td style="vertical-align: middle; line-height: 13px;"><a href="trombinoscope/tex.php" title="Tex">Tex</a></td>
</tr>
<tr>
<td width="37"> </td>
<td><div align="right"><a href="trombinoscope/index.php"><strong>Tout le trombinoscope</strong></a></div></td>
</tr>
</tbody>
</table>
</div>
<div id="la_tele">
<p><img src="images-template/a_la_tele.png" alt="Ce soir à la télé" title="Ce soir à la télé" class="rub"></p>
<table width="240" border="0" cellpadding="4" cellspacing="0" style="margin: 0px 0pt 0pt 0px;">
<tbody>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><img src="images-template/tf1.gif"></td>
<td style="vertical-align: middle; line-height: 13px;">Julie Lescaut</td>
</tr>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><img src="images-template/f2.gif"></td>
<td style="vertical-align: middle; line-height: 13px;">Envoyé spécial</td>
</tr>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><img src="images-template/f3.gif"></td>
<td style="vertical-align: middle; line-height: 13px;">Les fantômes du chapelier</td>
</tr>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><img src="images-template/c+.gif"></td>
<td style="vertical-align: middle; line-height: 13px;">24 heures chrono</td>
</tr>
<tr>
<td style="width: 45px; vertical-align: middle; text-align: center;"><img src="images-template/m6.gif"></td>
<td style="vertical-align: middle; line-height: 13px;">Incroyable talent</td>
</tr>
<tr>
<td width="45"> </td>
<td><div align="right"><a href="programme-tv.php"><b>Le programme détaillé</b></a></div></td>
</tr>
</tbody>
</table>
</div>
<div id="billets">
<p><img src="images-template/derniers_billets.png" alt="Derniers billets" title="Derniers billets"></p>
<table style="margin: 0px 0pt 0pt 5px;" border="0" cellpadding="4" cellspacing="0" width="230">
<tbody>
<tr>
<td width="12" style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td width="228" style="vertical-align: middle; line-height: 13px;">Ouverture du blog </td>
</tr>
<tr>
<td style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td style="vertical-align: middle; line-height: 13px;">Jean Luc Delarue sur M6 ? </td>
</tr>
<tr>
<td width="12" style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td width="228" style="vertical-align: middle; line-height: 13px;">Nous sommes le x septembre 2006 </td>
</tr>
<tr>
<td style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td style="vertical-align: middle; line-height: 13px;">Je m'apelle jacques chirac </td>
</tr>
<tr>
<td width="12" style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td width="228" style="vertical-align: middle; line-height: 13px;">Le xeme festival de cirque de Monte Carlo </td>
</tr>
</tbody>
</table>
</div>
<div id="sujets">
<p><img src="images-template/derniers_sujets.png" title="Derniers sujets" alt="Derniers sujets"><p>
<table style="margin: 0px 0pt 0pt 5px;" border="0" cellpadding="4" cellspacing="0" width="230">
<tbody>
<tr>
<td width="12" style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td width="228" style="vertical-align: middle; line-height: 13px;">Ouverture du blog </td>
</tr>
<tr>
<td style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td style="vertical-align: middle; line-height: 13px;">Jean Luc Delarue sur M6 ? </td>
</tr>
<tr>
<td width="12" style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td width="228" style="vertical-align: middle; line-height: 13px;">Nous sommes le x septembre 2006 </td>
</tr>
<tr>
<td style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td style="vertical-align: middle; line-height: 13px;">Je m'apelle jacques chirac </td>
</tr>
<tr>
<td width="12" style="width: 10px; vertical-align: middle; text-align: center;"><img src="images-template/puce1.png"alt=""></td>
<td width="228" style="vertical-align: middle; line-height: 13px;">Le xeme festival de cirque de Monte Carlo </td>
</tr>
</tbody>
</table>
</div>
<div id="recherche">
<p><img src="images-template/recherche.png" alt="Recherche" title="Recherche"></p>
<form method="get" id="search" action="http://www.mediactu.biz/">
<input name="search" type="text" id="searchform" value="" size="33" />
<center><input name="submit" type="submit" id="searchsubmit" value="Chercher" /></center>
</form>
</div>
<div id="services-outils">
<p><img src="images-template/services-outils.png" alt="Service & Outils" title="Service & Outils"></p>
<p><a href="audiences.php">> Les audiences</a><br>
<a href="videotheque.php">> Vidéothèque</a><br>
<a href="flux.php">> Flux</a><br>
<a href="newsletter.php">> Newsletter</a><br>
<a href="programme-tv.php">> Programme TV</a><br>
<a href="liens.php">> Liens</a><br>
<a href="toolbar.php">> La barre d'outils "Médiactu"</a><br>
<a href="javascript:window.external.AddFavorite('http://www.mediactu.biz/',Médiactu - Toute l'actu média')">> Mettre "Médiactu" dans vos favoris</a></p>
</div>
<div id="le_chiffre">
<p><img src="images-template/le_chiffre.png" alt="Le chiffre" title="Le chiffre" class="rub"></p>
<p><strong>1 258 652</strong> téléspectateurs et <strong>9.6 %</strong> de part de marché, c'est le score de Lost le plus mauvais depuis le début de sa diffusion en France.</p>
</div>
<div id="info_en_continu">
<p><img src="images-template/l_info.png" alt="L'info en continu" title="L'info en continu" class="rub"></p>
<p><marquee bgcolor='ffffff' direction='up' width='100%' height='60' valign='bottom' scrollamount='1' scrolldelay='30'><strong>21:10</strong> Machintruc élu président de la république<br>
<strong>19:58</strong> Manifestation des cheminot à PAris<br>
<strong>10:25</strong> Trcumuch choisit le PS<br>
<strong>05:12</strong> Machinbidule premier ministre sous Mitterrand<br>
<strong>19:55</strong> Bon c'était plein d'essais mais il faut bien remplir [smile]</marquee></p>
</div>
<div id="pub">
<p><img src="images-template/pub.png" alt="Publicité" title="Publicité" class="rub"></p>
<p><img src="pub.png" alt="Publicité" title="Publicité" class="rub"><p>
</div>
<div id="footer">
</div>
<div id="footer_bis">
</div>
</div>
</body>
</html>J'ai regarder sur le site, j'ai fait validé mon code, mais je n'ai toujours pas trouver comment faire.
Merci de votre aide !
Modifié par Flavieng (28 Mar 2007 - 12:06)