Problème d' apparence sous IE uniquement

krystof · Message par **krystof** » 29 mars 2007, 19:07

Fabrice, ce site là comme beaucoup, je les ai consulter de nombreuses fois.
Je n' ai pas très envie d' apprendre les codes sinon je ne serait pas présent sur le forum d' un site relatif à KPZ.
Ces sites t'apprennent pas mal de chose mais encore une fois, je ne vais pas tout taper à la main.
Les tutos sur Kazcades ne courent pas les rues pour l' instant.
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Message par **Ymai** » 29 mars 2007, 20:13

krystof a écrit : Par exemple : impossible de créer le menu qu' a fait Ymai.

Lequel? Je suis très intéressé par des commentaires sur tout ce qui peut faire problème ou obstacle à la compréhension.
L'art de profiter de la situation...

krystof · Message par **krystof** » 29 mars 2007, 20:33

Celui là, c' est celui que tu avais nettoyé :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
  <meta content="text/html; charset=ISO-8859-1" 
 http-equiv="content-type"> 
  <title>Le titre</title> 
  <style type="text/css"> 
#entete a { 
color: red; 
font-weight: bold; 
} 
#entete li { 
margin: 0 20px; 
display: block; 
float: left; 
} 
  </style> 
</head> 
<body> 
<ul id="entete"> 
  <li><a href="index.html">Accueil</a></li> 
  <li><a href="traitementvideo.html">Vidéo</a></li> 
  <li><a href="traitementaudio.html">Audio</a></li> 
  <li><a href="commentcamarche.html">Comment ça marche</a></li> 
  <li><a href="lexique.html">Lexique</a></li> 
  <li><a href="problemes.html">Les problèmes</a></li> 
  <li><a href="astuces.html">Astuces diverses</a></li> 
</ul> 
</body> 
</html>

J' aurai bien aimé savoir faire ceci avec Kazcades parce que vu comme je me suis pris la tête pour faire le peu que j' ai fait, j' ai pas envie de tout laisser tomber.
Et si je peux faire des mises en page qui ne posent pas de problèmes aux navigateurs, ce serait mieux. ( je laisserai donc tomber les tableaux.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Message par **Ymai** » 29 mars 2007, 20:39

OK, merci.
Je n'aurai malheureusement pas le temps de clarifier cela avant samedi, au mieux.
C'est le même principe (mais pas du tout le même résultat) que celui de la manip proposée là:
http://sio2.be/wikini/wakka.php?wiki=TutoKpz
Mais il n'y a aucune image et ce n'est pas jojo à suivre. C'est un brouillon (améliorable par tout un chacun).
Juste pour montrer que tout cela est possible avec KompoZer

krystof · Message par **krystof** » 29 mars 2007, 22:03

Super !
Merci, enfin ce que je cherchais !
Par contre, quand tu mets :

Dans la zone "Nouvelle règle de style", indiquer la mention "#menu" (attention, il faut absolument un "#" pour mentionner qu'il s'agit d'un bloc "id")

Il faut auparavant cocher ceci sinon ça ne marche pas, la feuille de style ne veut pas se créer :

Alors je croyais que c' était bien partit mais......voici ce que ça donne sous IE et Maxthon pour Opéra et FF c' est nikel:

Je mets le lien :
http://chrisllers.free.fr/css.html
et le code au cas où :

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-1"
 http-equiv="content-type"><title>essai</title><style
 type="text/css">
#menu {
    list-style-type: none;
    padding-left: 0px;
    margin-left: 0px;
}

#menu a {
    display: block;
    float: left;
    background-color: #000000;
    color: #ff0000;
    font-style: oblique;
    font-weight: bold;
    margin-left: 0px;
    padding-left: 45pt;
}


</style></head><body><ul id="menu"><li><a
 href="index.html">Accueil</a></li><li><a
 href="traitementvideo.html">Vidéo</a></li><li><a
 href="traitementaudio.html">Audio</a></li><li><a
 href="commentcamarche.html">Comment ça marche</a></li><li><a
 href="astuces.html">Astuces diverses</a></li><li><a
 href="problemes.html">Les problèmes</a></li><li><a
 href="lexique.html">Lexique</a></li></ul><br></body></html>

J' ai fait des captures des feuilles pour les 2 styles :

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Message par **Ymai** » 29 mars 2007, 22:23

krystof a écrit : Il faut auparavant cocher ceci sinon ça ne marche pas, la feuille de style ne veut pas se créer :

Dans KompoZer, l'éditeur KaZcadeS est, par défaut, en mode "Expert" (case cochée, en bas et à gauche dans la même boîte de dialogue).
Ce mode permet d'éviter les 3 cases à cocher diaboliques illustrées. Je pense qu'il faut être un mutant pour être capable de sélectionner la case qui convient dans une situation donnée.

