problème d'affichage

chatagnin · Message par **chatagnin** » 27 nov. 2006, 12:48

saveursduportugal.com

j'avais testé mon site dans IE 6 et dans mozilla, je n'avais pas de problème majeur, or il parait que dans IE 7 mon menu et mes images se chevauchent et de plus ma mise en page de la page d'accueil est bouleversée

Peut-être y-a-t-il aussi un problème par rapport à la taille de l'écran puisque j'édite sur un petit portable

d'autre part j'ai un problème lors de l'apparition du bandeau gauche "favoris" ou rien ne va plus dans la mise en page

Pouvez-vous m'aider

merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Message par **chinon37** » 27 nov. 2006, 14:20

Bonjour,
Sous firefox, j'ai un chevauchement entre texte et menu
En fait, il faudrait déja que tu revois complètement t feuille de style.
- Ainsi, selon moi, un body en position flottant gauche n'a aucun intérêt
- tous les éléments en position statique: aucun intérêt
- seul le menu devrait être en flottant gauche
- la transparence ne fonctionne pas avec tous les navigateurs (entre autre IE6 win)
- ne jamais mélanger des styles interne et une feuille de style: les styles internes, déclarés en dernier, prennent le dessus! d'où le souk dans ta page
*sans vouloir tout reprendre, j'ai un peu modifié ta page qui , bien que simplifiée, doit s'aficher nettement mieux

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 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      Actualités
    </title>
    <style title="gabarit" media="screen" type="text/css">
