probleme mise en page kompozer

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

virgima77
Arias
Messages : 5
Inscription : 04 avr. 2009, 18:20

probleme mise en page kompozer

Message par virgima77 »

bonjour
je suis novice dans la construction de site donc si vous pouvez me donner un coup de main.Voila je suis en train de creer mon permier site avec un kit graphique préconcu.Probleme n° 1, sur kompozer mes pages sont bien mises en place (donc photos et texte a leur place) puis quand je veux voir mon travail sur le navigateur j'ai devant les yeux une horreur style les photos les unes sur les autres, le texte n'est plus en bas mais a droite de l'image (et j'ai pourtant bien specifié dans "proprietes del'image" texte : en bas)." Voila le code source de ma page (sans parler des images trop grandes a telecharger....)

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <title>Copies de maitre classiques</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <meta name="Description" content="Kit graphique Squarr" />
  <meta name="Keywords"
 content="Kit graphique, Kit graphique Squarr" />
  <link rel="stylesheet" type="text/css"
 href="css/styles.css" />
<!--[if IE 6]><link href="css/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<div style="left: 624px; width: 710px;" id="site">
<div id="header">
<h1><a href="#" title="Page d'accueil">Roberto
Stabile <span>[Copies de maitre Classique]</span></a></h1>
</div>
<div id="menu">
<ul>
  <li><a href="#">L'artiste Roberto Stabile</a></li>
  <li><a href="#">Copies de maitre Classiques</a></li>
  <li><a href="#">Copies de maitre Modernes</a></li>
  <li><a href="#">La Joconde</a></li>
  <li><a href="#">La Cene de Leonard De Vinci</a></li>
  <li><a href="#">Portraits</a></li>
  <li><a href="#">Restaurations d'eglises</a></li>
  <li><a href="#">Presse</a></li>
  <li><a href="#">Conditions et Tarifs</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>
<div id="contenu">
<div id="texte"> <a name="haut_moderne"></a><span
 style="font-weight: bold;"><br />
</span>
<h2>Copies de maitres Classiques</h2>
<big><big><big><small><small><small>Sur</small></small></small></big></big></big><big><big><big><small><small><small>
cette page vous pourrez trouver quelques exemples de copies de maitres
classiques realisees par l'artiste Roberto Stabile.</small></small></small></big></big></big><small><br />
</small><big><big><big><small><small><small>Cette
liste est exhaustive et d'autres copies y seront rajoutees
par la suite, n'hesitez pas a revenir visiter notre site
pour y voir les nouveautes.</small></small></small></big></big></big><small><br />
</small><big><big><big><small><small><small>L'artiste
travaille exclusivement sur commission, si l'une de ses
oeuvres d'art (ou autre de votre choix) vous interesse, veuillez <a
 href="mailto:art_copy@alice.it"><span
 style="text-decoration: underline; color: rgb(255, 0, 0);">nous
contacter.</span></a></small></small></small></big></big></big><big><span
 style="font-family: Perpetua;"></span></big><small><br />
<br />
</small>
<div style="text-align: center; color: rgb(204, 0, 0);"><span
 style="text-decoration: underline;">Cliquez
sur l'image de votre choix pour l'agrandir.</span></div>
<p><small><span style="text-decoration: underline;"></span></small>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;Page 1 - 2 - 3 </p>
<span style="text-decoration: underline;"></span><big>&nbsp;</big><a
 href="../../annonciation.html"><img
 style="border: 0px solid ; width: 326px; height: 191px;" alt=""
 src="../../../Bureau/PHOTOS%20NUOVI%20QUADRI/100_0019.jpg" /></a>
<p><a href="../../annonciation%20messina.html"><br />
</a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;L'annonciation de
Leonard de
Vinci<br />
</big></p>
<p></p>
<p><a href="../../joconde.html"><img
 style="border: 0px solid ; width: 200px; height: 301px;"
 alt="La joconde"
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/da%20vinci.JPG" /></a></p>
<br />
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><br />
<big>La Joconde de Leonard De Vinci</big></p>
<p></p>
<br />
<p><a href="../../madonne%20saint%20anne.html"><img
 style="border: 0px solid ; width: 170px; height: 269px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/leonardo%20da%20vinci.jpg" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big>Madone St Anne de Leonard De Vinci</big></p>
