Problème avec IE

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

PascalG
Arias
Messages : 19
Inscription : 15 janv. 2008, 08:46

Problème avec IE

Message par PascalG »

Bonsoir,

j'ai un problème avec IE: mes div se marchent dessus alors que ça marche avec Firefox. Je suis débutant et je ne comprends par la raison mais l'apparence des polices à l'air différente sur les deux navigateurs. :roll:

page html

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 6 November 2007), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      jumeaux_index
    </title>
    <link title="jumeaux_styles" rel="stylesheet" href="JumeauxStyles.css" type="text/css">
  </head>
  <body>
    <div id="conteneur">
      <img class="imagegauche" style="width: 150px; height: 211px;" alt="logo" src="apjcv_logo_ORANGE.jpg"><br>
      <h1 id="title">
        ASSOCIATION DES PARENTS DE JUMEAUX, TRIPLES OU PLUS DU CANTON DE VAUD
      </h1>
      <div id="menu">
        <ul>
          <li>
            <a href="index.php">accueil</a>
          </li>
          <li>
            <a href="modele.php">informations</a>
          </li>
          <li>
            <a onfocus="amenu:hoover" href="home.php">photos</a>
          </li>
          <li>
            <a href="home.php">gazette</a>
          </li>
          <li>
            <a href="home.php">bibliothèque</a>
          </li>
          <li>
            <a href="index.php">matériel</a>
          </li>
          <li>
            <a href="home.php">manifestations</a>
          </li>
          <li>
            <a href="home.php">liens</a>
          </li>
        </ul>
      </div>
      <div id="content">
        <h2 id="soustitre">
          Qui sommes-nous ?
        </h2>
        <p id="texte">
          <img class="imagetextdroite" alt="img1" src="annegeddes.jpg" hspace="20" vspace="20">Tous les parents et
          futurs parents de jumeaux, triplés ou plus, se retrouvent dans d'innombrables domaines en face de situations
          inconnues. Des questions sur la grossesse, l'accouchement, les soins, l'allaitement et l'éducation doivent
          trouver de nouvelles réponses puisqu'elles ne concernent pas un mais deux enfants, voire plus. <br>
          L'Association des Parents de Jumeaux Triplés et Plus du Canton de Vaud - <span>APJCV</span> - a été créée par
          des mamans de jumeaux en 1998 afin de vous aider à vivre le mieux possible ces situations particulières. Elle
          s'efforce de répondre à toutes vos questions et si nécessaire, vous oriente vers les personnes ou organismes
          susceptibles de vous aider au mieux. L'association est à votre écoute et vous apporte, dans la mesure de ses
          possibilités, son soutien en cas de soucis ou difficultés.    <br>
        </p>
      </div>
      <div id="footer">
        <p>
          Adresse: APJCV, Case postale 31 , 1030 Bussigny - contact
        </p>
      </div>
    </div>
  </body>
</html>
fichiers CSS

Code : Tout sélectionner

/* Generated by KaZcadeS */
text  {font:MS Trebuchet, arial, sans};