body {
    background-color: #ffffe8;
    }
    dl {
    opacity: 0.674;
    background-position:  center center;
    background-color: #ffffff;
    background-image: url(../Photos/CeramiqueAlentejo/dessousdeplat.jpg);
    }
    dd {
    border-style: double;
    border-width: 3px;
    font-family: Comic Sans MS;
    font-size: 19px;
    text-align: center;
    line-height: 30pt;
    font-style: italic;
    font-weight: bolder;
    background-position:  center center;
    width: 7em;
    }
    #menu {
    display: table;
    overflow: auto;
    float: left;
    position: relative;
    }
    #corps {
    border-style: none;
    top: 5%;
    position: relative;
    margin-left: 300px;
    }

    </style>
    <meta content="chatagnin" name="author">
    <meta content="Aperçu du Portugal" name="description">
  </head>
  <body style="direction: ltr;">
    <br>
    <div id="menu">
      <dl>
        <dd>
          <a href="index.html">Accueil</a>
        </dd>
        <dd>
          Actualités
        </dd>
        <dd>
          <a href="alentejo.html">Céramiques de l'Alentejo</a>
        </dd>
        <dd>
          <a href="portos.html">Portos<br>
          et Alcools</a>
        </dd>
        <dd>
          <a href="alimentation.html">Alimentation</a>
        </dd>
        <dd>
          <a href="Vins.html">Vins</a> 
        </dd>
        <dd>
          <a href="Barcelos.html">Céramiques de Barcelos</a>
        </dd>
        <dd>
          <a href="Pour%20nous%20joindre.html">Pour nous Trouver</a>
        </dd>
        <dd>
           
        </dd>
        <dd>
          <a href="liens.html">Liens</a>
        </dd>
        <dd>
          <a href="mailto:otilia@saveursduportugal.com">Contact</a>
        </dd>
      </dl>
    </div>
    <div id="corps">
      <h1 style="text-align: center;">
        Offrez (-vous) le Portugal !!!!
      </h1> <big style="font-weight: bold;">Pour vous faire plaisir et pour faire découvrir à vos amis les couleurs et
      les saveurs de ce chaleureux pays, vous trouverez ici de multiples idées de cadeaux originales et
      savoureuses.<br>
      <br>
       Laissez-vous guider ...</big>.<br>
      <br>
      <span style="text-decoration: underline; font-weight: bold;">Pour l'apéritif:</span><br>
      <br>
      Pour accompagner l'un de nos subtils <a href="portos.html"><big>Portos</big></a> , découvrez les <a href=
      "alimentation.html#Mousse"><big>mousses de sardines ou de thon</big></a>, les <big><a href=
      "alimentation.html#Lupins">lupins</a></big> et  faites griller un peu de <a href=
      "alimentation.html#Chourizo"><big>chourizo</big></a> dans le <a href="alentejo.html#Grill"><big>gril à
      chourizo</big></a>.<br>
      Pour mieux les mettre en valeur, disposez les dans l'un de nos <a href="alentejo.html#Miniatures"><big>petits
      plats</big></a> de présentation ou utilisez le <a href="alentejo.html#Plat_ap%E9ritif"><big>plat à
      olives</big></a>.<br>
      <br>
      <span style="font-weight: bold; text-decoration: underline;">Pour le repas :</span><br>
      <br>
      Essayez une des multiples recettes de <big><a href="alimentation.html">Bacalhau (Morue)</a></big> que vous
      pourrez servir dans un superbe plat à four.<br>
      Découvrez les préparations culinaires comme les <big><a href="alimentation.html">accras de morue</a></big>, ou le
      <big><a href="alimentation.html#Cassoulet">cassoulet</a> Portugais</big>.<br>
      <br>
      En accompagnement, faîtes votre choix parmi notre gamme de <a href="Vins.html"><big>vins</big></a>, avec en
      particulier le typique et unique <big><a href="Vins.html">Vinho Verde</a>,</big> à maintenir au frais dans cette
      superbe <a href="alentejo.html#Brique"><big>brique à vin</big></a>.<br>
      Proposez néanmoins un peu d'eau dans cette belle <a href="alentejo.html#Pichets"><big>carafe</big></a>.<br>
      <br>
      Le fromage ne pourra qu'être meilleur présenté dans cette belle <big><a href="alentejo.html#Cloche">cloche à
      fromage</a></big>.<br>
      <br>
      En dessert vous pourrez savourer les réputées <big><a href="alimentation.html#Pastel_de_Nata">Pastel de
      Nata</a></big> ou prendre un des fruits disposés dans cette belle <a href=
      "alentejo.html#Fruiti%E8re"><big>fruitière</big></a>.<br>
      <br>
      Le café vous semblera encore meilleur dans ce superbe <a href="alentejo.html#caf%E9"><big>service à
      café</big></a>.<br>
      <br>
      Si vous n'envisagez pas de prender le volant, vous pourrez terminer en dégustant un des divers <a href=
      "portos.html#Alcools"><big>digestifs</big></a>, comme la fameuse et douce <a href=
      "portos.html#Alcools"><big>liqueur d'amandes amères</big></a>.<br>
      <br>
      Après cet excellent repas, vous n'aurez que plus de plaisir à admirer nos objets purements décoratifs (<a href=
      "alentejo.html#Appliques"><big>assiettes</big>, <big>appliques</big>, <big>vases</big></a>,...)<br>
      <br>
      Si cet aperçu du Portugal vous a séduit rendez-vous dans notre <a href=
      "Pour%20nous%20joindre.html"><big>boutique</big></a>, ainsi que sur les <a href="liens.html"><big>sites de nos
      partenaires</big></a> pour prolonger la découverte.<br>
      <br>
      Si vous souhaitez  être informé de nos nouveautés, promotions, ..ou pour toute question, suggestion, ... :
       <big>contact</big>
      <div style="text-align: right;">
        <a href="http://www.nvu.com/"><img style="left: 226px; width: 132px;" alt="Document fait avec Nvu" src=
        "http://www.nvu.com/fait_avec_Nvu.png" border="0"></a>
      </div>
    </div>
  </body>
</html>

chatagnin · Message par **chatagnin** » 27 nov. 2006, 20:01

Merci pour ta réponse
est-ce que ça veut dire que je dois reproduire ces modifications directement dans le code source ou modifier par l'éditeur css ?

D'autre part, comment transformer le style transitionnal en strict ?

Pour ma part je ne vois pas de chevauchement dans mozilla pourtant d'après toi il existe comme on me l'a signalé dans ie7

je ne le vois pas non plus dans ie6
cela peut il être lié à la taille de l'écran?

merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Message par **chinon37** » 28 nov. 2006, 08:23

Oui, le problème est lié entre autres à la taille de l'écran: la taille optimum de ta page est de 1012 x 820. Or, très peu d'écrans ont cette taille!
Mais il est surtout dû à un mélange incroyable de styles en tous genres!
Pour le code que je t'ai donné:
> Tu ouvres dans Kpz une nouvelle page
> Tu fait un copié-collé de mon code dans l'onglet source après avoir effacé tout le contenu de cet onglet source
> tu enregistres ta page au même endroit (même dossier) que la page d'origine en lui donnant par exemple le nom de fichier "offrezvousleportugalbis.html" (en mettant dans le même dossier, les images s'afficheront correctement)
> Tu fais un aperçu navigateur pour voir ce que ça donne

chatagnin · Message par **chatagnin** » 28 nov. 2006, 13:00

Merci encore
ça fonctionne

