Probleme de CCS

Bonjour, Voila j'ai un gros problème avec mon css en fait j'ai fait deux feuilles différentes pour mozilla et IE . Mon problème c'est que mon design part complètement en sucette kan on réduit la page par exemple je pourrait avoir une explication svp
Configuration: Windows XP
Firefox 3.0.12

6 réponses

  • Votes
  • Date
  • Date décroissante
  1. Contributeur
    Je vois que tu as utilisé les pourcentages !
    C'est mieux comme ça.

    Au fait, préciser la largeur et la hauteur de body est inutile...
    1. Mais le voila c'est un peu le fouillie parce que j'essaye de le modifier

      body
      {
      width: 100%;
      height: 100%;
      margin: 0px;
      margin-top: 0px;
      background-color : #ffffff;
      }

      /* L'en-tête */
      .en_tete
      {
      width :200px;
      height :120px;
      border:none;
      margin-top:-75px;
      margin-left:0px;
      background-image:url("img/bandeau.jpg");
      }

      .bandeau
      {
      width: 100%;
      height: 100%;
      margin-left :22px;
      }

      /* Le menu */
      #menu
      {
      margin-top:-47px;
      float: left;
      width: 175px;
      height: 720px;
      background-image :url("img/silWEB.jpg");
      }

      #menu img
      {
      margin-top:-10px;
      }

      .element_menu h2
      {
      color: White;
      font-family: Century,"Times New Roman", Times, serif;
      text-align: center;
      }

      .element_menu a
      {
      font-weight:bold;
      position:relative;
      border : 2px #ffffff;
      color : white;
      display :block;
      margin: 5px ;
      text-align :center;
      font-family : Century,"Times New Roman","Arial Black",Times,sherif;
      LINE-HEIGHT: 50px;
      }

      .element_menu a:hover
      {
      background-repeat:no-repeat;
      border :solid 1px #ffffff;
      color: orange;

      }
      /* Le corps de la page */

      #corps
      {
      width : 59.5%;
      color: Black;
      font-family : Century;
      margin-left:175px;
      }

      .print #corps{
      overflow:hidden;
      }
      /* menu déroulant*/

      #conteneur-bande{
      width: 110.4%;
      background-color: #00488C;
      height:41px;
      margin-left:-28px;
      position:relative;
      margin-top: -28px;
      }

      #bande{
      position:absolute;
      }
      #bande dl{

      height:40px;
      margin:0; padding:0;
      display:block;
      float:left;
      }

      #bande dt{
      font-weight:bold;
      font-family: Century;
      width:182px;
      display:block;
      height:40px;
      color:white;
      line-height:40px;
      text-align:center;
      border-left:dotted 1px #aa6b13;
      border-right:dotted 1px #aa6b13;
      cursor:pointer;
      font-size: 18px;
      }
      #bande dt:hover{
      background-color :#96BC2D;
      color:white;
      }

      #bande dd{
      display:block;
      margin:0;padding:0;
      }
      #bande dd ul{
      margin:0; padding:0;
      text-align:center;
      list-style:none;
      }
      #bande dd ul li a{
      background-color:white;
      color:black;
      display:block;
      text-decoration:none;
      height:30px;
      line-height:30px;
      width: 182px;
      border:solid 1px #aa6b13;
      }
      #bande dd ul li a:hover{
      color:White;
      background-color:#e26719;
      }
      #bande dl dd{
      display:none;
      }
      #bande dl:hover dd{
      display:block;
      }
      .imgcorps
      {
      margin-top:-1px;
      background-image: url("img/fondUVERT.jpg");
      background-repeat : repeat-x;
      width :110.3%;
      margin-left :-28px;
      }
      .texterreur
      {
      text-align : center;
      font-family :Century;
      font-size: 30px;
      }
      .signalerreur
      {
      text-align :center;
      font-family :Century;
      font-size: 15px;
      }
      .retour
      {
      margin-left :440px;
      color : orange;
      }

      /* fleche retour*/
      .img
      {
      margin-left: 440px;
      width :50px;
      height:50px;
      border : none;
      }

      .img2
      {
      margin-left:370px;
      width: 200px;
      height:200px;
      }

      #corps h1
      {
      margin-top : 200px;
      color: #96BC2D;
      text-align: center;
      font-family: Consolas, "Arial Black", "Times New Roman", Times, serif;
      border : 0px solid black;
      }

      #corps h2
      {
      height: 30px;
      background-image: url("img/corps.jpg");
      background-repeat: no-repeat;
      padding-left: 30px;
      color: #a832c3;
      text-align: left;
      border : 0px solid black;
      }

      /* image accueil*/
      #img1
      {

      position : absolute;
      margin-top:400px;
      left : -230px;
      margin-left : 480px;
      }
      #img1 img
      {
      width : 18%;
      height : 16%;
      border : none;
      }
      #img1 img:hover
      {
      width :20%;
      height : 18%;
      border: 3px solid green;
      }

      #img2
      {
      position : absolute;
      margin-top:100px;
      left : -230px;
      margin-left : 480px;
      }

      #img2 img
      {
      width : 18%;
      height : 10%;
      border : none;
      }
      #img2 img:hover
      {
      width :20%;
      height : 18%;
      border: 3px solid orange;
      }
      #img3
      {
      position : absolute;
      margin-top:100px;
      left : 230px;
      margin-left : 494px;
      }
      #img3 img
      {
      width : 20%;
      height : 18%;
      border : none;
      }
      #img3 img:hover
      {
      width :100%;
      height : 98%;
      border: 3px solid blue;
      }
      #img4
      {
      position : absolute;
      margin-top:400px;
      left : 230px;
      margin-left : 480px;
      }
      #img4 img
      {
      width : 18%;
      height : 16%;
      border : none;
      }
      #img4 img:hover
      {
      width :20%;
      height : 18%;
      border: 3px solid black;
      }

      /*formulaire */

      .form {
      padding:1px;
      font-family : Century;
      width:500px;
      }

      .text
      {
      margin-left :50px;
      font-family:Comic sans MS;
      }

      .input {
      width: 184px;
      font-weight:bold;
      font-family: Century, "Arial Black", "Times New Roman", Times, serif;
      border:1px solid black;
      background-color:#A6BEDE;
      }

      .select {
      width :188px;
      font-weight: bold;
      font-family: Century, "Arial Black", "Times New Roman", Times, serif;
      background-color:#A6BEDE;
      }

      .option
      {
      width :185px;
      }

      .select :hover
      {
      background-color : green;
      }

      .textarea {
      border:1px solid black;
      font-family: Century, "Arial Black", "Times New Roman", Times, serif;
      background-color:#A6BEDE;
      overflow : scroll;
      }

      .submit
      {
      font-family: Century;
      font-weight:bold;
      display:block;
      margin-left:100px;
      width:110px;
      line-height:10px;
      text-align:center;
      color:black;
      }

      #tableau1
      {
      border :solid 1px #000000;
      margin-left : 200px;
      }
      #tableau
      {
      border :solid 1px #000000;
      margin-left : 100px;
      }

      .caption
      {
      font-weight:bold;
      color:#00488C;
      font-size:x-large;
      margin-top :40px;
      font-family:Century, "Arial Black", "Times New Roman", Times, serif;
      margin-bottom: 20%;
      }

      .th
      {
      font-size : large;
      color : black;
      font-family : Bauhaus 93, "Arial Black", "Times New Roman", Times, serif;
      }

      .td
      {
      font-family:Century, "Arial Black", "Times New Roman", Times, serif;
      text-align : center;
      border :dotted 1px #000000;
      background-color :#96BC2D;

      }

      .td1
      {
      font-family:Century, "Arial Black", "Times New Roman", Times, serif;
      text-align : center;
      border :dotted 1px #000000;
      background-color : #DCDCDC;

      }

      #pagination
      {
      color:#00488C;
      font-size: 15px;
      font-family:Comic sans MS;
      font-weight:bold;
      margin-left:50%;
      margin-top:4%;
      }

      .pagination:hover
      {
      color: orange;
      font-size: 15px;
      font-family:Comic sans MS;
      font-weight:bold;
      }

      .pagination1
      {
      color:#00488C;
      font-size: 15px;
      font-family:Comic sans MS;
      font-weight:bold;
      margin-left:0%;
      margin-top:4%;
      }
      .pagination1:hover
      {
      color: orange;
      font-size: 15px;
      font-family:Comic sans MS;
      font-weight:bold;
      }

      /*partie droite */
      #partiedroitehaut
      {
      margin-top :-47px;
      text-align:center;
      float : right;
      font-family : Century,"Times New Roman","Arial Black",Times,sherif;
      width : 21%;
      border-style: double;
      border-color : black;
      }
      .marquee
      {
      text-align: center;
      font-family : Century,"Times New Roman","Arial Black",Times,sherif;
      }
      .imageactu
      {
      margin-top :1px;
      float : right;
      width :100%;
      background-image :url("img/actualité.jpg");
      }

      #partiedroitebas
      {
      text-align :center;
      font-family : Century,"Times New Roman","Arial Black",Times,sherif;
      float : right;
      margin-right :-26%;
      margin-top : 22%;
      width : 21%;
      height: 21%;
      border-style: double;
      border-color : black;
      }
      .imagepartenaire
      {
      float:right;
      width : 100%;
      background-image:url("img/partenaires.jpg");
      }

      /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

      #pied_de_page
      {
      margin-bottom :-20px;
      height: 50px;
      text-align: center;
      color: white;
      background-color: #00488C;
      margin-top: -2px;
      border: 0px solid black;
      }

      #pied_de_page a
      {
      color : white;
      }

      #pied_de_page a:hover
      {
      color : orange;
      }
      #peid_de_page a:visited
      {
      color :black;
      }
      .element_pied_de_page
      {
      background-image :url("img/bandebas.jpg");
      text-align : center;
      }
      1. Mon code est hyper long je suis pas sur que vous voulez tous voir si ?
        1. Contributeur
          Bonjour !

          C'est normal, tu n'as peut-être pas utilisé les pourcentages pour width et height...