28173 sujets

CSS et mise en forme, CSS3

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;
}