<p></p>
<p><a href="../../la%20c%E9ne.html"><img
 style="border: 0px solid ; width: 260px; height: 178px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/ultima%20cena012.jpg" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;</big></p>
<p><big>La cene de Leonard De Vinci</big></p>
<p></p>
<p><a href="../../dame%20hermine.html"><img
 style="border: 0px solid ; width: 179px; height: 252px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/roberto%20stabile020.jpg" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big><br />
Dame a l'hermine de Leonard De Vinci</big></p>
<p><a href="../../napoleon.html"><img
 style="border: 0px solid ; width: 180px; height: 221px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/img145.jpg" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big>Napoleon
de David</big></p>
<p><a href="../../dame%20au%20turban.html"><img
 style="border: 0px solid ; width: 180px; height: 206px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/vermeer%202.jpg" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big>Dame au turban de Jan Vermeer</big></p>
<p></p>
<p><img style="width: 240px; height: 199px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/vermeer%203.jpg" /></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big>
Dame au verre de Jan Vermeer</big></p>
<p><a href="../../annonciation%20messina.html"><img
 style="border: 0px solid ; width: 192px; height: 256px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/IMAG1294.JPG" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big>L'annonciation de Antonello Di Messina</big></p>
<p></p>
<p><a href="../../bataille.html"><img
 style="border: 0px solid ; width: 350px; height: 138px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/quadri%20roberto%20002.jpg" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<big>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; Bataille
Navale</big><br />
<br />
<p><a href="../../nature%20morte%20cristal.html"><img
 style="border: 0px solid ; width: 185px; height: 247px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/natura%20morta.JPG" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><big>
Nature morte (oeuvre originale de Roberto Stabile)</big></p>
<p></p>
<p><a href="../../nature%20morte%20papillon.html"><img
 style="border: 0px solid ; width: 190px; height: 270px;" alt=""
 src="../../doc%20vir/doc%20vir/banca%20di%20imagine/quadri%20roberto/IMAG0897.JPG" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<br />
<p><big>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; Nature
morte</big></p>
<p></p>
<p><a href="../../nature%20morte%20grenade.html"><img
 style="border: 0px solid ; width: 201px; height: 232px;" alt=""
 src="../../../Bureau/PHOTOS%20NUOVI%20QUADRI/100_0091.jpg" /></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<br />
<br />
<big>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; <br />
<br />
<br />
<br />
<br />
<br />
&nbsp;Nature
morte</big><br />
<br />
<br />
<a href="../../saint%20sebastien.html"><img
 style="border: 0px solid ; width: 212px; height: 192px;" alt=""
 src="../../../Bureau/PHOTOS%20NUOVI%20QUADRI/100_0074.jpg" /></a>
<p></p>
<p></p>
<p></p>
<br />
<br />
<br />
<big><br />
<br />
<br />
Saint Sebastien de Van Honshorst<br />
<br />
<br />
</big><a href="../../saint%2520francois.html"><img
 style="border: 0px solid ; width: 189px; height: 274px;" alt=""
 src="../../../Bureau/PHOTOS%20NUOVI%20QUADRI/100_0046.jpg" /></a>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<br />
<br />
<big><br />
<br />
<br />
<br />
<br />
<br />
Saint Francois de Caravaggio<br />
<br />
<br />
</big>
<p style="text-align: left;"><a
 href="../../saint%20giovannino.html"><img
 style="border: 0px solid ; width: 274px; height: 224px;" alt=""
 src="../../../Bureau/PHOTOS%20NUOVI%20QUADRI/carava.jpg" /></a></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"><big>Saint Giovanni
(jeune) de
Caravaggio</big></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"><a
 href="../../repas%20emmaus.html"><img
 style="border: 0px solid ; width: 262px; height: 211px;" alt=""
 src="../../../Bureau/PHOTOS%20NUOVI%20QUADRI/100_0364.jpg" /></a></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p></p>