Mais ta remarque est fondée pour NVU.

Message par **Ymai** » 29 mars 2007, 22:42

krystof a écrit :Alors je croyais que c' était bien partit mais......voici ce que ça donne sous IE et Maxthon pour Opéra et FF c' est nikel:

Effectivement, ça ne fonctionne pas sous IE.
Désolé, mais je n'ai pas trop le temps de chercher la raison.
Les directives de styles me paraissent toutefois curieuses.
Pourquoi ne pas reprendre ma suggestion (corrigée) de départ?

krystof · Message par **krystof** » 29 mars 2007, 23:02

Ymai a écrit :Pourquoi ne pas reprendre ma suggestion (corrigée) de départ?

Parce que je ne sais pas comment faire !
Si je recopie des codes à gauche à droite, autant ne rien faire.
Le but ce serait que je comprenne, notamment comment utiliser Kazcades.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Message par **Ymai** » 29 mars 2007, 23:21

http://sapajou.be/images
voir clipboard1 -> clipboard4

krystof · Message par **krystof** » 30 mars 2007, 11:32

Ca correspond bien à ce que j' ai fait.
J' ai toutefois modifié les paramètres des boîtes comme sur tes captures, mais le problèmes sous IE est le même.
http://chrisllers.free.fr/css.html

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Tancrede · Message par **Tancrede** » 30 mars 2007, 11:54

Salut,

rajoute ce bout de code dans ta partie css

Code : Tout sélectionner

li {
display: inline;
}

C'est bon?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

krystof · Message par **krystof** » 30 mars 2007, 13:04

Presque !!
http://chrisllers.free.fr/css.html
chez moi lexique est passé en dessous de accueil
Il faudra que j' ajoute ça à toutes mes pages je suppose ?
Pour le CSS avec kazcades, est ce que je suis bien partie ou je me plante.
Exple : pour le titre, je n' ai pas su faire autrement qu' en créant un div.

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-1"
 http-equiv="content-type"><title>essai</title><style
 type="text/css">
li { display: inline; }
#menu {
list-style-type: none;
padding-left: 0px;
margin-left: 0px;
}
#menu a {
margin: 0px 20px 0px 40px;
display: block;
float: left;
background-color: #000000;
color: #ff0000;
font-style: oblique;
font-weight: bold;
}
#titrepage {
background-color: #000000;
text-align: center;
padding-top: 50px;
text-decoration: underline;
font-weight: normal;
padding-bottom: 50px;
color: #cccccc;
text-transform: uppercase;
font-size: 25px;
}
#paragraphe {
font-size: medium;
color: #cccccc;
background-color: #000000;
}
</style></head>
<body
 style="color: rgb(204, 204, 204); background-color: rgb(255, 255, 255);"
 alink="#ff0000" link="#ff0000" vlink="#cc0000"><ul
 id="menu"><li><a href="index.html">Accueil</a></li><li><a
 href="traitementvideo.html">Vidéo</a></li><li><a
 href="traitementaudio.html">Audio</a></li><li><a
 href="commentcamarche.html">Comment ça marche</a></li><li><a
 href="astuces.html">Astuces diverses</a></li><li><a
 href="problemes.html">Les problèmes</a></li><li><a
 href="lexique.html">Lexique</a></li></ul><br><div
 id="titrepage">TRAITEMENT
VIDEO<br></div><p
 style="margin-left: 28px; width: 924px;" id="paragraphe"><big>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Vous
trouverez ici quelques astuces qui vous
permettrons d' effectuer quelques manipulations sur vos&nbsp;vidéos
préférées, qu' elles soient stockées sur DVD, CD&nbsp;disque dur.
Pour des modifications concernant l' audio d' une vidéo, reportez vous
à la rubrique <a style="font-style: italic; font-weight: bold;"
 href="traitementaudio.html">Audio</a>.<br>Des
liens de téléchargements seront systématiquement proposés afin de vous
munir de quelques redoutables logiciels totalement gratuits.<br>De
plus amples informations vous seront fournit dans ces tutoriels ainsi
que la rubrique "<span style="font-style: italic;">Comment
ça marche</span>" accessible dans le menu principal du haut de
chaque page ou en cliquant sur "<span style="font-style: italic;">plus
d' infos</span> ".</big></p></body></html>
[/quote][/quote]

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Tancrede · Message par **Tancrede** » 30 mars 2007, 13:50

Re,

