28173 sujets

CSS et mise en forme, CSS3

bonjour,
je viens de valider ma page html au W3C, il semblerait qu'il y ait un problème sur mon a href voici ce que j'ai fait :

<a class="retour" href="cfres.html">Retour page pr&eacute;c&eacute;dente</a> 

<a href="http://www.cndp.fr/spinoo/men">Rechercher</a> 
<a href="#">Archives</a> 


voici la réponse W3C
Sorry, I am unable to validate this document because on line 48-49, 177 it contained one or more bytes that I cannot interpret as us-ascii (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

je vous joinds la feuille de style et la page html

merci infinniment a celui qui pourra m'apporter une réponse
cordialement
mimi
Administrateur
(message de l'auteur du sujet c/c ici)

j'ai oublié les pièces jointes

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
    <meta name="generator" content="PSPad editor,  www.pspad.com"  />
    <link rel="stylesheet" href="styles/style.css" type="text/css" title="default" media=
    "screen" />
    <link rel="alternate stylesheet" href="styles/stylebleu.css" type="text/css" title="bleu"
    media="screen" />
    <link rel="alternate stylesheet" href="styles/stylerouge.css" type="text/css" title="rouge"
    media="screen" />
    <title>
      mod&egrave;le
    </title>
  </head>
  <body>
    <div id="conteneur">
      <div id="global">
        <div id="menu_gauche">
          <a class="logo" href="index.html"><img src="images/logo.gif" alt="logo du ministere"
          title="lien vers page accueil CE26" /></a>
          <dl>
            <dt>
              Ce2
            </dt>
            <dd>
              <a href="cfres.html" accesskey="1">Fran&ccedil;ais</a>
            </dd>
            <dd>
              <a href="cmres.html" accesskey="2">Math&eacute;matiques</a>
            </dd>
            <dt>
              sixi&egrave;me
            </dt>
            <dd>
              <a href="6fres.html" accesskey="3">Fran&ccedil;ais</a>
            </dd>
            <dd>
              <a href="6mres.html" accesskey="4">Math&eacute;matiques</a>
            </dd>
          </dl>
        </div>
        <div id="bandeau">
          <div class="menu_horizon">
            <a href="http://evace26.education.gouv.fr/mailto.htm">Contact</a>
                 <a href="http://www.cndp.fr/spinoo/men">Rechercher</a>    
             <a href="#">Archives</a>      
          </div> </div>
        <div id="page">
          <h1>
            Les r&eacute;ponses des &eacute;l&egrave;ves de CE2 &agrave; l'&eacute;valuation de septembre 2005
          </h1>
          <ul class="liens_horiz_pdf">
            <li>Fran&ccedil;ais CE2
            </li>
            <li> <a href="pdf/cf1detail.pdf">EXERCICE 1</a>
            </li>
          </ul>
          <table class="tab2col" summary="tableau par code">
            <caption>
              R&eacute;sultats (en %)
            </caption>
            <tr>
              <th>
                item 01
              </th>
              <th></th>
            </tr>
            <tr>
              <td>
                code 1
              </td>
              <td>
                96,10
              </td>
            </tr>
            <tr>
              <td>
                code 2
              </td>
              <td>
                3,40
              </td>
            </tr>
            <tr>
              <td>
                code 3
              </td>
              <td>
                0,50
              </td>
            </tr>
          </table>
       
          <table class="tab2col" summary="tableau par code">
            <caption>
              R&eacute;sultats (en %)
            </caption>
            <tr>
              <th>
                item 03
              </th>
              <th></th>
            </tr>
            <tr>
              <td>
                code 1
              </td>
              <td>
                96,10
              </td>
            </tr>
            <tr>
              <td>
                code 2
              </td>
              <td>
                3,40
              </td>
            </tr>
            <tr>
              <td>
                code 3
              </td>
              <td>
                0,50
              </td>
            </tr>
          </table>
          <p>
            Exercice 1 : Score de r&eacute;ussite : 86,70 % Pour l'explicitation du codage, voir &agrave; la fin
            de la synth&egrave;se.
          </p>
          <ul class="liens_horiz_pdf">
            <li>Fran&ccedil;ais Sixi&egrave;me
            </li>
            <li><a href="pdf/cf2detail.pdf">EXERCICE 2 </a>
            </li>
          </ul>
          <table class="tab2col" summary="tableau par code">
            <caption>
              R&eacute;sultats (en %)
            </caption>
            <tr>
              <th>
                item 04
              </th>
              <th></th>
            </tr>
            <tr>
              <td>
                code 1
              </td>
              <td>
                96,10
              </td>
            </tr>
            <tr>
              <td>
                code 2
              </td>
              <td>
                3,40
              </td>
            </tr>
            <tr>
              <td>
                code 3
              </td>
              <td>
                0,50
              </td>
            </tr>
          </table>
          <a class="retour" href="cfres.html">Retour page pr&eacute;c&eacute;dente</a>  
        </div>
      </div>
      <div id="pied">
        Minist&egrave;re de l'&Eacute;ducation nationale, de l'enseignement sup&eacute;rieur 
  et de la recherche
      </div>
    </div>
  </body>
</html>


/* CSS Document */
/* les éléments ont  une marge par défaut, il est préférablede mettre cette marge à 0*/
body {
/* la police 16 par défaut est ramenée à 10 donc 1em=10px1em = 100% de la police en cours */
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
/* modifie les balises de la page */
a img {
	border: 0;
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
}
hr {
	display: block;
	height: 2px;
	margin: 10px 0 10px 0;
	/*_margin: -7px 0;
*/
	padding: 0px;
	color: #F00;
	background-color: #ff500b;
	border: 0;
}
p.presentation {
	text-align: center;
	font-size: 1.3em;
}
* {
	margin: 0;
	padding: 0;
}
#conteneur {
	/*display: table;
*/
	position: absolute;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	width: 100%;
/* A présent 1em = la police en cours soit 1.3em*/
}
#global {
	background-color: #DCE318;
	color: #FFCC66;
	width: 100%;
}
#contenu {
	display: table-cell;
	background-color: #fff;
	color: #000;
}
#contenu .logo_pdf {
	vertical-align: middle;
	margin-left: 1em;
}
#page {
	padding: 30px 15px 30px 15px;
	height: 100%;
	margin-left: 150px;
	text-align: justify;
	background-color: #fff;
	color: #000;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}