<p></p>
<br />
<big><br />
<br />
<br />
Repas emmaus de Caravaggio<br />
<br />
<br />
</big><a href="../../crucifission.html"><img
 style="border: 0px solid ; width: 234px; height: 326px;" alt=""
 src="../../../Bureau/PHOTOS%20NUOVI%20QUADRI/crocifissione%20di%20san%20pietro.jpg" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<big>Crucifix de Saint Pierre</big><br />
<br />
<br />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <a
 href="#haut_moderne"><span
 style="text-decoration: underline;">Haut de page</span></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<br />
</div>
</div>
<div id="footer">
<ul>
  <li>gn : <a href="http://www.zwatla.com/">Zwatla</a>
+ <a href="http://www.lagouache.com/"
 title="conception de site web">Lagouache</a></li>
</ul>
</div>
</div>
</body>
</html>



2 eme souci souvent sur certaines pages sur lesquelles au debut celles ci s'ouvrent parfaitement et puis au bout d'un certain temps, quand je veux verifier mon travail sur firefox j'ai ce message qui m'apparait :
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
erreur parce ke j'ai deux fois lang fr meme quand je l'efface le probleme me revient de tte facon
Merci de votre aide a tous


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 2.0.50727; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
Kazé
Varan
Messages : 1743
Inscription : 10 févr. 2005, 10:26

Message par Kazé »

Bonjour,

pour ton problème de mise en page, difficile de se faire une idée (au moins pour moi), je ne vois rien dans le code HTML qui corresponde au problème que tu signales. Peut-être pourrais-tu poster deux copies d’écran (une de KompoZer, une de Firefox) pour qu’on comprenne mieux ?

Pour le coup de l’attribut « lang="fr" » qui est dupliqué, c’est soit un bug de KompoZer, soit une conséquence d’un kit graphique non-valide w3c. Tu peux déjà supprimer les deux attributs « lang="fr" », ça devrait résoudre ton problème.

Deux conseils en passant :
  • ne jamais chercher à aligner ou positionner des éléments à coups de barre d’espace
  • éviter les boutons de la deuxième barre d’outils (notamment ceux qui modifient la taille du texte), surtout si tu utilises un kit graphique
Si tu débutes, je te recommande d’utiliser d’abord ton kit graphique et de te contenter d’une mise en page très simple au début ; après quoi, tu pourras faire évoluer ta mise en page en utilisant l’éditeur CSS.
KompoZer lead dev
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Bonjour,

Sauf erreur, ton kit graphique doit être composé d'une page html et d'une feuille de style (fichier styles.css du dossier css)
Pour des difficultés d'affichage, le code source html sans la feuille de styles ne peut guère nous aider à chercher les erreurs :wink:

Pour les images, il est nécessaire de les mettre au format d'affichage souhaité et de les compresser avant de les inclure dans la page web.
Si l'image est mise au format de cette façon:

Code : Tout sélectionner

style="border: 0px solid ; width: 326px; height: 191px;
- la page sera très lourde car c'est le "poids" de l'image d'origine qui compte (l'image grandeur réelle est chargée puis retaillée)
- la qualité de l'image sera très mauvaise et pixellisée.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
virgima7

toujours la meme erreur

Message par virgima7 »

bonjour a tous
Alors j'ai resolu mon probleme de photos trop grandes, je me suis mise a bucher sur le css pour comprendre les attributs et maintenant j'ai pu rectifier les differents blocs de mon site OUF!!! :D
le p'tit souci ki me reste encore, je rouvre une de mes pages et a l'improviste j'ai de nouveau le fameux lang: fr element duplique qui me reapparait .... :oops: ce ke je que je n'arrive pas a comprendre c'est que j'ai beau effacer la phrase d'erreur dans la source (et donc je l'ai bien reperee elle arrive tout de suite apres le W3C du debut) j'enregistre, mais elle me revient de toute facon meme effacee j'espere que vous me comprendrez!Merci de vos avis a tous les experts!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.9) Gecko/2009040821 Firefox/3.0.9
Répondre

Qui est en ligne ?

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