et comme ça c'est pas 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 content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>essai</title><style type="text/css">
body {
color: rgb(204, 204, 204);
background-color: rgb(255, 255, 255);
}
#conteneur {
width: 95%;
margin-left: auto;
margin-right: auto;
}
#menu {
width: 100%;
margin-left: 0px;
text-align: center;
}
#menu a {
margin-right: 10px;
margin-left: 10px;
background-color: #000000;
color: #ff0000;
font-style: oblique;
font-weight: bold;
}
.nav { 
display: inline;
}
#titrepage {
width: 100%;
margin-top: 20px;
background-color: #000000;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
text-decoration: underline;
font-weight: normal;
color: #cccccc;
text-transform: uppercase;
font-size: 25px;
}
#paragraphe {
font-size: medium;
color: #cccccc;
background-color: #000000;
text-align: center;
width: 924px;
}

</style></head>
<body alink="#ff0000" link="#ff0000" vlink="#cc0000">
<!-- je te rajoute un id conteneur qui contient toute ta page -->
<div id="conteneur">
<!-- debut du menu -->
<div id="menu">
<div class="nav"><a href="index.html">Accueil</a></div>
<div class="nav"><a href="traitementvideo.html">Vidéo</a></div>
<div class="nav"><a href="traitementaudio.html">Audio</a></div>
<div class="nav"><a href="commentcamarche.html">Comment ça marche</a></div>
<div class="nav"><a href="astuces.html">Astuces diverses</a></div>
<div class="nav"><a href="problemes.html">Les problèmes</a></div>
<div class="nav"><a href="lexique.html">Lexique</a></div>
</div>
<!-- fin du menu -->
<!-- debut titre -->
<div id="titrepage">TRAITEMENT
VIDEO</div>
<!-- fin titre -->
<p id="paragraphe"><big>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Vous
trouverez ici quelques astuces qui vous
permettrons d' effectuer quelques manipulations sur vos&nbsp;vidéos
préférées, qu' elles soient stockées sur DVD, CD&nbsp;disque dur.
Pour des modifications concernant l' audio d' une vidéo, reportez vous
à la rubrique <a style="font-style: italic; font-weight: bold;" href="traitementaudio.html">Audio</a>.<br />Des
liens de téléchargements seront systématiquement proposés afin de vous
munir de quelques redoutables logiciels totalement gratuits.<br />De
plus amples informations vous seront fournit dans ces tutoriels ainsi
que la rubrique "<span style="font-style: italic;">Comment
ça marche</span>" accessible dans le menu principal du haut de
chaque page ou en cliquant sur "<span style="font-style: italic;">plus
d' infos</span> ".</big></p>
</div>
<!-- fin de id conteneur -->
</body></html>

J'ai pris quelques libertés... peut être trop ? Mais comme je ne sais pas exactement ce que tu veux, ce n'est pas simple pour moi.

Sinon, oui il faudra rajouter ça à toutes tes pages (donc les refaire toutes.... : un conseil alors, il te faut utiliser une feuille de style externe, comme ça tu à un seul fichier pour gérer l'apparence de tout ton site !! c'est la que le css est top. Demain tu veux un fond blanc ? en 2 minutes tout le site est mis a jour.)

Tu t'en sors pas mal pour tes premiers pas ! Courage et tiens moi au courant

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

krystof · Message par **krystof** » 30 mars 2007, 14:40

Merci c' est excellent Tancrede !
Tes annotations me permettent de saisir pas mal de chose.
C' est excellent, merci
J' ai légèrement modifié selon mes préférences.
Par contre, tu as fait un conteneur pour toute la page.
Quel est l' intérêt par rapport à ce que j' avais commencé ?
Tu as fait le menu avec une class nav, tu peux m' en dire plus ?

********
EDIT : Pour les feuilles de style externes, je me posais justement la question.
Je vais me pencher sur le problème et voir sur les tutos de Ymai :
http://info.sio2.be/kpz/2/6.php
Mais pour l' instant, je ne trouve rien qui m' éclaire vraiment pour la création avec KPZ d' une feuille s appliquant à tout le site.
Mais j' ai une piste sur ce site : http://www.gtalbot.org/NvuSection/Guide ... 4.html#s41
( merci Chinon)
*********

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Message par **Ymai** » 30 mars 2007, 20:05

krystof a écrit :Ca correspond bien à ce que j' ai fait.
J' ai toutefois modifié les paramètres des boîtes comme sur tes captures, mais le problèmes sous IE est le même.
http://chrisllers.free.fr/css.html

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Ben oui, mais ce n'est plus ce que je proposais...

list-style-type: none sur #menu, cela n'a pas trop de sens.
A moins que la solution définitive soit là, je remets encore des explications complémentaires à un jour ou deux. Journée de folie, aujourd'hui.

Geckozone

Problème d' apparence sous IE uniquement

Qui est en ligne ?