bonjour,
J'ai légèrement modifiée la page pour permettre le centrage de celle-ci afin de rendre le contenu moins "décalé"
modif de la feuille de style:
J'ai ajouté:
Code : Tout sélectionner
body {
text-align: center;
background-color: #d8a235;
}#fond {
width: 756px;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
}
et j'ai ajouté une balise <div> qui contient l'ensemble du site.
J'ai appliqué à ce <div> l'id #fond.
Ci dessous le code source de la page pour avoir le résultat:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="keywords" content=
"poterie,ceramique,artisan,artisanat,Dieulefit,Bochaton,Beauchaton,Francoise Laverdure,Françoise laverdure,Françoise Laverdure,terre vernissée,vernisse,grès,gres,faience,dieulefit,artisan, fontaine,fontaines, grès émaillé,grès emaille,émail, poli enfumé,vaisselle,,">
<meta name="description" content=
"Poterie Christian Bochaton,Francoise Laverdure,création de ceramique a Dieulefit en Drome provencale">
<meta name="Identifier-URL" content="http://www.poteriebochaton.fr">
<meta name="Author" content="Christian Bochaton" lang="fr">
<meta name="revist-after" content="7 days">
<meta name="robots" content="all">
<title>
Poterie Bochaton Accueil
</title>
<script language="javascript" type="text/javascript">
<!--
/*////////////////////////////////////////////////////////////////////
/ Diaporama (Version 1.0 - 31/07/00) /
/ Copyright Applicanet (1999/2000) /
/ WEB: http://applicanet.com /
/ Mail: webmestre@applicanet.com /
/ !!! Tous droits réservés. Aucune partie de ce script ne peut êtr e /
/ modifiée sans la permission préalable de l'auteur. /
////////////////////////////////////////////////////////////////////*/
var img1=new Image(200,150);img1.src="image/accueil-magasin-diapo.gif";
var img2=new Image(200,150);img2.src="image/accueil-diapo-goutte-d'eau.gif";
var img3=new Image(200,150);img3.src="image/accueil-diapo-gratin-bleu.gif";
var img4=new Image(200,150);img4.src="image/accueil-diapo-pers-oiseau.gif";
var img5=new Image(200,150);img5.src="image/accueil-diapo-gratin-bleu-fr.gif";
var img6=new Image(200,150);img6.src="image/accueil-diapo-ensemble-blanc.png";
var img7=new Image(200,150);img7.src="image/accueil-diapo-boutique-fr.gif";
var img8=new Image(200,150);img8.src="image/accueil-diapo-salle-de-bain.gif";
/* etc ...etc ... rajouter autant de lignes que d'images, (200,150) sont les dimensions des images en pixels, la hauteur puis la largeur, à définir.*/
Total = 8; /*Nombres d'images, à définir*/
Temporisation = 1; /*Temporisation du diaporama en secondes, à définir.*/
/* Ne rien éditer sous cette ligne ...!
//////////////////////////////////////////////////////////////////
*/
Temps = Temporisation * 1000;
Flag = false;
//-->
</script>
<link type="text/css" rel="stylesheet" id="webdeveloper-outline-table-cells" href=
"Poterie%20Bochaton%20Accueil_fichiers/outline_table_cells.css">
</head>
<body linkifytime="15" linkified="0" linkifying="false">
<div id="fond">
<table style="text-align: left; width: 755px; height: 353px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: left; background-color: rgb(187, 140, 46);">
<table style="text-align: left; height: 459px; width: 728px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 80px;" align="undefined" valign="undefined" width="83">
<img style="width: 80px; height: 107px;" alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/fontaine-personnage-medaill.gif" height="100" width=
"75"><br>
</td>
<td style="width: 79px;" align="undefined" valign="undefined" width="83">
<img style="width: 80px; height: 107px;" alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/nichoir-medaillon.gif" height="100" width="75"><br>
</td>
<td style="width: 80px;" align="undefined" valign="middle" width="83">
<img style="width: 80px; height: 107px;" alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/cafetire-medaillon.gif" height="100" width="75"><br>
</td>
<td style="text-align: left; vertical-align: top; width: 459px;" width="511">
<font size="+3">Christian Bochaton Poterie<br>
<a href="#Accueuil_Haut" name="Accueuil_Haut" id="Accueuil_Haut"></a> Françoise Laverdure<br>
2 rue du bourg 26220 Dieulefit</font><br>
</td>
</tr>
<tr>
<td style="background-color: rgb(192, 192, 192); text-align: center;" width="83">
<a href="http://www.poteriebochaton.fr/index.html">Accueil</a><br>
</td>
<td style="text-align: center; background-color: rgb(204, 204, 204);" width="83">
<a href="http://www.poteriebochaton.fr/site/presentation.html">Présentation</a><br>
</td>
<td style="background-color: rgb(192, 192, 192); text-align: center;" width="83">
<a href="http://www.poteriebochaton.fr/site/atelier.html">Atelier</a><br>
</td>
<td align="undefined" valign="undefined" width="511">
<table style="text-align: left; width: 435px; height: 26px;" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="text-align: center; width: 80px; background-color: rgb(204, 204, 204);">
<big><a style="font-weight: bold;" href=
"http://www.poteriebochaton.fr/site/Nos-Produits.html">nos Produits</a></big><br>
</td>
<td style="background-color: rgb(192, 192, 192); text-align: center; width: 80px;">
<a href="http://www.poteriebochaton.fr/site/Nos-Invit%E9s.html">nos Invités</a><br>
</td>
<td style="text-align: center; width: 79px; background-color: rgb(204, 204, 204);">
<small><a href="mailto:christian.bochaton@tele2.fr">M'envoyer un mail</a></small>
</td>
<td style="text-align: center; width: 143px; background-color: rgb(192, 192, 192);">
<span style="font-weight: bold;">Tel : 04-75-46-30-10</span><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#C0C0C0" width="83">
<a href="http://www.poteriebochaton.fr/site/nos-March%E8s-et-Expo.html">Nos marchés et
expositions</a>
</td>
<td style="text-align: center; background-color: rgb(204, 204, 204);" valign="undefined" width=
"83">
<small><a href="http://www.poteriebochaton.fr/site/Aller-%E0-Dieulefit.html"><span style=
"text-decoration: underline;">Aller à Dieulefit</span></a></small><br>
</td>
<td colspan="3" style="background-color: rgb(214, 128, 0); text-align: left;" width="511">
<big style=
"font-weight: bold;"><big>Accueil</big></big><br>
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#999999" height="53" width="511">
<img alt="" src="Poterie%20Bochaton%20Accueil_fichiers/texte-Bienvenue-sur-le-site-de.png"
height="50" width="600">
</td>
</tr>
<tr>
<td colspan="4" height="73" width="511">
<table style="height: 265px; width: 780px; margin-left: 0px;" border="0" cellpadding="2"
cellspacing="2" width="100%">
<tbody>
<tr>
<td height="157" valign="top" width="202">
<center>
<a href="#" onmouseover="Flag = true;" onmouseout="Flag = false;"><img src=
"Poterie%20Bochaton%20Accueil_fichiers/accueil-magasin-diapo.gif" name="Vue" id="Vue"
border="0" height="150" width="200"></a>
</center><script language="javascript" type="text/javascript">
<!--
var IncremenTation = 1;
function Afficher(){
if (!document.images){
alert("Votre navigateur ne supporte pas un SCRIPT inclus dans cette page Web \nVous devriez en télécharger une version plus récente.");
return;
}
if (!Flag) {
document.images.Vue.src=eval("img"+IncremenTation+".src")}
if (IncremenTation < Total)
{
IncremenTation = IncremenTation + 1;
}
else
{
IncremenTation = 1;}
setTimeout("Afficher()",Temps);
}
Afficher();
//-->
</script>
</td>
<td height="157" valign="top" width="496">
<center style="height: 2px;">
<a href="#" onmouseover="Flag = true;" onmouseout="Flag = false;"><br></a>
</center>
<table style="width: 564px; margin-left: 0px; height: 118px;" border="0" cellpadding="2"
cellspacing="2" width="100%">
<tbody>
<tr>
<td colspan="2" bgcolor="#999999" height="118" width="413">
<img alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/Texte-Francoise-et-christian.png" height=
"42" width="550">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="64" width="202">
<table style="width: 100%; height: 480px;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td align="center" height="429" valign="top" width="377">
<br>
<img style="width: 325px; height: 433px;" alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/accueil-francoise-retouche.jpg"><br>
</td>
<td style=
"width: 307px; height: 429px; text-align: center; vertical-align: bottom;">
<table style="text-align: left; width: 100%; height: 439px;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="height: 275px;">
<img style="width: 257px; height: 343px;" alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/accueil-christian.jpg">
</td>
</tr>
<tr>
<td style="height: 158px; text-align: right; vertical-align: top;">
<table style=
"text-align: left; height: 100px; width: 220px; margin-left: 27px;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style=
"height: 71px; text-align: center; background-color: rgb(204, 204, 204); width: 210px;">
Dernière mise à<br>
jour :8 FEVRIER 2007
<table style=
"text-align: left; height: 72px; margin-left: 7px; width: 197px;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style=
"text-align: center; background-color: rgb(204, 102, 0); width: 180px;">
Raccourci pour voir les dernières mise à jour:<br>
<a href=
"http://www.poteriebochaton.fr/site/Nos-Produits.html#1">Nos
Produits</a><br>
<a href=
"http://www.poteriebochaton.fr/site/Aller-%E0-Dieulefit.html#1">
Aller à Dieulefit</a><br>
<a href=
"http://www.poteriebochaton.fr/site/nos-March%E8s-et-Expo.html#1">
Nos marchés et Expositions</a><br>
<br>
<a style="color: rgb(0, 0, 0);" href=
"http://www.poteriebochaton.fr/site/nos-March%E8s-et-Expo.html">
<br></a>
</td>
</tr>
</tbody>
</table><br>
</td>
</tr>
<tr>
<td style="text-align: center; width: 210px;">
<img alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/logo-poterie-bochaton.gif"
height="95" width="100">
</td>
</tr>
</tbody>
</table><br>
</td>
</tr>
</tbody>
</table>Pour circuler sur notre site,cliquer en haut de page
</td>
</tr>
<tr>
<td height="13"></td>
<td style="background-color: rgb(195, 146, 48);" align="left" bgcolor="#999999"
height="13"></td>
</tr>
<tr>
<td colspan="2" align="center" height="30">
<table border="1" cellpadding="2" cellspacing="2" width="100">
<tbody>
<tr>
<td align="center" bgcolor="#C36100">
Voir aussi
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<table style="margin-left: 0px; height: 66px; width: 691px;" border="0"
cellpadding="2" cellspacing="2" width="100">
<tbody>
<tr>
<td height="93" width="76">
<a href="http://www.maison-de-la-terre.org/" target="_blank"><img alt=""
src="Poterie%20Bochaton%20Accueil_fichiers/Logo-Maison-Terre.jpg" height=
"77" width="132"></a>
</td>
<td height="93" width="61"></td>
<td height="93" width="51">
<a href="http://www.tourisme-paysdieulefit.com/" target=
"_blank"><img alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/Logo-office-tourisme.gif" height=
"60" width="60"></a>
</td>
<td height="93"></td>
<td height="93" width="191">
<a href="http://www.pays-de-dieulefit.com/" target="_blank"><img alt=""
src=
"Poterie%20Bochaton%20Accueil_fichiers/logo-pays%2520-de%2520-Dieulefit.jpg"
height="43" width="200"></a>
</td>
<td height="93" width="91">
<a href="http://codplatre.free.fr/" target="_blank"><img alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/logo-Devaud.jpg" height="50"
width="100"></a>
</td>
</tr>
<tr>
<td height="53" width="76">
<a href="http://www.nvu.com/"><img alt="Document fait avec Nvu" src=
"Poterie%20Bochaton%20Accueil_fichiers/fait_avec_Nvu.png" border="0"></a>
</td>
<td height="53" width="61"></td>
<td height="53"></td>
<td height="53"></td>
<td height="53">
<a href="http://www.poteriepichetto.com/" target="_blank"><img style=
"width: 141px; height: 106px;" alt="" src=
"Poterie%20Bochaton%20Accueil_fichiers/logo-pichetto.jpg"></a>
</td>
<td height="53">
<a href="http://www.expo-bernard-besson.com/" target="_blank"><img alt=""
src="Poterie%20Bochaton%20Accueil_fichiers/logo_site-bernard.gif" height=
"75" width="76"></a>
</td>
<td align="center" height="53">
<a href="#Accueuil_Haut"><button type="reset"><a href=
"#Accueuil_Haut"></a><a href="#Accueuil_Haut"></a><a href=
"#Accueuil_Haut"></a><a href="#Accueuil_Haut"></a><a href=
"#Accueuil_Haut">Haut de page</a></button></a>
</td>
</tr>
<tr>
<td height="43" width="76">
<a href="http://www.xiti.com/xiti.asp?s=198131" target=
"_top"><script language="JavaScript1.1" type="text/javascript">
<!--
Xt_param = 's=198131&p=';
Xt_r = document.referrer;
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border=0 ';
Xt_i += 'src="http://logv27.xiti.com/hit.xiti?'+Xt_param;
Xt_i += '&hl=' + Xt_h.getHours() + 'x' + Xt_h.getMinutes() + 'x' + Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i += '&r=' + Xt_s.width + 'x' + Xt_s.height + 'x' + Xt_s.pixelDepth + 'x' + Xt_s.colorDepth;}
document.writeln(Xt_i + '&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Mesurez votre audience">');
//-->
</script><img src="Poterie%20Bochaton%20Accueil_fichiers/hit.gif" title=
"Mesurez votre audience" border="0" height="25" width="39">
<noscript>Mesure d'audience ROI frequentation par <img width="39" height=
"25" border="0" src=
"http://logv27.xiti.com/hit.xiti?s=198131&p=&" title=
"Mesurez votre audience"></noscript></a>
</td>
<td height="43" width="61"></td>
<td height="43"></td>
<td height="43"></td>
<td height="43"></td>
<td height="43"></td>
<td height="43"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
et la feuille de style "outline_table_cells.css:
Code : Tout sélectionner
* Generated by KompoZer */
table {
border-collapse: separate ! important;
}td, th {
border: 1px solid #ff0000 ! important;
}table table td, table table th {
border-color: #00ff00 ! important;
}table table table td, table table table th {
border-color: #0000ff ! important;
}table table table table td, table table table table th {
border-color: #ff0000 ! important;
}table table table table table td, table table table table table th {
border-color: #00ff00 ! important;
}table table table table table table td, table table table table table table th {
border-color: #0000ff ! important;
}body {
text-align: center;
background-color: #d8a235;
}#fond {
width: 756px;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
}
quelques remarques:
- mise en page par tableaux: à éviter, les tableaux étant réservés à des données tabulaires. Il ne voius viendrait pas à l'idée de faire un courrier avec un tableur comme excel ou opencalc?
cette mise en page par tableau empèche de faire un site adaptable à la taille de l'écran.
- de nombreux styles (mise en page, texte) sont déclarés en styles internes et directement appliqués à chaque balise: il eut été mieux d'utiliser la feuille de style: un style est défini une seule fois quelque soit le nombre d'éléments qui recoivent le même style.
Ce n'est pas un jugement de valeur pour le site qui est sympa