#conteneur {
  border-style: solid solid none;
  border-color: #330033;
  border-width: 1px;
  width: 80%;
  margin-left: 10%;
  background-color: #ffffff;
}
#header {
  padding-bottom: 35px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  margin-top: 0;
  padding-top: 10px;
  margin-left: 0;
  margin-right: 0;
  background-color: #d5d7d6;
}
#content {
  border-style: double none none double;
  border-color: #3366ff;
  border-width: 3px 2px 2px 3px;
  margin: 0 0 0px 200px;
  background-color: #ccffff;
}
#title {
  border: none;
  margin: 20px 30px 0px 240px;
  color: #3366ff;
  font-size: 2.5em;
  line-height: 1.5;
  font-style: normal;
  text-align: center;
  font-family: Trebuchet MS;
  background-color: #30ceab;
  opacity: 1;
}
#menu {
  width: 200px;
  background-color: #30ceab;
  float: left;
  margin-top: 0px;
  margin-left: 0;
}
#footer {
  background-color: #3d39ff;
  font-family: Trebuchet MS;
  color: #ffffff;
  text-align: center;
  clear: none;
  margin-top: 0;
  width: 80%;
  position: absolute;
}
#texte {
  border-style: none;
  color: #3333ff;
  background-color: #ccffff;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 1em;
  font-family: Trebuchet MS;
  font-weight: bold;
  line-height: 1.3em;
  text-align: justify;
}
#soustitre {
  color: #cc66cc;
  margin-left: 30px;
  font-style: italic;
  font-family: Palatino Linotype;
}
.imagetextdroite {
  margin-left: 20px;
  float: right;
}
#menu ul {
  list-style-type: none;
  text-decoration: none;
  font-family: Trebuchet MS;
  font-size: 0.8em;
  text-transform: uppercase;
}
#menu li {
  margin-top: 4px;
}
#menu ul li a {
  padding: 3px 3px 10px 5px;
  display: block;
  text-decoration: none;
  color: #000000;
  background-color: #ffccff;
  width: 145px;
}
#menu ul li a:hover {
  background-color: #ff0000;
  color: #ffffff;
}
#menu ul ul {
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
}
#menu ul ul li {
  margin-top: 4px;
}
#menu ul ul li a {
  color: #000000;
  text-decoration: none;
  background-color: #ffddfc;
  display: block;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  width: 105px;
}
#menu ul ul li a:hover {
  background-color: #ff6666;
}
#header_white {
  background-position: center;
  opacity: 1;
  height: 224px;
  margin-right: 20px;
  margin-left: 226px;
  background-color: #ffffff;
}
#bouton_contact {
  width: 100px;
  display: block;
  margin-left: 400px;
  background-color: #33ff33;
}
#text_footer {
  font-family: Trebuchet MS;
  font-size: 0em;
  background-color: #3d39ff;
}
#image_header {
  height: 120px;
  margin-top: 20px;
  width: 700px;
}
#liste_contenu {
  border: 3px double #3366ff;
  margin-left: 40px;
  line-height: 1.5em;
  font-family: Arial,Helvetica,sans-serif;
  margin-right: 40px;
  background-color: #ccffff;
  margin-bottom: 40px;
  height: 150px;
  overflow: auto;
}
.imagegauche {
  padding-left: 5px;
  margin-top: 0;
}
.span {
  font-family: Arial,Helvetica,sans-serif;
  color: #ff6666;
}
span {
  font-family: Arial,Helvetica,sans-serif;
  color: #ff6666;
}
#logo {
  border: none;
  float: left;
  margin-left: 30px;
}
Merci d'avance pour votre aide[/code]

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

Bonjour moi j'obtiens ceci pour FF :
Image
et ceci avec IE :
Image
mais je trouve que l'affichage est mieux avec IE, y compris en 800x600. Les cop d'éc sont en 1280x1024, écran plat "carré" pas 16/9.
En effet, dans tous les cas avec FF, le bandeau de l'adresse postale couvre le lien sur les Liens (dernier item en bas du menu vertical).
Peux-tu développer ce qu'il y a qui n'irait pas avec FF? Si FF affiche mal, c'est qu'il y a une erreur qui, réparée, fera que l'affichage sera carrément encore mieux avec les deux navigateurs (en principe).
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
PascalG
Arias
Messages : 19
Inscription : 15 janv. 2008, 08:46

Message par PascalG »