#page p {
	margin: 5px 0 5px 0;
}
#page span {
	font-weight: bold;
}
#page h1 {
	font-size: 120%;
	text-transform: uppercase;
	margin: 20px 0 20px 0;
	letter-spacing: 2px;
	background-color: #ff500b;
	padding: 2px 2px 0 5px;
	width: 85%;
	height: 19px;
	color: #000;
}
#page h3 {
	font-size: 13px;
	margin: 20px 0 20px 0;
}
/*Si page vide mettre un paragraphe avec class="espace" sur la page html*/
#page p.espace {
	height: 500px;
}
#page dl.listedef {
	margin: 15px 0 15px 0;
}
#page dl.listedef dt {
	font-size: 14px;
	font-weight: bold;
}
#page dl.listedef dd {
	display: list-item;
	list-style: disc inside;
	margin-top: 5px;
	padding-left: 30px;
}
#pied {
	clear: both;
	height: 1.5em;
	line-height: 1.5em;
	padding: 0 100px 0 150px;
	font-size: 0.7em;
	text-align: center;
	letter-spacing: 2px;
	word-spacing: 2px;
	background-color: #DCE318;
	color: #000;
}
#bandeau {
	background-color: #ff500b;
	position: relative;
	color: white;
	height: 75px;
	line-height: 75px;
	margin-left: 150px;
	border-bottom: 1px solid #000;
}
#bandeau h1 {
	text-align: center;
	margin-bottom: 15px;
	text-transform: uppercase;
	font-size: 140%;
	letter-spacing: 0.2em;
}
.menu_horizon {
	position: absolute;
	background-color: #DCE318;
	color: #fff;
	width: 35em;
	height: 16px;
	line-height: 16px;
	padding: 0px 0 0px 32px;
	right: 0px;
	bottom: 0px;
	font-size: 0.9em;
	text-align: left;
	white-space: nowrap;
}
.menu_horizon a {
	list-style-type: none;
	color: #f60;
	font-weight: bold;
	margin-right: 10%;
		margin-left: 10%;
	background-color: #DCE318;
}
.menu_horizon a:hover {
	color: #fff;
	text-decoration: underline;
	background-color: #DCE318;
}
#menu_gauche {
	display: table-cell;
	height: 100%;
	float: left;
	width: 150px;
	background-color: #DCE318;
	color: #FFCC66;
}
#menu_gauche a.logo {
	display: block;
	text-align: center;
	margin-top: 10px;
	padding: 0;
}
#menu_gauche dl {
	margin-top: 6em;
	width: 12em;
}
#menu_gauche dl dt {
	margin-left: 0.5em;
	margin-bottom: 1em;
	margin-top: 1em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	width: 10em;
	background-color: #fffacd;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	color: #ff500b;
}
#menu_gauche dl dd {
	margin: 10px 0 10px 10px;
	text-align: left;
}
/* comportement des liens dd du menu gauche*/
#menu_gauche dl dd a {
	color: #000;
	background-color: #DCE318;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
	letter-spacing: 1.5px;
}
#menu_gauche dl dd a:hover {
	text-decoration: underline;
	color: #ff500b;
	background-color: #DCE318;
}
a.liens_horiz {
	background-image: url(../images/boucle.gif);
	background-position: left;
	background-repeat: no-repeat;
	background-color: #fff;
	font-style: normal;
	margin: 0 50px 0px 50px;
	color: #33c;
	text-decoration: none;
	padding-left: 20px;
	height: 17px;
}
a.liens_horiz:hover {
	color: #ff500b;
	background-color: #fff;
}
ul.liens_horiz_pdf li {
	display: inline;
	margin-right: 100px;
	vertical-align: middle;
}
ul.liens_horiz_pdf li a {
	background-image: url(../images/pdf.gif);
	background-repeat: no-repeat;
	background-position: left center;
	color: #000;
	padding: 10px 0px 10px 45px;
	height: 40px;
	vertical-align: middle;
}
ul.liens_horiz_pdf li a:hover {
	color: #ff500b;
	background-color: #fff;
}
ul.liens_horiz {
	border-top: 2px solid #ff500b;
	border-bottom: 2px solid #ff500b;
	margin: 20px 0px 20px 0px;
	padding: 20px 0px 20px 50px;
	width: 95%;
}
ul.liens_horiz li {
	display: inline;
	margin-right: 150px;
}
ul.liens_horiz li a {
	padding: 10px 0px 10px 35px;
	height: 40px;
}
ul.liens_horiz li a:hover {
	color: #ff500b;
	background-color: #fff;
}
ul.liens_horiz_pdf {
	border-top: 2px solid #ff500b;
	border-bottom: 2px solid #ff500b;
	margin: 20px 0px 20px 0px;
	padding: 20px 0px 20px 50px;
	width: 95%;
}
a.retour {
	margin: 0 50px 0px 50px;
	color: #33c;
	text-decoration: none;
	font-style: normal;
	font-size: 0.9em;
	background-color: #fff;
}
a.retour:hover {
	color: #ff500b;
	background-color: #fff;
}
caption.tabtitle {
	font-size: 14px;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 15px;
}
.titre_niveau_1 {
	color: #808080;
	background-color: #CCCC99;
	font-size: 1.2em;
	border: 1px solid #663333;
	text-align: center;
	width: 35em;
	margin: 0 auto 1em auto;
}
.titre_niveau2 {
	color: #808080;
	background-color: #B39999;
	border: 1px solid #dce318;
	width: 400px;
	font-size: 1em;
}
/*Affichage tableau*/
#page table {
	font-size: 12px;
	margin: 0px 0 20px 0;
	border-collapse: collapse;
}
#page table th {
	border: 1px solid #000;
	text-align: center;
	color: #fff;
	background-color: #ff500b;
}
#page table thead {
border: 1px solid #000;
}