peux-tu m'indiquer quelles sont les modifications importantes à apporter à mes autres pages et en particulier la page d'accueil pour résoudre le problème

comment modifier la taille optimale de l'ecran ?
salut

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Message par **chinon37** » 28 nov. 2006, 13:30

- il n'y a pas de taille optimale... puisque la taille des écrans varie du téléphone portable à la tV grand écran en passant par les moniteurs de 15" à 24" etc.
- Je n'ai ni le temps, ni le courage de corriger tes pages et le forum n'est pas fait pour cela. J'ai dégrossi une de tes pages pour que tu t'en inspires, mais c'est du vite fait et les puristes trouveraient sans doute beaucoup à redire

- le conseil principal, c'est: on ne mélange pas des styles internes et une feuille de style (qu'elle soit liée ou incorporée). Il faut toujours donner priorité à la feuille de style (qui permet de regrouper les styles de la page). Cela permet également de séparer le contenu de la forme.
- concernant la taille de la page, je limite généralement la largeur de la page à 800 px. Mais quand c'est possible, il est préférable de paramètrer la page pour qu'elle s'adapte à la largeur de l'écran.(unités em ou %) -> il n'est pas bon du tout d'avoir une barre de défilement horizontale.
par une recherche sur le web, tu trouveras d'excellents guides qui te permettront d'en apprendre davantage.
Bon courage

chatagnin · Message par **chatagnin** » 29 nov. 2006, 15:33

j'ai suivi tes conseils

j'ai modifié mes pages en fonction de tes rectifications

ça fonctionne dans mozilla

mais pas dans ie

je n'ai aucun affichage du corps de ma page (constitué d'un tableau , je sais que les tableaux sont déconseillés, malheureusement j'ai une site basé sur des images et l'idée de tout recommencer me démoralise)

je joins mon code source en espérant qu'il existe une solution - merci

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html lang="fr-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">
<title>Ceramiques de l'Alentejo</title>
<style title="gabarit" media="screen" type="text/css">
body {
background-color: #ffffe8;
}
dl {
opacity: 0.674;
background-position: center center;
background-color: #ffffff;
background-image: url(../Photos/CeramiqueAlentejo/dessousdeplat.jpg);
}
dd {
border-style: double;
border-width: 3px;
font-family: Comic Sans MS;
font-size: 19px;
text-align: center;
line-height: 30pt;
font-style: italic;
font-weight: bolder;
background-position: center center;
width: 7em;
}
#menu {
display: table;
overflow: auto;
float: left;
position: relative;
}
#corps {
border-style: none;
top: 5%;
position: relative;
margin-left: 300px;
}
</style>
<meta content="chatagnin" name="author">
<meta content="Aperçu du Portugal" name="description">
</head>
<body style="direction: ltr;">
<br>
<div id="menu">
<dl>
<dd> <a href="index.html">Accueil</a> </dd>
<dd>Actualités </dd>
<dd> <a href="alentejo.html">Céramiques
de l'Alentejo</a> </dd>
<dd> <a href="portos.html">Portos<br>
et Alcools</a> </dd>
<dd> <a href="alimentation.html">Alimentation</a>
</dd>
<dd> <a href="Vins.html">Vins</a> </dd>
<dd> <a href="Barcelos.html">Céramiques
de Barcelos</a> </dd>
<dd> <a href="Pour%20nous%20joindre.html">Pour
nous Trouver</a> </dd>
<dd> </dd>
<dd> <a href="liens.html">Liens</a> </dd>
<dd> <a href="mailto:otilia@saveursduportugal.com">Contact</a>
</dd>
</dl>
</div>
<p style="text-align: center;">  <big>Laissez
vous charmer par les couleurs éclatantes des
Céramiques de l'Alentejo.</big><br>
  Réalisées de manière
