Petit défaut graphique

Rtg57 · Message par **Rtg57** » 26 sept. 2008, 20:20

Bonjour,

voici l'adresse de mon site (Ce n'est pas pour me faire de la pub):
http://gemogiciel.free.fr/

Dans le menu des boutons en haut à gauche, Il y a un petit écart entre la bordure supérieure et le 1er bouton.
Cet écart est visible dans la fenêtre de construction WYSIWYG, et aussi dans la fenêtre Aperçu de Kompozer.

Je pensais à l'origine que c'était un petit bogue de Kompozer, car lorsque je visualise mon site avec Internet Explorer, la bordure supérieure est bien 'colée' aux boutons.

Mais en navigant avec Firefox, j'ai vu que ce défaut existe aussi.
Je pense bien entendu que Firefox interprète les pages de la même façon que Kompozer.

Evidemment, je voudrais que mon site soit sans 'défaut'. Une vérification du CSS par 3WC me félicite car il n'y a pas d'erreur dans mon code.

La question est: qu'est-ce qui provoque ce petit bogue, qui n'apparait pas dans IE7 ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 26 sept. 2008, 23:51

Un retour à la ligne inopportun ?

Code : Tout sélectionner

<img style="width: 134px; height: 23px;" alt="" src="Images/B_H.png" /><br />
<div>
<ul style="margin: 0px; padding: 0px;" id="Gemogiciel_E"

Rtg57 · Message par **Rtg57** » 28 sept. 2008, 10:41

Merci d'avoir pris le temps de regarder le code de la page.

Je ne comprends pas bien cette réponse, car je ne trouve pas le 'retour de ligne inopportun'.
En effet, j'ai essayé de modifier un peut le code source, mais Kompozer me le réécrit, comme à l'origine. Je pense qu'il estime qu'il faut que ce soit comme cela.
Faut dire aussi que je ne suis pas un crack dans ce domaine, et que tout ce code a été écrit par Kompozer.

Bref, pour l'instant le défaut persiste...

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 28 sept. 2008, 11:14

Fabrice.Tres.Net a écrit :Un retour à la ligne inopportun ?
<img style="width: 134px; height: 23px;" alt="" src="Images/B_H.png" /><br />
<div>
<ul style="margin: 0px; padding: 0px;" id="Gemogiciel_E"

Et comme cela c'est + clair?

Rtg57 · Message par **Rtg57** » 29 sept. 2008, 09:04

Ah oui, là c'est plus clair

Malheureusement, la suppression de cette balise ne change rien

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Message par **chinon37** » 29 sept. 2008, 09:41

le problème est que ce menu comporte pas mal d'aberrations.
1- tu as mis un div par élément de menu, c'est complètement inutile. 9a alourdit le code et ça ne sert à rien. Tu peux le voir en supprimant tous les div à l'intérieur du menu, ça ne le modifie pas.
2- Tu as créé autant de listes (balise <ul>) que d'éléments de menu!!? Ton menu est fait sous forme de liste (très bien!) mais il n'est besoin que d'une seule liste de plusieurs éléments.
Ainsi, ton menu devrait être sous la forme suivante:

Code : Tout sélectionner

<ul>
<li>lien1 </li>
<li>lien2 </li>
<li>lien3 </li>
<li>lien4 </li>
</ul>

Pour supprimer l'inconvénient de l'espace entre la première image (en haut du menu), il suffirait que tu inclus l'élément dans la liste sans lui donner de lien ou que tu utilises une image de fond pour <ul> dont le haut serait cette image.

Message par **chinon37** » 29 sept. 2008, 11:12

Je viens de faire vite fait un menu comme dit ci-dessus, dont voici le résultat:

le code (à améliorer car fait en 5 minutes):

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
    <title>
      menu
    </title>
    <meta content="Chinon37" name="author">
    <style type="text/css">
ul {
    background-position: center top;
    background-repeat: no-repeat;
    width: 134px;
    }
    li {
    height: 58px;
    list-style-type: none;
    }
    #menu span {
    visibility: hidden;
    }

    </style>
  </head>
  <body>

    <ul id="menu">
      <li style="height: 23px; background-position: center top; background-repeat: no-repeat; background-image: url(http://gemogiciel.free.fr/Images/B_H.png);">
        <span>menu1</span>
      </li>
      <li style="background-image: url(http://gemogiciel.free.fr/Images/Btn_Assoc_L.jpg); background-position: center top; background-repeat: no-repeat;">
        <span><a href="#">menu2</a></span>
      </li>
      <li style="background-image: url(http://gemogiciel.free.fr/Images/Btn_APN_L.jpg); background-position: center top; background-repeat: no-repeat;">

        <span><a href="#">menu3</a></span>
      </li>
      <li style="background-image: url(http://gemogiciel.free.fr/Images/Btn_JDC_L.jpg); background-position: center top; background-repeat: no-repeat;">
        <span>menu4</span>
      </li>
      <li style="background-image: url(http://gemogiciel.free.fr/Images/Btn_@_L.jpg); background-position: center top; background-repeat: no-repeat;">
        <span>menu5</span>

      </li>
      <li style="background-position: center top; background-repeat: no-repeat; background-image: url(http://gemogiciel.free.fr/Images/B_KPZ.png);">
        <span>menu6</span>
      </li>
    </ul>
  </body>
</html>

Rtg57 · Message par **Rtg57** » 29 sept. 2008, 22:16

Ben merci beaucoup pour ce travail !
C'est très gentil.

Evidemment en ce qui me concerne, va falloir que je bosse pour comprendre le source, vu que c'est Kompozer qui m'a tout écrit !

Merci encore et @ + tard ...

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Geckozone

Petit défaut graphique

Petit défaut graphique

Qui est en ligne ?