Honte à moi: je me suis planté dans le fichier CSS :oops: J'ai tellement de b..... dans mes répertoires :!: Voilà les bonnes versions:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 6 November 2007), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      jumeaux_index
    </title>
    <link title="jumeaux_styles" rel="stylesheet" href="JumeauxStyles.css" type="text/css">
  </head>
  <body>
    <div id="conteneur">
      <img class="imagegauche" style="width: 150px; height: 211px;" alt="logo" src="apjcv_logo_ORANGE.jpg"><br>
      <h1 id="title">
        ASSOCIATION DES PARENTS DE JUMEAUX, TRIPLES OU PLUS DU CANTON DE VAUD
      </h1>
      <div id="menu">
        <ul>
          <li>
            <a href="index.php">accueil</a>
          </li>
          <li>
            <a href="modele.php">informations</a>
          </li>
          <li>
            <a onfocus="amenu:hoover" href="home.php">photos</a>
          </li>
          <li>
            <a href="home.php">gazette</a>
          </li>
          <li>
            <a href="home.php">bibliothèque</a>
          </li>
          <li>
            <a href="index.php">matériel</a>
          </li>
          <li>
            <a href="home.php">manifestations</a>
          </li>
          <li>
            <a href="home.php">liens</a>
          </li>
        </ul>
      </div>
      <div id="content">
        <h2 id="soustitre">
          Qui sommes-nous ?
        </h2>
        <p id="texte">
          <img class="imagetextdroite" alt="img1" src="annegeddes.jpg" hspace="20" vspace="20">Tous les parents et
          futurs parents de jumeaux, triplés ou plus, se retrouvent dans d'innombrables domaines en face de situations
          inconnues. Des questions sur la grossesse, l'accouchement, les soins, l'allaitement et l'éducation doivent
          trouver de nouvelles réponses puisqu'elles ne concernent pas un mais deux enfants, voire plus. <br>
          L'Association des Parents de Jumeaux Triplés et Plus du Canton de Vaud - <span>APJCV</span> - a été créée par
          des mamans de jumeaux en 1998 afin de vous aider à vivre le mieux possible ces situations particulières. Elle
          s'efforce de répondre à toutes vos questions et si nécessaire, vous oriente vers les personnes ou organismes
          susceptibles de vous aider au mieux. L'association est à votre écoute et vous apporte, dans la mesure de ses
          possibilités, son soutien en cas de soucis ou difficultés.    <br>
        </p>
      </div>
      <div id="footer">
        <p>
          Adresse: APJCV, Case postale 31 , 1030 Bussigny - contact
        </p>
      </div>
    </div>
  </body>
</html>

Code : Tout sélectionner