#page table tr td {
	border-collapse: collapse;
	border: 1px solid #ff500b;
}
table.tab2col {
	width: 500px;
}
table.tab2col td {
	width: 50%;
	padding: 5px;
	text-align: center;
}
table.tab2col th {
	background-color: #ff500b;
	color: #fff;
	
}
table.tab5col {
	width: 700px;
}
table.tab5col th {
	background-color: #ff500b;
	color: #fff;
}
table.tab5col td.entree {
	width: 50%;
}
table.tab5col td.pourcent {
}
table.tab5col td {
	padding: 5px;
	text-align: center;
}
table.tab6col {
	width: 500px;
}
table.tab6col td {
	width: 20%;
	padding: 5px;
	text-align: center;
}
table.tab6col th {
	background-color: #ff500b;
	color: #fff;
}
table.tab6col {
	width: 500px;
}
table.tab6col td {
	width: 15%;
	padding: 5px;
	text-align: center;
}
table.tab15col {
	width: 100%;
}
table.tab15col td {
	padding: 5px;
	text-align: center;
}
table.tab15col th {
	background-color: #ff500b;
	color: #fff;
}
table.tab15col thead.col1 {
	padding: 3px;
	width: 30px;
}
/*Mise en forme du tableau de compétences*/
table.tabcompet {
	width: 100%;
}
table.tabcompet thead {
	font-weight: bold;
	font-size: 1.2em;
	font-variant: small-caps;
	height: 3em;


}