totalement artisanale,
chaque pièce est unique, les photos ci-dessous
représentant la catégorie de  chaque
pièce.
Elles ne sont pas représentatives de la dimension des objets.</p>
<table style="text-align: left; width: 100px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: middle; text-align: center;">Jarre </td>
<td align="center" valign="middle"><a
name="Cloche"></a>Cloche à fromage</td>
<td align="center" valign="middle">Barrils</td>
<td align="center" valign="middle"><a
name="Brique"></a>Brique à vin</td>
</tr>
<tr>
<td align="center" valign="middle"> <img
style="top: 173px; left: 288px; width: 82px; height: 151px;"
alt="" src="../Photos/CeramiqueAlentejo/jarre.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 170px; left: 463px; width: 206px; height: 153px;"
alt="" src="../Photos/CeramiqueAlentejo/cloche.jpg"> </td>
<td align="center" valign="middle"><img
style="top: 181px; left: 683px; width: 184px; height: 132px;"
alt="" src="../Photos/CeramiqueAlentejo/barrils.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 171px; left: 867px; width: 207px; height: 151px;"
alt="" src="../Photos/CeramiqueAlentejo/briques.jpg"></td>
</tr>
<tr>
<td align="center" valign="middle">14
€</td>
<td align="center" valign="middle">22,50
€</td>
<td align="center" valign="middle">15
€</td>
<td align="center" valign="middle">18
€</td>
</tr>
<tr>
<td align="center" valign="middle"><a
name="Fruitière"></a>Fruitière</td>
<td align="center" valign="middle"><a
name="Pichets"></a>Pichets 1,5 L</td>
<td align="center" valign="middle">Assiette
décorative d.44<br>
</td>
<td align="center" valign="middle">Plat de
service</td>
</tr>
<tr>
<td align="center" valign="middle"><img
style="top: 392px; left: 248px; width: 193px; height: 148px;"
alt="" src="../Photos/CeramiqueAlentejo/fruitiere2.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 391px; left: 456px; width: 215px; height: 145px;"
alt="" src="../Photos/CeramiqueAlentejo/pichet1,5L.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 392px; left: 680px; width: 185px; height: 154px;"
alt=""
src="../Photos/CeramiqueAlentejo/assietted%E9corative3.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 393px; left: 874px; width: 206px; height: 146px;"
alt="" src="../Photos/CeramiqueAlentejo/platdeservice.jpg"><br>
</td>
</tr>
<tr>
<td align="center" valign="middle">15,50
€</td>
<td align="center" valign="middle">14
€</td>
<td align="center" valign="middle">40
€</td>
<td align="center" valign="middle">15
€</td>
</tr>
<tr>
<td align="center" valign="middle">Petit plat
à olives</td>
<td align="center" valign="middle">Bols</td>
<td align="center" valign="middle">Dessous de
plat</td>
<td align="center" valign="middle"><a
name="Miniatures"></a>Miniatures</td>
</tr>
<tr>
<td align="center" valign="middle"><img
style="top: 570px; left: 240px; width: 187px; height: 174px;"
alt="" src="../Photos/CeramiqueAlentejo/petits%20olives2.jpg"></td>
<td align="center" valign="middle"><img
style="top: 682px; left: 555px; width: 213px; height: 171px;"
alt="" src="../Photos/CeramiqueAlentejo/bols.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 596px; left: 674px; width: 169px; height: 169px;"
alt="" src="../Photos/CeramiqueAlentejo/dessousdeplat.jpg"></td>
<td align="center" valign="middle"><img
style="top: 607px; height: 159px; left: 859px; width: 210px;"
alt="" src="../Photos/CeramiqueAlentejo/miniatures2.jpg"><br>
</td>
</tr>
<tr>
<td align="center" valign="middle">2,50
€</td>
<td align="center" valign="middle">5
€</td>
<td align="center" valign="middle"> 7
€</td>
<td align="center" valign="middle">3
€</td>
</tr>
<tr>
<td align="center" valign="middle">Grand Plat
à four avec anses </td>
<td align="center" valign="middle">Petit Plat
à four avec anses</td>
<td align="center" valign="middle">Cocotte</td>
<td align="center" valign="middle"> Grand
Plat à <a name="four"></a>four</td>
</tr>
<tr>
<td align="center" valign="middle"><img
style="top: 838px; left: 242px; width: 205px; height: 176px;"
alt="" src="../Photos/CeramiqueAlentejo/platansesGd.jpg"></td>
<td align="center" valign="middle"><img
style="top: 840px; left: 464px; width: 197px; height: 174px;"
alt=""
src="../Photos/CeramiqueAlentejo/Plat%20fouransespetit.jpg"></td>
<td align="center" valign="middle"><img
style="top: 845px; left: 677px; width: 187px; height: 163px;"
alt="" src="../Photos/CeramiqueAlentejo/cocotte.jpg"></td>
<td align="center" valign="middle"><img
style="top: 986px; left: 1106px; width: 208px; height: 124px;"
alt="" src="../Photos/CeramiqueAlentejo/platfourGd.jpg"><br>
</td>
</tr>
<tr>
<td align="center" valign="middle">16
€</td>
<td align="center" valign="middle">14
€</td>
<td align="center" valign="middle">20
€</td>
<td align="center" valign="middle">24,50
€</td>
</tr>
<tr>
<td align="center" valign="middle"><a
name="Plat_apéritif"></a>Plat apéritif</td>
<td align="center" valign="middle">Chopes</td>
<td align="center" valign="middle">Vase de mur</td>
<td align="center" valign="middle">Cendrier</td>
</tr>
<tr>
<td align="center" valign="middle"><img
style="top: 1187px; left: 239px; width: 159px; height: 156px;"
alt="" src="../Photos/CeramiqueAlentejo/platolives2.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 1089px; left: 465px; width: 215px; height: 109px;"
alt="" src="../Photos/CeramiqueAlentejo/chopes.jpg"></td>
<td align="center" valign="middle"><img
style="left: 916px; width: 100px; top: 994px; height: 142px;"
alt="" src="../Photos/CeramiqueAlentejo/vase2.jpg"></td>
<td align="center" valign="middle"><img
style="top: 1102px; left: 888px; width: 212px; height: 98px;"
alt="" src="../Photos/CeramiqueAlentejo/cendriers.jpg"></td>
</tr>
<tr>
<td align="center" valign="middle">15
€</td>
<td align="center" valign="middle">5 €</td>
<td align="center" valign="middle">8,50
€ </td>
<td align="center" valign="middle">5,50
€</td>
</tr>
<tr>
<td align="center" valign="middle">Petit Plat
à Cake</td>
<td align="center" valign="middle">Grand Plat
à Cake<br>
</td>
<td align="center" valign="middle"><a
name="Grill"></a>Grill à Chourizo</td>
<td align="center" valign="middle">Grand
Saladier d.33</td>
</tr>
<tr>
<td align="center" valign="middle"><img
style="top: 1381px; left: 239px; width: 172px; height: 120px;"
alt="" src="../Photos/CeramiqueAlentejo/petitcake.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 1332px; left: 452px; width: 215px; height: 86px;"
alt="" src="../Photos/CeramiqueAlentejo/platcakeGd2.jpg"></td>
<td align="center" valign="middle"><img
style="top: 1373px; left: 802px; width: 174px; height: 118px;"
alt="" src="../Photos/CeramiqueAlentejo/grillchorizo.jpg"></td>
<td align="center" valign="middle"><img
style="top: 878px; left: 676px; width: 198px; height: 105px;"
alt="" src="../Photos/CeramiqueAlentejo/grandsaladier.jpg"></td>
</tr>
<tr>
<td align="center" valign="middle">8
€<br>
</td>
<td align="center" valign="middle">11,50
€<br>
</td>
<td align="center" valign="middle">5
€<br>
</td>
<td align="center" valign="middle">21
€</td>
</tr>
<tr>
<td align="center" valign="middle">Service
à <a name="café"></a>café 6
tasses<br>
</td>
<td align="center" valign="middle"><a
name="Appliques"></a>Appliques</td>
<td align="center" valign="middle">Assiette
Décorative</td>
<td align="center" valign="middle">Assiette
Décorative</td>
</tr>
<tr>
<td align="center" valign="middle"><img
style="top: 1482px; left: 240px; width: 207px; height: 162px;"
alt="" src="../Photos/CeramiqueAlentejo/service%E0caf%E9.jpg"><br>
</td>
<td align="center" valign="middle"><img
style="top: 1482px; left: 524px; width: 77px; height: 163px;"
alt="" src="../Photos/CeramiqueAlentejo/applique2.jpg"><img
style="top: 1485px; left: 568px; width: 71px; height: 163px;"
alt="" src="../Photos/CeramiqueAlentejo/applique3.jpg"><img
style="top: 1486px; left: 602px; width: 67px; height: 162px;"
alt="" src="../Photos/CeramiqueAlentejo/applique4.jpg"></td>
<td align="center" valign="middle"><img
style="top: 1480px; left: 689px; width: 166px; height: 163px;"
alt="" src="../Photos/CeramiqueAlentejo/assiettedecorative2.jpg"></td>
<td align="center" valign="middle"><img
style="top: 1485px; left: 907px; width: 171px; height: 161px;"
alt=""
src="../Photos/CeramiqueAlentejo/assietted%E9corative1.jpg"></td>
</tr>
<tr>
<td align="center" valign="middle">55
€<br>
</td>
<td align="center" valign="middle">15
€</td>
<td align="center" valign="middle">40
€</td>
<td align="center" valign="middle">40
€</td>
</tr>
</tbody>
</table>
</body>
</html>
[/img]

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Geckozone

problème d'affichage

problème d'affichage

affichage

suite

problème de tableau

Qui est en ligne ?