/* Generated by KaZcadeS */
#conteneur {
  border: 1px solid #330033;
  width: 80%;
  margin-left: 10%;
  background-color: #ffffff;
  height: 90%;
  padding-left: 2px;
  padding-bottom: 20px;
}
#header {
  margin-right: 20px;
  margin-left: 220px;
  background-position: center;
  opacity: 1;
  background-color: #ffffff;
  margin-top: 20px;
  height: 191px;
}
#content {
  border: 1px solid #3333ff;
  margin-right: 20px;
  height: 400px;
  background-color: #f7d6d4;
  margin-left: 240px;
  margin-top: 0px;
}
#title {
  border-style: none;
  margin: 30px 30px 43px 240px;
  padding: 23px 10px;
  line-height: 1.5;
  font-style: normal;
  text-align: center;
  font-family: Trebuchet MS;
  font-size: 2.2em;
  background-position: center;
  color: #6652e0;
  background-image: url(fond_orange_arrondi.jpg);
  background-repeat: no-repeat;
  background-color: #ffffff;
}
#menu {
  background-color: #ea6d00;
  margin-bottom: 0px;
  width: 200px;
  float: left;
  margin-top: 3px;
  margin-left: 10px;
}
#footer {
  font-family: Trebuchet MS;
  text-align: center;
  clear: none;
  margin-left: 0%;
  width: 79%;
  position: fixed;
  padding-top: 1px;
  margin-top: 30px;
  background-color: #ea6d00;
  color: #000000;
  font-weight: bold;
}
#texte {
  border-style: none;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 1em;
  line-height: 1.3em;
  text-align: justify;
  font-weight: normal;
  font-family: Trebuchet MS;
  color: #6652e0;
  background-color: #f7d6d4;
}
#soustitre {
  font-style: italic;
  font-family: Palatino Linotype;
  color: #6652e0;
  margin-left: 30px;
}
.imagetextdroite {
  margin-left: 20px;
  float: right;
}
#menu ul {
  list-style-type: none;
  text-decoration: none;
  font-family: Trebuchet MS;
  font-size: 0.8em;
  text-transform: uppercase;
}
#menu li {
  margin-top: 4px;
  font-family: Trebuchet MS;
}
#menu ul li a {
  padding: 3px 3px 10px 5px;
  display: block;
  text-decoration: none;
  width: 145px;
  color: #330033;
  background-color: #ffc99c;
}
#menu ul li a:hover {
  color: #330033;
  background-color: #ff9f00;
}
#menu ul ul {
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
}
#menu ul ul li {
  margin-top: 4px;
}
#menu ul ul li a {
  color: #000000;
  text-decoration: none;
  display: block;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  width: 105px;
  background-color: #cf8fb1;
}
#menu ul ul li a:hover {
  background-color: #ff6666;
}
#header_white {
  background-position: center;
  opacity: 1;
  height: 224px;
  margin-right: 20px;
  margin-left: 226px;
  background-color: #ffffff;
}
#bouton_contact {
  width: 100px;
  display: block;
  margin-left: 400px;
  background-color: #33ff33;
}
#text_footer {
  font-family: Trebuchet MS;
  font-size: 0em;
  background-color: #3d39ff;
  font-weight: bold;
}
#image_header {
  height: 120px;
  width: 700px;
  margin-top: 10px;
}
#liste_contenu {
  border: 3px double #3366ff;
  margin-left: 40px;
  line-height: 1.5em;
  margin-right: 40px;
  margin-bottom: 40px;
  overflow: auto;
  height: 200px;
  font-family: Trebuchet MS;
  background-color: #ffc99c;
}
.imagegauche {
  padding: 5px;
  float: left;
  margin-left: 40px;
  margin-top: 10px;
}
body {
  background-color: #ffffff;
  font-family: "Trebuchet MS",sans-serif,arial,helvetica;
  background-image: url(fond_degrade.jpg);
}
#description_manif {
  margin-left: 240px;
  height: 150px;
  margin-bottom: 70px;
  margin-top: 10px;
}
#page_photo {
  overflow: auto;
  padding-top: 0px;
  height: 400px;
  margin-left: 20px;
}
#titre_menu {
  font-weight: bold;
}
Merci d'avance :?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
GihefBey
Salamandre
Messages : 22
Inscription : 16 janv. 2008, 22:47

Message par GihefBey »

Bonjour,

Les défauts qui s'affichent chez moi sont :
— le #texte qui déborde
— le #footer qui disparaît
lorsqu'on réduit la taille de la page.

J'ai compris que tu veux garder le #footer en dehors du bloc avec bordure (actuellement le #conteneur).

Je te propose ces solutions.

Pour garder le #footer, sans qu'il disparaisse, en dehors des bordures :
— insérer un nouveau bloc dans le #conteneur.
    Un ”sous-conteneur”, #conteneur2, qui viendra s'intercaler et contiendra le reste.
    C'est lui qui récupérera la border.
    Ça évitera de devoir positionner le #footer en absolute sous un bloc avec une height en %.
— déplacer le #footer entre la </div> de fin du #conteneur2 et celle du #conteneur.

Pour éviter que le #texte déborde, supprimer la height du #content.

Ce qui donne

Code : Tout sélectionner

  <body>
    <div id="conteneur">
      <div id="conteneur2">

…

      </div>
      <div id="footer">
        <p>
          Adresse: APJCV, Case postale 31 , 1030 Bussigny - contact
        </p>
      </div>
    </div>
  </body>
</html>
avec

Code : Tout sélectionner