table.tabcompet td {
	padding: 1.2em;
	height: 1.2em;

}
table.tabcompet caption {
	padding: 1.2em;
	font-size: 1.6em;
	letter-spacing: 0.1em;
}
table.tabcompet col#c1{
  text-align: left;
   width: 13%;
}

table.tabcompet col#c2{
  text-align: left;
   width: 40%;
}
table.tabcompet col#c3{
  text-align: left;
   width: 25%;
}
table.tabcompet col#c4{
  text-align: center;
   width: 11%;
}
table.tabcompet col#c5{
  text-align: center;
  width: 11%;
}
/* formulaire*/
form {
	background-color: #F5F5F5;
	padding: 10px;
	width: 550px;
	margin: 30px 10px 30px 50px;
	color: #000;
}
label {
	font-family: "trebuchet ms", sans-serif;
	font-weight: bold;
	margin-right: 2em;
	margin-bottom: 1em;
}
input {
	border: 1px solid #ff500b;
	background-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	margin-right: 1.5em;
	text-align: left;
	padding: 2px;
}
input.bouton {
	border: 2px outset #ff500b;
	background-color: #fff;
	color: #000;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
}
input.bouton:hover {
	background-color: #fffacd;
	color: #ff500b;
}
input.bouton:active {
	border: 3px inset #ff500b;
	background-color: #656565;
	color: white;
}
textarea {
	padding: 4px;
	border: 1px solid #ff500b;
	background-color: #fff;
	font-family: "trebuchet ms", sans-serif;
	color: #000;
}

Modifié par Felipe (31 Oct 2006 - 16:09)
Administrateur
BIGRE !
C'est un concours du plus long message sur le forum ?

Je pense que personne ici ne va se pencher sur un code aussi long.
Tu n'as pas une page en ligne ?
je viens de trouver une des erreurs il reste :
Sorry, I am unable to validate this document because on line 48-49 it contained one or more bytes that I cannot interpret as us-ascii (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

line 48-49<a href="http://evace26.education.gouv.fr/mailto.htm">Contact</a>
<a href="http://www.cndp.fr/spinoo/men">Rechercher</a>

les autres étaient une erreur de syntaxes:
<a href="cfres.html" class="a.retour">