#conteneur { 
  width: 80%; 
  margin-left: 10%; 
  background-color: #ffffff; 
  height: 90%; 
  padding-left: 2px; 
  } 
#conteneur2 { 
  border: 1px solid #330033; 
  padding-bottom: 20px; 
  } 
#content { 
  border: 1px solid #3333ff; 
  margin-right: 20px; 
/*  height: 400px; */
  background-color: #f7d6d4; 
  margin-left: 240px; 
  margin-top: 0px; 
  } 
#footer { 
  font-family: 'Trebuchet MS'; 
  text-align: center; 
/*  clear: none; 
  margin-left: 0%; 
  width: 79%; 
  position: fixed; 
  padding-top: 1px; */
  margin-top: 30px; 
  background-color: #ea6d00; 
  color: #000000; 
  font-weight: bold; 
width: 100%; 
height : 52px;
line-height : 52px;
  }  
On peut tester le résultat dans cette page.
On peut surtout le tester dans IE ce que je ne peux pas faire.


++
“TRIPLES” ou “TRIPLÉS” ?

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/523.12 (KHTML, like Gecko) Safari/419.3
PascalG
Arias
Messages : 19
Inscription : 15 janv. 2008, 08:46

Message par PascalG »

Merci pour ce conseil :D et la correction de la faute: je ne trouvais pas le É :oops:

:idea: J'ai repensé mon projet et, en fonction des autres pages que je pense réaliser, je vais redesigner mon histoire en faisant:
- une div float gauche - de largeur fixe en px et de hauteur fixe en % - qui contiendra le logo et le menu
- une div sur la droite de l'écran - avec une marge fixe en px et une hauteur fixe en % - qui contiendra le header et le contenu
- une div footer en dessous de tout ça

Avec ça j'éspère ne pas avoir de problème sur les différents navigateurs et en plus avec différentes résolutions d'écran. Quelqu'un de chevronné pourrait-il me conforter dans mon idée :) ou directement me la descendre avec des arguments frappants :cry: .

Merci d'avance pour vos remarques qui me sont toujours très utiles :D .
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

pour une meilleure compatibilité navigateurs/définitions d'écran, tu as fortement intérêt à exactement inverser et prendre des % pour les largeurs et des px pour les hauteurs, surtout pour les grandes largeurs...
Tu remarqueras que dans le code de GihefBey, c'est exactement ce qui est proposé et c'est pas pour rien.
à+...
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
PascalG
Arias
Messages : 19
Inscription : 15 janv. 2008, 08:46

Message par PascalG »

J'ai refait ma page en se basant sur vos conseils: ça marche nickel sur IE et Firefox :D .

Par contre, j'ai poussé le raffinement en mettant des dimensions de div en % un peu partout et lorsque je test ma page sur une résolution de 800*600 = catasrophe :cry: : des polices immenses - bien que je les ai définies en em, mes images qui prennent tout l'écran - évidemment :!: .

Comment faut-il faire: garder les dimensions en pixel et laisser les utilisateurs à faible résolution s'amuser avec leurs ascenceurs ou y-a-t-il une autre solution à ma portée :?:

Merci d'avance

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

peux-tu fournir ta page de code ou mieux, le lien vers ton site? Qu'est-ce que tu as défini en em, pas tes images, je suppose?
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
PascalG
Arias
Messages : 19
Inscription : 15 janv. 2008, 08:46

Message par PascalG »

Bonjour,

voilà ma page et la feuille CSS associée:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 6 November 2007), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      jumeaux_index
    </title>
    <link title="jumeaux_styles" rel="stylesheet" href="JumeauxStyles_new.css" type="text/css">
  </head>
  <body>
    <div id="conteneur">
      <div id="gauche">
        <img class="imagegauche" style="width: 150px; height: 211px;" alt="logo" src="apjcv_logo_ORANGE.jpg"><br>
        <div id="menu">
          <ul>
            <li>
              <a href="index.php">accueil</a>
            </li>
            <li>
              <a href="modele.php">informations</a>
            </li>
            <li>
              <a onfocus="amenu:hoover" href="home.php">photos</a>
            </li>
            <li>
              <a href="home.php">gazette</a>
            </li>
            <li>
              <a href="home.php">bibliothèque</a>
            </li>
            <li>
              <a href="index.php">matériel</a>
            </li>
            <li>
              <a href="home.php">manifestations</a>
            </li>
            <li>
              <a href="home.php">liens</a>
            </li>
          </ul>
        </div>
      </div>
      <div id="droite">
        <h1 id="title">
          ASSOCIATION DES PARENTS DE JUMEAUX, TRIPLÉS OU PLUS DU CANTON DE VAUD
        </h1>
        <div id="content">
          <h2 id="soustitre">
            Qui sommes-nous ?
          </h2>
          <p id="texte">
            <img class="imagetextdroite" alt="img1" src="annegeddes.jpg" hspace="20" vspace="20">Tous les parents et
            futurs parents de jumeaux, triplés ou plus, se retrouvent dans d'innombrables domaines en face de
            situations inconnues. Des questions sur la grossesse, l'accouchement, les soins, l'allaitement et
            l'éducation doivent trouver de nouvelles réponses puisqu'elles ne concernent pas un mais deux enfants,
            voire plus. <br>
            L'Association des Parents de Jumeaux Triplés et Plus du Canton de Vaud - <span>APJCV</span> - a été créée
            par des mamans de jumeaux en 1998 afin de vous aider à vivre le mieux possible ces situations
            particulières. Elle s'efforce de répondre à toutes vos questions et si nécessaire, vous oriente vers les
            personnes ou organismes susceptibles de vous aider au mieux. L'association est à votre écoute et vous
            apporte, dans la mesure de ses possibilités, son soutien en cas de soucis ou difficultés. 
          </p>
        </div>
      </div>
      <div id="footer">
        Adresse : APJCV, Case Postale, 1030 Bussigny - contact
      </div>
    </div>
  </body>
</html>

Code : Tout sélectionner

/* Generated by KompoZer */
#conteneur {
  border: 1px solid #330033;
  padding: 1%;
  margin-left: 10%;
  background-color: #ffffff;
  width: 80%;
  height: 650px;
}

#content {
  border: 1px solid #3333ff;
  background-color: #f7d6d4;
  margin-top: 10px;
  height: 75%;
}
#title {
  border: 5px outset #6633ff;
  margin: 0;
  padding: 10px;
  line-height: 1.5;
  font-style: normal;
  text-align: center;
  font-size: 2.2em;
  background-position:  center center;
  color: #6652e0;
  background-repeat: no-repeat;
  background-color: #ff6600;
}
#menu {
  background-color: #ea6d00;
  margin-bottom: 0px;
  width: 100%;
  margin-left: 0px;
  float: left;
  margin-top: 2%;
}
#footer {
  text-align: center;
  background-color: #ea6d00;
  color: #000000;
  font-weight: bold;
  width: 100%;
  margin-left: 0;
  padding-bottom: 1%;
  padding-top: 1%;
  margin-top: 1%;
}
#texte {
  border-style: none;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 1em;
  line-height: 1.3em;
  text-align: justify;
  font-weight: normal;
  font-family: Trebuchet MS;
  color: #6652e0;
  background-color: #f7d6d4;
}
#soustitre {
  font-style: italic;
  font-family: Palatino Linotype;
  color: #6652e0;
  margin-left: 30px;
}
.imagetextdroite {
  margin-left: 20px;
  float: right;
}
#menu ul {
  list-style-type: none;
  text-decoration: none;
  font-family: Trebuchet MS;
  font-size: 0.8em;
  text-transform: uppercase;
}
#menu li {
  margin-top: 4px;
  font-family: Trebuchet MS;
}
#menu ul li a {
  border: 3px inset #3333ff;
  padding: 3px 3px 10px 5px;
  display: block;
  text-decoration: none;
  color: #330033;
  background-color: #ffc99c;
  width: 120px;
}
#menu ul li a:hover {
  border: 3px outset #3333ff;
  background-color: #ff9f00;
  font-size: 1em;
  color: #333399;
}
#header_white {
  background-position:  center center;
  opacity: 1;
  height: 224px;
  margin-right: 20px;
  margin-left: 226px;
  background-color: #ffffff;
}
#bouton_contact {
  width: 100px;
  display: block;
  margin-left: 400px;
  background-color: #33ff33;
}
#text_footer {
  font-family: Trebuchet MS;
  font-size: 0em;
  background-color: #3d39ff;
  font-weight: bold;
  width: 1000px;
}
#image_header {
  margin-left: 3%;
}
#liste_contenu {
  border: 3px double #3366ff;
  line-height: 1.5em;
  overflow: auto;
  font-family: Trebuchet MS;
  background-color: #ffc99c;
  margin-right: 2%;
  margin-bottom: 2%;
  margin-left: 2%;
}
.imagegauche {
  padding: 5px;
  float: left;
  margin-top: 0px;
  margin-left: 9%;
}
body {
  background-color: #ffffff;
  font-family: "Trebuchet MS",sans-serif,arial,helvetica;
  background-image: url(fond_degrade.jpg);
  font-size: 0.93em;
}
#description_manif {
  margin: 5px 20px 0px 240px;
  padding-right: 20px;
  padding-left: 20px;
  height: 210px;
  background-color: #ffccff;
}
#page_photo {
  overflow: auto;
  padding-top: 0px;
  margin-left: 20px;
  height: 380px;
  margin-top: 10px;
}
#titre_menu {
  font-weight: bold;
}
.photos {
  border-style: double;
  border-width: 3px;
  margin: 5px;
}
#tab_activité {
  margin-top: 0px;
  margin-right: 50px;
  margin-left: 50px;
}
#gauche {
  float: left;
  width: 20%;
}
#droite {
  padding: 1%;
  margin-left: 21%;
  height: 90%;
}
span {
  font-size: 1.1em;
  font-weight: bold;
  color: #cc33cc;
  background-color: #ffccff;
}
Merci d'avance pour vore aide

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

bonjour je n'ai pas du tout de polices immenses ni sur FF ni sur IE en 800*600.
Le menu gauche glisse à droite pour recouvrir le texte avec FF, c'est tout. En 1024-768, il reste sage.
Je n'ai pas les images mais comme j'ai les dimensions dans la page html, c'est comme si je les avais et leur absence ne gêne donc pas l'affichage. Au fond, l'affichage est quasi correct, pas du tout la catastrophe annoncée. Alors?
FF 800*600 :
Image
IE6 800*600 :
Image


Au fait, je viens de découvrir les attributs "hspace" et "vspace", grâce à toi :
<img class="imagetextdroite" alt="img1" src="annegeddes.jpg" hspace="20" vspace="20">
ceci dit, ils sont déconseillés :wink: :
http://www.la-grange.net/w3c/html4.01/s ... def-hspace
PascalG a écrit :Merci pour ce conseil Très content et la correction de la faute: je ne trouvais pas le É Embarassé
en capitales, on met pas d'accent? C'est bien "TRIPLES"?!?
à bientôt...
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
PascalG
Arias
Messages : 19
Inscription : 15 janv. 2008, 08:46

Message par PascalG »

Effectivement, ça ne paraît pas si catastrophique. Pour le menu qui déborde, je crois que je devrais pouvoir régler le problème.

Je suis débutant pour la création de site internet comme vous l'avez remarqué, mais je me pose néanmoins une question :?:
Mon logo fait 160px de large, il est dans une div - div droite- qui fait 20% de 80% de l'écran - largeur de la div conteneur - soit environ 128 px dans un écran 800*600. Donc, mon image est trop grosse et va déborder sur la div voisine - c'est ce qui se passe sur mon écran lorsque j'ai les images. Existe-t-il un moyen - simple si possible - pour diminuer la taille des images en fonction de la taille de l'écran de l'utilisateur :?:

Je suis assez pénible, mais j'ai compris que certaines personnes se font un plaisir d'aider les autres :D . Merci encore

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12
PascalG
Arias
Messages : 19
Inscription : 15 janv. 2008, 08:46

Message par PascalG »

Une autre question que j'ai oublié de mentionner avant: comment diminuer la taille de l'espace qui se trouve à gauche de mes rubriques de menu :?:

Merci d'avance

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

PascalG a écrit :Je suis assez pénible, mais j'ai compris que certaines personnes se font un plaisir d'aider les autres
"pénible" est certainement trés exagéré.
PascalG a écrit :Mon logo fait 160px de large, il est dans une div - div droite- qui fait 20% de 80% de l'écran - largeur de la div conteneur -
Ton image alt="logo" est plutôt dans une div id gauche n'est-ce pas?

Code : Tout sélectionner

<div id="gauche">
        <img class="imagegauche" style="width: 150px; height: 211px;" alt="logo" src="apjcv_logo_ORANGE.jpg"><br>
PascalG a écrit :diminuer la taille des images en fonction de la taille de l'écran de l'utilisateur
je ne connais pas ton image logo, ce qu'elle représente, si c'est un motif décoratif, elle peut supporter une déformation et lui donner une dimension en % en css doit être possible, ici, il faudrait mettre 100% pour qu'elle prenne toute la largeur du <div>, ça lui permettrait de rétrécir ou s'élargir avec son conteneur selon les définitions d'écran.
Essaie mais le résultat en qualité risque dans certains cas d'être un peu naze...
Une image ne doit se définir qu'en pixels, je crois, et si tu diminues le nbre de pixels avec un logiciel d'images, ça a tendance aussi à bousiller la qualité, mais si ton image est de trés bonne qualité au départ...
En tout cas, je rajouterais un <div> aux dimensions de l'image en pixels uniquement pour contenir celle-ci (une image doit toujours être dans un conteneur si tu bosses en strict, à voir ton doctype), donc, plutôt :

Code : Tout sélectionner

<div id="conteneur">
      <div id="gauche">
      <div id="imagegauche">
        <img class="imagegauche" style="width: 150px; height: 211px;" alt="logo" src="apjcv_logo_ORANGE.jpg">
         </div>
<br>
        <div id="menu">
          <ul>
            <li>
              <a href=.................................
ça ne peut qu'arranger les choses.
PascalG a écrit :comment diminuer la taille de l'espace qui se trouve à gauche de mes rubriques de menu
avec "espacement gauche :0" et non plus "1%" pour le div conteneur, si je comprends bien l'espace dont tu parles...
PascalG a écrit :Pour le menu qui déborde, je crois que je devrais pouvoir régler le problème.
en effet, ne pas mettre de largeur du tout, ou mettre une largeur en % à "#menu ul li a", 120px, c'est beaucoup trop.
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
GihefBey
Salamandre
Messages : 22
Inscription : 16 janv. 2008, 22:47

Message par GihefBey »

<parenthèse>
je ne trouvais pas le É
Vois htmlcodes

en capitales, on met pas d'accent? C'est bien "TRIPLES"?!?
À moins d'utiliser une ancienne machine à écrire, on peut, on doit même.
En français, une faute d'accent est une faute, même sur les majuscules.
Sinon, pourquoi les codes de caractères les auraient-ils intégrées, pourquoi les typographes les dessineraient-ils ?

Tiens, fais un test. Imagine un titre de journal :

  UN GENDARME TUE

Avec ou sans accent ?
Que s'est-il passe, reellement ?

</parenthèse>




Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/523.12 (KHTML, like Gecko) Safari/419.3
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

on doit
dont acte.
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 0 invité